1. vue 的声明周期有哪些及每个声明周期做了什么？

beforeCreate 是 new Vue() 之后触发的第⼀个钩⼦，在当前阶段 data、methods、 computed 以及 watch 上的数据和⽅法都不能被访问。

created 在实例创建完成后发⽣，当前阶段已经完成了数据观测，也就是可以使⽤数据， 更改数据，在这⾥更改数据不会触发 updated 函数。可以做⼀些初始数据的获取，在当前 阶段⽆法与 Dom 进⾏交互，如果⾮要想，可以通过 vm.$nextTick 来访问 Dom。

beforeMount 发⽣在挂载之前，在这之前 template 模板已导⼊渲染函数编译。⽽当前阶段虚拟 Dom 已经创建完成，即将开始渲染。在此时也可以对数据进⾏更改，不会触发 updated。

mounted 在挂载完成后发⽣，在当前阶段，真实的 Dom 挂载完毕，数据完成双向绑定，可以访问到 Dom 节点，使⽤ $refs 属性对 Dom 进⾏操作。

beforeUpdate 发⽣在更新之前，也就是响应式数据发⽣更新，虚拟 dom 重新渲染之前被触发，你可以在当前阶段进⾏更改数据，不会造成重渲染。

updated 发⽣在更新完成之后，当前阶段组件 Dom 已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致⽆限循环的更新。

beforeDestroy 发⽣在实例销毁之前，在当前阶段实例完全可以被使⽤，我们可以在这时进⾏善后收尾⼯作，⽐如清除计时器。

destroyed 发⽣在实例销毁之后，这个时候只剩下了 dom 空壳。组件已被拆解，数据绑定被卸除，监听被移出，⼦实例也统统被销毁。

2. vue 响应式原理是什么？vue3的响应式有何不同

Vue 在初始化数据时，会使⽤ Object.defineProperty 重新定义 data 中的所有属性，当⻚⾯使⽤对应属性时，⾸先会进⾏依赖收集(收集当前组件的 watcher )如果属性发⽣变化会通知相关依赖进⾏更新操作( 发布订阅 )。

Vue3.x 改⽤ Proxy 替代 Object.defineProperty。因为 Proxy 可以直接监听对象和数组的变化，并且有多达 13 种拦截⽅法。并且作为新标准将受到浏览器⼚商重点持续的性能优化。

Proxy 只会代理对象的第⼀层，那么 Vue3 ⼜是怎样处理这个问题的呢？

（很简单啊）

判断当前 Reflect.get 的返回值是否为 Object，如果是则再通过 reactive ⽅法做代理， 这样就实现了深度观测。

监测数组的时候可能触发多次 get/set，那么如何防⽌触发多次呢？

我们可以判断 key 是否为当前被代理对象 target ⾃⾝属性，也可以判断旧值与新值是否相等，只有满⾜以上两个条件之⼀时，才有可能执⾏ trigger。

3. vue3 和 vue2 的区别

  • 源码组织方式变化：使用 TS 重写
  • 支持 Composition AP：基于函数的 API，更加灵活组织组件逻辑（vue2 用的是 options api）
  • 响应式系统提升：vue3 中响应式数据原理改成 proxy，可监听动态新增删除属性，以及数组变化
  • 编译优化：vue2 通过标记静态根节点优化 diff，vue3 标记和提升所有静态根节点，diff 的时候只需要对比动态节点内容
  • 打包体积优化：移出一些不常用的 api（inline-template、filter）
  • 声明周期的变化：使用 setup 代替了之前的 beforeCreate 和 created
  • vue3 的 template 模版支持多个根标签
  • vuex 状态管理：创建实例的方式改变，vue2 为 new Store，vue3 为 createStore
  • Route 获取页面实例与路由信息：vue2 通过 this 获取 router 实例，vue3 通过使用 getCurrentInstance / userRoute 和 userRouter 方法获取当前组件实例

4. 谈一谈对 MVVM 的理解？

MVVM 是 Model-View-ViewModel 缩写，也就是把 MVC 中的 Controller 演变成 ViewModel。Model 层代表数据模式，View 代表 UI 组件，ViewModel 是 View 和 Model 层的桥梁，数据会绑定到 ViewModel 层并自动将数据渲染到页面中，视图变化的时候会通知 ViewModel 层更新数据。

5. 在 vue2.x 中如何检测数组的变化？

使用了函数劫持的方式，重写了数组的方法，vue 将 data 中的数组进行了原型链重写，指向了自己定义的数组原型方法。这样当调用数组 api 时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。这样就实现了检测数组变化。

6. v-model 双向绑定的原理是什么？

v-model 本质就是一个语法糖，可以看成是 value + input 方法的语法糖。可以通过 model 属性的 prop 和 event 属性来进行自定义。原生的 v-model