4. 销毁过程:父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
4. Vue 实现双向数据绑定原理是什么?
参考答案:
Vue2.x 采用数据劫持结合发布订阅模式(PubSub 模式)的方式,通过 Object.defineProperty
来劫持各个属性的 setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用
Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让 Vue
追踪依赖,在属性被访问和修改时通知变化。
Vue 的数据双向绑定整合了 Observer,Compile 和 Watcher 三者,通过 Observer 来监听自己的 model
的数据变化,通过 Compile 来解析编译模板指令,最终利用 Watcher 搭起 Observer 和 Compile
之间的通信桥梁,达到数据变化->视图更新,视图交互变化(例如 input 操作)->数据 model
变更的双向绑定效果。
Vue3.x 放弃了 Object.defineProperty ,使用 ES6 原生的 Proxy,来解决以前使用 Object.defineProperty
所存在的一些问题。
5. 说一下对 Vue2.x 响应式原理的理解
参考答案:
Vue 在初始化数据时,会使用 Object.defineProperty 重新定义 data
中的所有属性,当页面使用对应属性时,首先会进行依赖收集(收集当前组件的
watcher),如果属性发生变化会通知相关依赖进行更新操作(发布订阅)。
(可以参阅前面第 4 题答案)
6. 说一下在 Vue2.x 中如何检测数组的变化?
参考答案:
Vue2.x 中实现检测数组变化的方法,是将数组的常用方法进行了重写。Vue 将 data
中的数组进行了原型链重写,指向了自己定义的数组原型方法。这样当调用数组 api
时,可以通知依赖更新。如果数组中包含着引用类型,会对数组中的引用类型再次递归遍历进行监控。这
样就实现了监测数组变化。
流程:
1. 初始化传入 data 数据执行 initData
2. 将数据进行观测 new Observer
3. 将数组原型方法指向重写的原型
4. 深度观察数组中的引用类型
有两种情况无法检测到数组的变化。
1. 当利用索引直接设置一个数组项时,例如 vm.items[indexOfItem] = newValue
2. 当修改数组的长度时,例如 vm.items.length = newLength
不过这两种场景都有对应的解决方案。
利用索引设置数组项的替代方案
//使用该方法进行更新视图
评论0