02 响应式原理

数组响应式要解决的几个问题:

1:定义defineReactive和reactify函数,生成get/set数据拦截

2:对数组7个变异方法进行重写,让这些变异函数传参也是响应式的。这里就是数组方法的拦截

3:已经将对象改为响应式的了,但是如果直接给对象重新赋值给一个新的对象,新的对象也需要是响应式的,怎么做呢?(在set时候neVal也要进行reactify化)

 

proxy方法 锦上添花而已,方便用户调用 本来是app._data.name ->然后写个方法->app.name 这也是vue中不建议我们访问_数据(_数据是私有数据)

const obj1 = {
  _data: {
    name: 'zs',
    age: 10
  }
}
const keys = Object.keys(obj1._data)
for (let i = 0; i < keys.length; i++) {
  proxy(obj1, '_data', keys[i])
}
function proxy(target, prop, key) {
  Object.defineProperty(target, key, {
    configurable: true,
    enumerable: false,
    get() {
      return target[prop][key]
    },
    set(newVal) {
      target[prop][key] = newVal
    }
  })

}

 

posted on 2021-07-14 14:27  章画  阅读(21)  评论(0编辑  收藏  举报

导航