1. Responsiveness of Vue2
Implementation principle: get and set methods in Object.defineProperty()
Object.defineProperty(data, 'obj', {
get () {
},
set () {
}
})
Disadvantages: Adding and deleting object properties, modifying array pages through subscripts does not update
Solution:
对象：this.$set(this.obj,'name','beizhen')
this.$delete(this.obj,'name')
数组：this.$set(this.list,0,'beizhen')
Two, Vue3 response principle
Implementation principle: Proxy (proxy) object intercepts attribute changes, Reflect (reflection) operates attributes
new Proxy(data, {
// 拦截读取属性
get (target, prop) {
return Reflect.get(target, prop)
},
// 拦截设置属性
set (target, prop, value) {
return Reflect.set(target, prop, value)
},
// 拦截删除属性
deleteProperty (target, prop) {
return Reflect.deleteProperty(target, prop)
}
})
Why use Reflect instead of Object manipulation properties?
Reflect更友好，会有返回值；Object异常需要try/catch捕获