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'
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页