Vue原理系列之五：虚拟节点 vnode 生成真实DOM
首先，我们从前面的文章可以得知 Virtual DOM 渲染成真实的 DOM 实际上要经历 VNode 的定义、diff、patch 等过程。 深入浅出虚拟 DOM 和 Diff 算法，及 Vue2 与 Vue3 中的区别 - 掘金 (juejin.cn) Diff 算法1. 只比较同一层级，不跨级比较vue中的diff算法有个特点，就是只能在同级比较，不能跨级比较。 即图中颜色相同部分进行...
Vue原理系列之四：渲染函数 render() 执行后生成虚拟节点 vnode
VNode概念虚拟节点（virtual node， 简写VNode），一个vnode就是一个js对象（通过VNode实例而来），用来描述一个真实DOM元素，它所包含的信息会告诉Vue页面上需要渲染什么样的节点，包括及其子节点的描述信息。 而虚拟DOM是对Vue组件树建立起来的整个VNode树的称呼。 先来看看VNode类的代码： 1234567891011121314151617181920...
Vue原理系列之三：AST编译为render（）
渲染函数是 AST 到虚拟 DOM 节点的中间媒介，本质上就是 JS 的函数，执行后会基于『运行时』返回虚拟节点的对象。 在 Vue.js 2 中，通过执行「渲染函数」获得了虚拟 DOM 节点，用于虚拟节点 Diff 并最终生成真实 DOM。 123updateComponent = () => { vm._update(vm._render(), hydrating)&#...
Vue原理系列之二：template模板编译为AST
AST（抽象语法树）的概念在模板语法中（如v-for循环中）如果我们直接将模板语法编译成正常的HTLM语法是非常困难的。 所以，我们需通过AST抽象语法树，将模板语法转换成正常的HTML语法，如下图所示 那么AST抽象语法树到底是什么呢？其实AST抽象语法树本质上是一个JS对象 上面图中，用JS结构来表示HTML结构实际上就是AST抽象语法树。抽象语法树是服务于模板编译的，从一种语法翻...
Vue原理系列之一：Vue的运行机制
开始前首先贴上个人看到的比较好的一些讲述了vue底层原理的文章，大佬们写的非常详细，由浅入深。本系列是站在各位大佬的肩膀上进行的一个总结。 纯干货！图解Vue响应式原理 - 掘金 (juejin.cn) https://juejin.cn/user/2647279730694029/posts https://juejin.cn/post/7076002091570823181#headin...
Vue2与Vue3 响应式原理
发布订阅、观察者设计模式观察者模式观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新 观察者模式属于行为型模式，行为型模式关注的是对象之间的通讯，观察者模式就是观察者和被观察者之间的通讯 实现代码如下： 被观察者模式 123456789101112131415161718class Subject { const...