![](https://csdnimg.cn/release/download_crawler_static/88023280/bg1.jpg)
Vue 吧,我很喜欢尤大,最近刚发布了 Vue 的首部纪录片,真的很好看。
那你能讲一讲 MVVM 吗?
MVVM 是 Model-View-ViewModel 缩写,也就是把 MVC 中的 Controller 演变成 ViewModel。Model
层 代 表 数 据 模 型 ,View 代 表 UI 组 件 ,ViewModel 是 View 和 Model 层 的 桥 梁 , 数 据 会 绑 定 到
viewModel 层并自动将数据渲染到页面中,视图变化的时候会通知 viewModel 层更新数据。
简单说一下 Vue2. x 响应式数据原理
Vue 在初始化数据时,会使用 Object. defineProperty 重新定义 data 中的所有属性,当页面使用对应属
性时,首先会进行依赖收集(收集当前组件的 watcher)如果属性发生变化会通知相关依赖进行更新操
作(发布订阅)。
那你知道 Vue3. x 响应式数据原理吗?
(还好我有看,这个难不倒我)
Vue3. x 改用 Proxy 替代 Object. defineProperty。因为 Proxy 可以直接监听对象和数组的变化,并且
有多达 13 种拦截方法。并且作为新标准将受到浏览器尺商重点持续的性能优化。
Proxy 只会代理对象的第一层,那么 Vue3 又是怎样处理这个问题的呢?
(很简单啊)
判断当前 Reflect. get 的返回值是否为 Object,如果是则再通过 reactive 方法做代理,这样就实现了深
度观测。
监测数组的时候可能触发多次 get/set,那么如何防止触发多次呢?
我们可以判断 key 是否为当前被代理对象 target 自身属性,也可以判断旧值与新值是否相等,只有
满足以上两个条件之一时,才有可能执行 trigger。
面试官抬起了头。心里暗想
(这小子还行,比上两个强,应该是多多少少看过 Vue3 的源码了)
再说一下 vue2. x 中如何监测数组变化
使用了函数劫持的方式,重写了数组的方法,Vue 将 data 中的数组进行了原型链重写,指向了自己
定义的数组原型方法。这样当调用数组 api 时,可以通知依赖更新。如果数组中包含着引用类型,
会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化。
(能问到这的面试官都比较注重深度,这些常规操作要记牢)
nextTick 知道吗,实现原理是什么?
在下次 DOM 更新循环结束之后执行延迟回调。nextTick 主要使用了宏任务和微任务。根据执行环
境分别尝试采用