vue实现原理

Vue是一个典型的MVVM框架，模型（Model）只是普通的JavaScript对象，修改它则视图（View）会自动更新。这种设计让状态管理变得非常简单而直观。那么Vue是如何把模型和视图建立起关联的呢？

实现原理

<div id="mvvm-app">
    <input type="text" v-model="word">
    <p>{{word}}</p>
    <button v-on:click="sayHi">change model</button> //点击这个button，word的值会发生改变
</div>

<script src="./js/observer.js"></script>
<script src="./js/watcher.js"></script>
<script src="./js/compile.js"></script>
<script src="./js/mvvm.js"></script>
<script>
    var vm = new MVVM({
        el: '#mvvm-app',
        data: {
            word: 'Hello World!'
        },
        methods: {
            sayHi: function() {
                this.word = 'Hi, everybody!';
            }
        }
    });
</script>

Vue实现这种数据双向绑定的效果，需要三大模块

1. Observer：能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2. Compile：对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3. Watcher：作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图

Observer（观察者）

Observer的核心是通过Obeject.defineProperty()来监听数据的变动，这个函数内部可以定义setter和getter，每当数据发生变化，就会触发setter。这时候Observer就要通知订阅者

Object.defineProperty()定义新属性或修改原来的属性
Object.defineProperty(obj,prop,descriptor)
obj：必需。目标对象
prop:必需。需定义或修改的属性的名字
descriptor:必需。目标属性所拥有的特性
返回值：传入函数的对象，即第一个参数obj

给对象的属性添加特性描述，目前提供两种形式：数据描述和存取器描述。
var obj={
  test:"hello"
}
数据描述
//对象已有的属性添加特性描述
Object.defineProperty(obj,"test",{
  configurable:true|false,
  enmuerable:true|false,
  value:任意类型的值,
  writable:true|false
});
//对象新添加的属性的特性描述
Object.defineProperty(obj,"newKey",{
  configurable:true|false,
  enmuerable:true|false,
  value:任意类型的值,
  writable:true|false
})

存取器描述

var obj = {};
Object.defineProperty(obj,"newKey",{
    get:function (){} | undefined,
    set:function (value){} | undefined
    configurable: true | false
    enumerable: true | false
});
注意：使用了getter或setter方法，不允许使用writable和value这两个属性
getter/setter
当设置或获取对象某个属性的值的时候可以提供getter/setter
getter是一种获得属性值的方法
setter是一种设置属性值的方法

var obj={};
var initValue='hello';
Object.defineProperty(obj,"newKey",{
  get:function(){
    return initValue;//当获取值的时候触发的函数
  },
  set:function(value){
    //当设置的时候触发的函数，设置的新值通过参数value拿到
    initValue=value;
  }
})
//设置值
obj.newKey = 'change value';

console.log( obj.newKey ); //change value
注意：get或set不是必须成对出现，任写其一就可以。如果不设置方法，则get和set的默认值为undefined

 

Watcher（订阅者）

Watcher订阅者作为Observer和Compile之间通信的桥梁，主要做的事情是：

1. 在自身实例化时往属性订阅器(dep)里面添加自己
2. 自身必须有一个update()方法
3. 待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调

Compile

Compile主要做的事情是解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

参考https://segmentfault.com/a/1190000013294870?utm_source=channel-newest