vue数据代理原理Object.defineProperty()

2023-03-13 本文已影响0人扶得一人醉如苏沐晨

一、什么是数据代理

通过一个对象，代理对另一个对象data中属性的操作（读/写）。目的是为了更方便操作data中的数据

二、语法：

Object.defineProperty(obj, prop, descriptor)

   *  第一个参数 obj，表示被添加（特性）的对象
   *  第二个参数 prop，表示添加的属性
   * 第三个参数 descriptor，表示要定义或修改的属性值

Object.defineProperty（）可以为对象的属性添加特性，每一个被添加过的属性，都会拥有属于自己的getter和setter。正是有了getter和setter，可以实现数据驱动视图，数据实时绑定的效果。

不懂Object.defineProperty()访问如下链接

三、数据代理示例：

  let obj1 = { name: "kubo" };
  let obj2 = { age: 20 };
 
  // 为obj2添加新特性name
  Object.defineProperty(obj2, "name", {
    // 当obj2的name值被读取时,调用get函数
    get() {
      // 返回obj1的数据
      return obj1.name;
    },
 
    // 当obj2的name值被修改时,调用set函数
    set(value) {
      obj1.name = value;
    },
  });

四、Vue中数据代理的基本原理

看下面代码

<body>

    <!-- 准备好一个容器-->
    <div id="root">
        <h2>名字：{{name}}</h2>
        <h2>地址：{{address}}</h2>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
        el: '#root',
        data: {
            name: '张三',
            address: '北京'
        }
    })
    console.log(vm);
</script>

image.png

我们发现vm实例上就有了address，name这两个属性，我们思考一件很关键的事情，这两个属性，是怎么加上去的

4.1、数据代理的基本原理

1、通过Object.defineProperty方法，将data对象中所有的属性添加到vm上

2、为每一个添加到vm上的属性，都配置setter和getter等响应式操作，实现对对象里面属性监视

3、在setter/getter内部操作data中对应的属性。（ 这样改了属性就会引起对应的setter调用，会重新解析模板）

 4、 模板重新解析的时候，会重新生成虚拟Dom,新旧DOM对比，重新渲染页面

4.2、Vue中数据代理过程

1、实例化vue后，得到实例对象vm。

2、将options配置项目里的data数据存储一份至vm的_data

(至此，vm自身还没有data里的数据，但是可以通过vm._data获取到)

3、（开始代理）vm利用Object.defineProperty方法开始为自身添加_data中的属性。
属性值是通过getter读取到_data中对应的属性值。

赋值

//options就是new Vue时传入配置项
vm._data = options.data

数据代理

Object.defineProperty(vm,'name',{
    get(){
        return vm._data.name
    },
    set(newval){
        vm._data.name = newval
    }
})

五、数据代理的作用

5.1、简化代码

假设我们没有数据代理，我们在使用插值语句的时候使用了{{_data.xxxx}}这样就增加了代码量，也非常的不方便

把_data中的属性通过Object.defineProperty方法一条一条的绑定到vm实例上面，访问vm上面的属性就可以直接访问_data中的属性，在差值语法中可以直接{{xxxxx}}

5.2、实现双向绑定

在Vue中当我们修改了通过defineProperty方法添加到vm实例上面的属性，会触发set函数

set函数做的第一件事就是赋值

set(newval){
        vm._data.name = newval
    }

set还做了第二件事
作为发布者发出通知：“我是属性 xxx，我变了”。文本节点则是作为订阅者，在收到消息后执行相应的更新操作。 mvvm

发出通知 dep.notify() => 触发订阅者的 update 方法 => 更新视图。