分类: vue

双向数据绑定

有幸在公司里做了几次面试官,当我每次问及 Vue 双向绑定的实现机制时,被问者通常只会点到 Object.defineProperty,很少能提到观察者模式。因此,写作本文的目的一方面在于深入了解 Vue 的实现原理,另一方面在于增强有关 ViewModel 双向绑定、前端数据流等的提问能力。众所周知的,当我们阅读技术文章或源码时,如果不能持续有效地发问,那我们会陷入复刻他人思维的僵局里。言归正传

snabbdom 实现原理

Vue 的 patch 机制基于 snabbdom 类库实现。snabbdom 类库本身就是一个专注于简洁、模块化且高效的虚拟 dom 库。因此,解读 snabbdom 类库可以辅助理解虚拟 dom 以及 Vue 的实现机制。下面我们慢慢揭开它的面纱。 整体结构有了对 Vue 虚拟 dom 的理解,我们很容易理解 snabbdom 类库的整体结构: 工具函数层:is, htmldomapi 提

Vue 虚拟 dom

虚拟 dom 桥接着 view-model 模型和实际的 dom 节点树。首先 view-model 通常不只包含一个节点,而是一颗节点树,和实际的 dom 节点有一对多的关联。因此借助于虚拟 dom 节点,我们就可以与实际的 dom 节点产生一对一的关联。同时,view-model 保存着全量的数据,通过它不能直接对实际的 dom 节点树进行增量更新。有了同样是树结构的虚拟 dom 作为 vie

Vue 生命周期 - 组件挂载及更新

挂载组件在 生命周期-创建实例 一文中,我们了解到,vm.$mount 方法可用于挂载组件。vm.$mount 有两种使用场景:当开发者显式调用 new Vue(options) 语句构建 vm 实例时,vm.$mount 方法将在实例化过程的尾部得到调用;当从父模板解析并渲染出子组件时,vm.$mount 方法将在 createComponent 函数阶段由 Vue 框架内部调用。 vm.$mo

Vue 生命周期 - 创建实例

对应上图前半部分,当执行 new Vue(options) 语句创建 vm 实例(即 Vue 实例)时,在 Vue 框架内到底发生了什么呢?为此,我们简要地把执行过程小结为如下步骤: 解析 options 配置项。 通过 initProxy 函数构建 vm 代理,其将作为模板渲染函数的参数,而不是 vm 实例。 通过 initLifecycle 函数初始化设置生命周期相关实例属性。 通过 in

Vue 源码分析 - 数据侦测

序言数据侦测,也称为数据绑定,即是监测数据的更新状况,当数据更新时,触发后续动作的执行。以伪语法的形式,可以用 表达式 1 概括说明。 表达式 11234when(data changed){ do compute do reaction} 基于 表达式 1 ,有如下概念(基于 mobx 文档 整理): 概念 112345Observable: 监测数据,可以是状态,更新其

vue整体架构

目录结构1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011