vue双向数据绑定

vue的数据绑定其实是遵循mvvm思想

01-MVVM开发思想.png

方向一：模型到视图
方向二：视图到模型

底层实现：

双向数据帮定底层原理.png

本次介绍的是es5里面的api接口的Object.getOwnPropertyDescriptor

首先我们知道es5存在delete关键字

所以我们要思考的是id属性为什么可以删？是有什么决定的？通过es5提供给我们的一个api接口可以查看对象的某个属性相关信息
Object.getOwnPropertyDescriptor

 // id 属性为什么可以删除，是由什么决定的？ 如何去查看 es5 里面提供一个 api 可以查看对象的某个属性的相关的信息
     var des = Object.getOwnPropertyDescriptor(obj, 'name');
     console.log(des);

运行结果

image.png

然后，es5底层还有一个api能帮助我们实时监控对象行为。Object.defineProperty（ 参数1：代表要监视对象 参数2：代表要监视的属性， 参数3： 对象）， 属性：1. set（当我们给对象的属性进行值的设置的时候，这个set方法执行） 2. get 当我们获取对象的属性的时候，get 方法执行。举个例子

所以在 vuejs 里面，会对 data 模型里面的每个模型变量进行 Object.defineProperty 的调用，为每个模型变量增加一个 get 和 一个 set 用于 拦截数据。然后把数据的处理的权限交给 vuejs 进行处理。处理之后 vuejs 会使用 一个叫做 订阅和发布的(观察者设计) 设计模式来实现页面数据的刷新（渲染）。
这时候问题就来了，什么是订阅，什么又是发布呢？？
其实当你每次创建如下模型时

var vm = new Vue({
       el: '#box',
       data: {
           title: '你好', // Object.defineProperty(data, 'title',{set, get})
           infos: '消息！', //  // Object.defineProperty(data, 'infos',{set, get})
       }
    });

在vuejs底层都会调用es5的api --Object.defineProperty，为每个data的属性变量创建get和set方法，对数据进行拦截，不会说直接调用set和get的时候就直接显示数据，而是通过插值表达式

{{ title }}

写了get方法进行订阅，当数据变化了，底层会通过set将数据渲染到页面
。