vue2 常见面试题 #

什么是MVVM？ #

MVVM 是Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来；ViewModel 是一个同步View 和 Model的对象。

Vue的生命周期 #

Vue 实例从创建到销毁的过程，就是生命周期。vue 提供的生命周期函数有：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

这些生命周期函数提供了在特定阶段添加自定义逻辑的机会。

父子组件生命周期钩子执行顺序 #

父组件和子组件的生命周期钩子执行顺序是创建是先父后子，渲染、更新和销毁时先子后父。

# 创建是先父后子
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
# 更新和销毁时先子后父
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

Vue的响应式原理 #

Vue 2 中的响应式原理主要基于 Object.defineProperty() 函数。当你创建一个 Vue 实例时，Vue 会遍历 data 对象的所有属性，并使用 Object.defineProperty() 将它们转换为 getter 和 setter，代理属性，从而实现对数据的监听和响应。

具体来说，当访问数据属性时，Vue 会记录当前的依赖关系。如果这个属性被用于渲染视图，那么这个渲染函数就会成为这个属性的依赖。当数据发生变化时，它会通知所有依赖于该数据的地方，从而触发相应的更新。

v-for 和 v-if 优先级 #

当 v-for 和 v-if 同时存在于同一个节点时，v-for 的优先级高于 v-if。

<div v-for="item in list" v-if="item.show">{{ item.name }}</div>

v-for 中key的作用 #

在 Vue 中使用 v-for 进行列表渲染时，每个节点都会有一个唯一且稳定的 key 值。key 的作用主要是为了高效的更新虚拟 DOM。

当数据发生变化时，Vue 会根据新数据生成一个新的虚拟 DOM 树，然后通过 diff 算法对比新旧虚拟 DOM 树的差异，最终只更新差异部分的真实 DOM。

如果没有 key，Vue 会使用一种最大限度减少移动操作的算法，但是这种算法有时候会出现错误，导致页面渲染错误。

Vue的路由实现原理 #

Vue 的路由实现原理主要是通过监听 URL 的变化，然后匹配路由规则，显示相应的组件。

vuex 的原理 #

全局混入，混入钩子会先于组件自身的钩子执行，这样就可以在组件内部访问到 store 对象。