2025年01月10日 建站教程
vue2的响应式原理：
对象：是通过 Object.defineProperty对象的已有属性值的读取和修改进行劫持。
Object.defineProperty( 'data', 'count', {
get(){ },
set(){ }
})
//存在的问题：对象直接添加新属性或删除已有属性的时候，界面不会自动更新。
数组：是通过重写数组更新数组一系列更新元素的方法，来实现元素修改的劫持。
['push','pop','shift','unshift','splice','reverse','sort'].forEach(key=>{
arrayProto[key] = function(){
originalProto[key].apply(this.arguments)
notifyUpdate()
}
})
//存在问题：直接通过下标替换元素或更新length的时候，界面不会自动更新。
针对 vue2 对象和数组的某些更新，界面不能自动更新的问题，vue2 通过 $set 方法，实现视图的实时更新。
vue3的响应式原理：
vue3 响应式是使用 ES6 的 proxy 和 Reflect 相互配合实现数据响应式，解决了 vue2 中视图不能自动更新的问题。
proxy 是深度监听，所以可以监听对象和数组内的任意元素，从而可以实现视图实时更新。
本文链接：http://so.lmcjl.com/news/21055/