用JS实现响应式对象(VUE同原理)

Vue.js 实现响应式的核心是利用了 ES5 的Object.defineProperty,这儿尝试使用Object.defineProperty实现一个响应式对象,帮助理解Vue的深入响应式原理。
直接上代码:

let x={};
let value =10;
Object.defineProperty(x,'v',{
    get(){console.log('get');return value},
    set(newV){console.log('set');value=newV},
    configurable: true,
    enumerable: true
})

这样我们为对象x绑定了getter和setter,当调用x.v或改变x.v的值时,我们就能通过getter和setter得知。
用JS实现响应式对象(VUE同原理)_第1张图片

你可能感兴趣的:(踩过的坑,vue,js,javascript,object)