Vue原理简言

最新推荐文章于 2024-09-19 11:07:45 发布

仰望星空01

最新推荐文章于 2024-09-19 11:07:45 发布

阅读量398

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_38735568/article/details/114153980

vue 专栏收录该内容

2 篇文章

订阅专栏

本文主要介绍了Vue原理，对比了Vue与React、Angular等框架，指出Vue采用Object.defineProperty特性。阐述了Vue通过建立虚拟DOM树、数据拦截、订阅 - 发布者模式实现双向绑定，其模式为MVVM，还介绍了Vue双向绑定简易实现中Object.defineProperty方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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的原理

通过建立虚拟DOM树document.createDocumentFragment(),方法创建虚拟dom树。
一旦被检测的数据改变，会通过Object.defineProperty定义的数据拦截，截取到数据的变化。
截取到的数据变化，从而通过订阅-发布者模式，触发Watcher，从而改变虚拟DOM中的具体数据
最后，通过更新虚拟DOM的元素值，从而改变最后渲染DOM树的值，完成双向绑定
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'