美文网首页react & vue & angularvue
vue数据代理原理Object.defineProperty()

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

作者: 扶得一人醉如苏沐晨 | 来源:发表于2023-03-13 09:10 被阅读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 方法 => 更新视图。

相关文章

  • vue 双向数据绑定

    Vue实现数据双向绑定的原理:Object.defineProperty()vue实现数据双向绑定主要是:采用数据...

  • vue.js 核心知识点八

    目录 - 8.1 Vue实现数据双向绑定的原理:Object.defineProperty() - 8.2 vue...

  • Vue2.x 的双向绑定原理及实现

    Vue 数据双向绑定原理 Vue 是利用的 Object.defineProperty()方法进行的数据劫持,利用...

  • Vue实现数据双向绑定的原理

    Vue实现数据双向绑定的原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数...

  • 双向绑定

    数据响应式原理 vue实现数据响应式的原理就是利用了Object.defineProperty(),重新定义了对象...

  • Object.defineProperty剖析

    object.defineProperty是Vue实现数据绑定的核心原理。 语法 Object.definePro...

  • vue数据双向绑定原理

    vue数据双向绑定原理,其实就是object.defineProperty重写get和set方法 varBook ...

  • vue3.x 与 vue2.x 在写法上的区别

    1. 数据双向绑定的原理 1.1 原理 Vue2.0使用Object.defineProperty来劫持对象属性的...

  • vue的数据绑定原理

    前言 每次谈到vue的双向数据绑定原理,大部分人都会说:Vue是通过Object.defineProperty方法...

  • vue基础题

    Vue2和Vue3的双向数据绑定的原理 Vue2的核心就是通过Object.defineProperty()方法设...

网友评论

    本文标题:vue数据代理原理Object.defineProperty()

    本文链接:https://www.haomeiwen.com/subject/rlgfrdtx.html