vue双向绑定原理

**

Vue双向绑定的原理

一、在讲vue双向绑定之前我们需要来了解下MVVM模式

MVVM（Model-View-ViewModel）是对 MVC（Model-View-Control）和 MVP（Model-View-Presenter）的进一步改进。

• View：视图层（UI 用户界面）
• ViewModel：业务逻辑层（一切 js 可视为业务逻辑，也就是前端的日常工作）
• Model：数据层（存储数据及对数据的处理如增删改查）

• MVVM 将数据双向绑定（data-binding）作为核心思想，View 和 Model 之间没有联系，它们通过 ViewModel
  这个桥梁进行交互

• Model 和 ViewModel 之间的交互是双向的，因此 View 的变化会自动同步到 Model，而 Model
  的变化也会立即反映到 View 上显示

• 当用户操作 View，ViewModel 感知到变化，然后通知 Model 发生相应改变；反之当 Model 发生改变，ViewModel
  也能感知到变化，使 View 作出相应更新
  
  MVVM框架的的核心就是双向绑定, 其原理是通过数据劫持+发布订阅模式相结合的方式来是实现的，简单来说就是数据层发生变化的时候，可同布更新视图层，当视图层发生变化的时候，同步更新数据层

双向绑定的核心： Object.defineProperty()

Object.defineProperty(obj, prop, descriptor) 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

• obj：要定义属性的对象
• prop：要定义或修改的属性的名称或 Symbol
• descriptor：要定义或修改的属性描述符
• 返回值：被传递给函数的对象

我们通过Object.defineProperty的get方法用来获取值 set方法用来拦截设置值

  var obj = {};  //定义一个空对象
    Object.defineProperty(obj, 'val', {//定义要修改对象的属性
        get: function () {
            console.log('获取对象的值')
        },
        set: function (newVal) { 
            console.log('设置对象的值：最新的值是'+newVal);
        }
    });
    obj.hello = 'hello world'
1
2
3
4
5
6
7
8
9
10

js通过Object.defineProperty方法简单的实现双向绑定