原理
Object.defineProperty、getter、setter 标准回答 Vue响应式指的是:组件的data发生变化,立刻触发试图的更新
原理:Vue采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过对data里面的对象属性进行遍历劫持数据的getter和setter,
当数据发生改变时,会触发对应的setter方法 通过dep.notice()去通知订阅者watcher,watcher接受到消息之后在去触发patch比较新老dom,
在去触发页面的更新
缺点
Object.defineProperty的缺点
一次性递归到底开销很大,如果数据很大,大量的递归导致调用栈溢出
不能监听对象的新增属性和删除属性
无法正确的监听数组的方法,当监听的下标对应的数据发生改变时
解决方法
运用this.$forceUpdate()强制刷新。
使用vm.$set(vm.items, indexOfItem, newValue)
将原数据 obj 进行深拷贝一下,然后再对拷贝后的数据 obj1 进行操作,然后再把操作后的数据obj1 赋值给原数据 obj
第一种情况,可以使用数组的splice方法,arr.splice(index, 1, item)
Object.defineProperty的不足
Object.defineProperty(obj, key, {enumberable:true,configurable:true,get {},set(value) {}});
vue是通过对Data中的属性进行遍历,数据劫持,通过getter(监听数据读取)和setter(监听数据修改),getter在读取数据的时候收集watcher作为依赖,setter在数据发生变化时通知watcher触发视图更新。
更新数组内容时是不会触发界面更新的。只有一些改变数组的方法push(),pop(),shift(),unshift(),splice(),sort(),reverse() 才会触发。对象里面的数组除外。
vue3.0的Proxy
替代了原有的 Object.defineProperty
Proxy和Object.defineProperty的区别是:后者定义的是一个对象上某个值得表现,前者是一个对象行为得表现,不局限某个属性,能观察到对象中属性的增加和删除,可以弥补后者的不足。