Vue原理 简言

Vue原理

Vue
template 编译 render Function Vnode 虚拟DOM
React
JSX render function Vnode 虚拟DOM

Vue 对比其他框架的原理

vue相当于React，Angular更综合一点。Angular js则使用了‘脏值检测’。
React则采用避免直接操作DOM的虚拟DOM树，而vue则采用的是Object.defineProperty特性

Vue可以说是尤雨溪从Angular中提炼出来的，又参考了React的性能思路，而集打成的一种轻量级、高效、灵活的框架

Vue的原理

1. 通过建立虚拟DOM树document.createDocumentFragment(),方法创建虚拟dom树。
2. 一旦被检测的数据改变，会通过Object.defineProperty定义的数据拦截，截取到数据的变化。
3. 截取到的数据变化，从而通过订阅-发布者模式，触发Watcher，从而改变虚拟DOM中的具体数据
4. 最后，通过更新虚拟DOM的元素值，从而改变最后渲染DOM树的值，完成双向绑定
5. Vue的模式是MVVM，通过ModelView 作为中间层，进行数据的绑定与变化

Object.defineProperty和订阅-发布者模式这两点

Vue双向绑定的实现

简易绑定

首先，我们把注意力集中在这个属性上：Object.defineProperty

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

什么叫做，定义或修改一个对象的新属性，并返回这个对象呢？

var obj = {};
Object.defineProperty(obj, 'hello', {
    get: function() {
        console.log('Get 方法被调用')
    },
    set: function(newValue) {
        console.log('Set 方法被调用')
    }
})
obj.hello
obj.hello = 'new Hello'