vue面试题

Model 层: 对应数据层的域模型，它主要做域模型的同步 。在层间关系⾥，它主要⽤于抽象出 ViewModel 中视图的 Model。

View 层: 作为视图模板存在 ，在 MVVM ⾥，整个 View 是⼀个动态模板。 除了定义结构、布局外，它展示的是 ViewModel 层的数据和状态 。View 层不负责处理状态，View 层做的是 数据绑定的声明、 指令的声明、 事件绑定的声 明。

ViewModel 层: 把 View 需要的层数据暴露，并对 View 层的 数据绑定声明、 指令声明、 事件绑定声明 负责，也就是处 理 View 层的具体业务逻辑。 ViewModel 底层会做好绑定属性的监听。当 ViewModel 中数据变化，View 层会得到更新；⽽当 View 中声明了数据的双向绑定（通常是表单元素），框架也会监听 View 层（表单）值的变化。⼀旦值变 化，View 层绑定的 ViewModel 中的数据也会得到⾃动更新。

优点:

Model变化和修改，⼀个ViewModel可以绑定不同的"View"上，当View变化的时候Model不可以不变，当Model变化 的时候View也可以不变。你可以把⼀些视图逻辑放在⼀个ViewModel⾥⾯，让很多view重⽤这段视图逻辑

缺点:

Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程

官⽅实例的异步请求是在mounted⽣命周期中调⽤的，⽽实际上也可以在created⽣命周期中调⽤。

https://juejin.im/post/5d267dcdf265da1b957081a3

computed用于计算属性，只有它依赖的值改变才会触发，且这个值有缓存

watch用于监听一个属性的变化，属性变化就会触发

computed:

⼩结:

简单版：利⽤ Object.defineProperty 劫持对象的访问器,在属性值发⽣变化时我们可以获取变化,然后根据变化进⾏后续响应,在 vue3.0中通过Proxy代理对象进⾏类似的操作。

补充
vue的双向绑定是通过数据劫持和发布者-订阅者模式实现的，数据劫持又是通过
Object.defineProperty()实现的

Proxy的优势如下:
Proxy可以直接监听对象⽽⾮属性
Proxy可以直接监听数组的变化
Proxy有多达13种拦截⽅法,不限于apply、ownKeys、deleteProperty、has等等是 Object.defineProperty 不具备的
Proxy返回的是⼀个新对象,我们可以只操作新的对象达到⽬的,⽽
Object.defineProperty 只能遍历对象属性直接修 改Proxy作为新标准将受到浏览器⼚商重点持续的性能优化，也就是传说中的新标准的性能红利

Object.defineProperty的优势如下: 兼容性好,⽀持IE9

v-if 用于条件渲染
v-show 用于条件渲染，两者的区别请参考下一个问题
v-for 用于列表渲染
v-on 监听事件
v-bind 动态绑定
v-html 渲染html元素
v-model 数据双向绑定

v-if 是惰性的，只有条件为真时才会切换，为假时什么也不做。确保切换过程中的事件监听器和子组件适当的被销毁和重建，适用于运行条件很少改变的场景。v-show 不管条件是否为真，总是会被渲染，适用于频繁切换的场景

v-for优先级高于v-if，放于同级可能会重复渲染两次v-if，建议把v-for放于v-if所在的外层元素

原理:eventloop事件循环
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

key 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。不指定key时，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试
就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

1.beforeCreate
初始化界面前
2.created
初始化界面后，拿到data，props，methods、computed和watch
3.beforeMount
渲染dom前
4.mounted
渲染dom后，拿到$el
5.beforeUpdate
更新前
6.updated
更新后，拿到更新后的dom
7.beforeDestroy
卸载组件前
8.destroyed
卸载组件后
9.activated
被 keep-alive 缓存的组件激活时调用
10.deactivated
被 keep-alive 缓存的组件停用时调用

虚拟dom是对真实dom的一种映射，新旧Vnode比较同层级的节点，然后根据两者的差异只更新有差异的部分，生成新的视图，而不是对树进行逐层搜素遍历，因此时间复杂度是O(n)。虚拟dom可以减少页面的回流和重绘，提升性能