Vue2高频问答
一、为什么 Vue 的 data 属性必须声明为返回一个初始数据的函数?
回答重点：
Vue 的 data 属性声明成一个返回初始数据的函数，是为了确保每个组件实例都有独立的状态。通过这种方式，避免了组件使用相同的数据对象导致的状态共亨和互相干扰。
扩展知识
1)组件实例的独立性
Vue 中，每个组件实例都有自己的状态。假如 data 属性是一个对象而不是函数，那么多个实例将共享同一个数据对象。当一个实例修改数据时，其他实例的状态也会受到影响，导致数据污染。通过将 data声明为函数，每个组件实例都会调用这个函数，从而返回独立的数据对象。这保证了各个实例的互不干涉。
2)Vue 实例和单文件组件的区别
在 vue 实例(如 new vue创建的根实例)中，data 可以是一个对象，因为根实例通常只有一个实例。然而，在单文件组件 (如.vue 文件)中，由于你可能会创建多个组件实例，所以data必须声明为函数。
二、Vue 在 created 和 mounted 这两个生命周期钩子中请求数据有什么区别?
在 Vue.js 中，created 和 mounted 都是常用的生命周期钩子，但它们在使用场景和请求数据时有几个主要的区别。
1)created :这个钩子在实例被创建之后调用。在这个阶段，组件实例已经完成了数据观察、计算属性和方法的初始化，但还没有挂载到 DOM 上。这意味着你可以在这个阶段进行一些数据请求，但无法访问 DOM 元素。
2)mounted:这个钩子在实例被挂载之后调用，在这个阶段，所有的子组件也会一起挂载完成。这意味着你可以访问 DOM 元素并操作它们。如果你需要做一些 DOM 相关的操作或等待组件完全挂载后再执行某些逻辑，可以选择这个钩子。
三、Vue Router 的 hash 模式和 history 模式有什么区别?
Vue Router 的 hash 模式和 history 模式主要区别在于 URL 的表现形式和实现方式。
1)hash 模式:URL中会出现#号，例如:http://example.com/#/home。hash模式的原理是基于 window.location.hash 的变化，来实现更新视图而不重新加载页面。hash 模式的核心特性是利用了浏览器对哈希的支持，使得页面在哈希值变化时不会重新加载全部内容。
2)history模式:URL是普通路径形式，例如:http:/example.com/home。history模式的原理是基于 HTML5的 history.pushstate和 history.replacestate，通过这两个 AP|来操作浏览器历史记录，改变 URL 同时不重新加载页面。所以使用 history 模式时，需要在服务端进行配置，让所有路由都指向同一个入口页面，否则会出现 404 错误。
四、为什么 Vue2 中给对象添加新属性后，界面没有刷新?
这是因为 Vue 的响应式系统对对象的属性增加进行了限制。Vue 2x不支持对象动态添加新属性的检测，所以 Vue 无法检测到对对象属性新增的变化，从而也无法自动更新界面。
五、vue中父子组件的生命周期钩子函数执行顺序
vue中的组件生命周期是: 四大阶段八大钩子, 我这里就用选项式api来和您说说他们的执行顺序
- 在前两个阶段: 创建和挂载阶段, 执行顺序分别是:
beforeCreate(父)--->created(父)---->beforeMount(父)--->beforeCreate(子)--->created(子)--->beforeMount(子)--->mounted(子) ---> mounted(父) - 在更新阶段
beforeUpdate(父) ---> beforeUpdate(子) ---> updated(子) ---> updated(父) - 销毁阶段
beforeDestroy(父) ---> beforeDestroy(子) ---> destroyed(子) ---> destroyed(父)
六、用vue做管理系统开发时, 用到了哪些UI组件库?
管理系统: 多数都是二次开发(不是从零到一)
二次开发常见的模板库: vue-element-admin , pure-admin
vue2: ElementUI, Ant Design Vue
vue3: ElementPlus, Ant Design Vue
七、22、说一说计算属性和watch的区别?
我先说下计算属性和watch的概念:
计算属性:
- 当一个属性的结果需要通过其它数据运算得来, 此时就可以把这个属性定义成计算属性
- 计算属性是有缓存的, 多处去使用计算属性也只会计算一次, 除非依赖的数据发生变化
- 计算属性有完整写法, 可以通过get和set方法实现
- 应用场景: 购物车总价, 全选
watch: - watch是一个侦听器, 如果某个属性的值发生变化, 我们想要去做一些业务操作, 我们就可以用watch去侦听该属性
- watch可以通过deep属性去实现深度侦听
- 应用场景: 实时翻译
再说一下计算属性和watch的区别:
- 计算属性是属性, watch则是对属性的侦听
- 计算属性内部不能有异步的操作, 但是watch是可以有异步操作的