首先发布vue2.0中的响应式原理,主要是利用了 Object.defineProperty中的set和get方法来实现响应式。
let p = {}
Object.defineProperty(p, 'name', {
// 有人读取name时调用
get() {
return person.name
},
// 有人修改name时调用
set() {
console.log('有人修改了name属性')
person.name = this.name
}
})
这里书写我所认为的响应式,主要输数据劫持和数据代理。通过set和get可以实现通过页面上的内容可以修改原数据中的内容。从而实现响应式。
在vue 2.0中主要通过get和set,但是get和set有只是可以查询和修改的时候进行调用,但是更新和删除的时没有办法。没有put或者delete这种方法。所以vue2.0中有很大的限制。
在vue3.0针对这种限制进行创新:
const p = new Proxy(person, {
// 有人读取p的某个属性时调用
get(target, proName) {
console.log(`有人读取了${proName}属性`)
return Reflect.get(target, proName)
},
// 有人修改p的某个属性时调用或给p追加某个属性时调用
set(target, proName, value) {
console.log(`有人修改了${proName}属性`)
return Reflect.set(target, proName, value)
},
// 有人删除p的某个属性时调用
deleteProperty(target, proName) {
console.log(`有人删除了${proName}属性`)
return Reflect.deleteProperty(target, proName)
}
在这里就通过ES6中的proxy和reflect,(没有学习过ES6的可以去学习一下)这里就通过这里的get来读取数据,set在修改和追加的时候被调用,而delete就是在delete的时候去调用,这种刚好去满足了所有的要求。随着技术的进步,vue也做的更加完美。
具体的细节的理解,大家可以留言在下面,大家一起学习,一起进步。