学习 vue 源码 -- 响应式原理

时间:2022-09-26 09:22:39

概述

由于刚开始学习 vue 源码,而且水平有限,有理解或表述的不对的地方,还请不吝指教。

vue 主要通过 Watcher、Dep 和 Observer 三个类来实现响应式视图。另外还有一个 scheduler 来进行调度,本次暂时不做讨论。

Watcher 和 Dep 是订阅者和发布者的关系,每个 Watcher 可以订阅多个 Dep,而每个 Dep 也可以被多个 Watcher 订阅。当 Observer 监听的数据发生改变时,相应的 Dep 就会触发其订阅者 Watcher 更新视图。

下面通过一个简单的例子来说明其实现流程和原理:

  <div id="app">
{{someVar}}
</div> <script type="text/javascript">
new Vue({
el: '#app', data: {
someVar: 'init'
}, mounted(){
setTimeout(() => this.someVar = 'changed', 3000)
} })
</script>

页面初始会显示 "init" 字符串,3秒钟之后,会更新为 "changed" 字符串。

为了便于理解,将整个流程分为三个阶段:

  1. 初始化data,这个阶段 vue 通过 Observer 监听 data 对象,并将普通的 someVar 属性代理为 get\set 属性
  2. 初次挂载el,这个阶段 vue 使用默认的 someVar 数据渲染视图,并将 watcher 添加到 dep 的订阅者列表
  3. someVar 更改触发视图更新,这个阶段 someVar 被赋予了新值,vue 根据 watcher 和 dep 的订阅关系触发视图的更新

下面我们来逐步分析这三个阶段的流程。

第一阶段

主要流程

new Vue(options) => vm._init(options) => initState(vm) => initData(vm) => observe(data) => new Observer(data) => defineReactive(data, key, value)

说明

初始化操作会监听 data 对象,对其每一个属性调用 defineReactive() 方法,将其改造为响应式属性,代码如下(去掉了不影响表述主流程的代码,以便能更清晰的抓住重点):

/**
* Define a reactive property on an Object.
*/
export function defineReactive (
obj: Object,
key: string,
val: any
) {
const dep = new Dep() Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () { dep.depend()
    return val
  },
set: function reactiveSetter (newVal) {
if (newVal === val || (newVal !== newVal && val !== val)) {
return
} val = newVal
dep.notify()
}
})
}

可以看到,当 get() 方法执行的时候,会调用 dep.depend() ;当 set() 方法执行时,会调用 dep.notify()。后面我们会看到这两个方法的作用。

第二阶段

主要流程

vm.$mount(el) => mountComponent(vm, el) => new Watcher(vm, updateComponent) => watcher.get() => updateComponent() => vm._update(vm._render())

说明

vm._render() 调用 vm.$options.render() 方法生成 vnode,vm._update() 方法根据 vnode 对视图做更新。

vm.$options.render() 方法是在 $mount() 方法中生成的,生成后的代码如下:

(function() {
with (this) {
return _c('div', {
attrs: {
"id": "app"
}
}, [_v("\n         " + _s(someVar) + "\n ")])
}
})

可以看到,代码中会使用到 vm.someVar 属性,而该属性最终会代理到之前定义的响应式属性上,从而调用其 get() 方法,进而调用 dep.depend() 方法将 watcher 添加到订阅者列表。

dep.depend() => Dep.target.addDep(dep) => dep.addSub(watcher) => dep.subs.push(watcher)

dep.subs 就是 dep 的订阅者列表,通过这个流程,就建立起了 dep 和 watcher 之间的订阅关系。

其中,Dep.target 就是当前的 watcher,因为在 watcher.get() 方法执行时,有如下流程:

watcher.get() => pushTarget(watcher) => Dep.target = watcher

第三阶段

3秒之后,vm.someVar 被赋予了新的值,从而最终会调用到响应式属性的 set() 方法,进而调用 dep.notify(),触发 watcher 更新视图。

主要流程

dep.notify() => watcher.update() => watcher.run() => watcher.get() => watcher.getter.call(vm, vm) == updateComponent() => vm._update(vm._render())

说明

watcher 的 getter() 方法就是第二阶段 new Watcher(vm, updateComponent) 中的 updateComponent 方法,可以看到,通过这个流程,视图得到了更新。

以上就构成了一个响应式视图模型,其核心是利用 defineProperty() 方法将普通属性转换为带有钩子的 set\get 属性,从而实现了数据监听。

学习 vue 源码 -- 响应式原理的更多相关文章

  1. 手牵手,从零学习Vue源码 系列一(前言-目录篇&rpar;

    系列文章: 手牵手,从零学习Vue源码 系列一(前言-目录篇) 手牵手,从零学习Vue源码 系列二(变化侦测篇) 手牵手,从零学习Vue源码 系列三(虚拟DOM篇) 陆续更新中... 预计八月中旬更新 ...

  2. 手牵手,从零学习Vue源码 系列二(变化侦测篇)

    系列文章: 手牵手,从零学习Vue源码 系列一(前言-目录篇) 手牵手,从零学习Vue源码 系列二(变化侦测篇) 陆续更新中... 预计八月中旬更新完毕. 1 概述 Vue最大的特点之一就是数据驱动视 ...

  3. 一起学习vue源码 - Object的变化侦测

    作者:小土豆biubiubiu 博客园:www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e894d 简书:h ...

  4. Vue数据绑定和响应式原理

    Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...

  5. Vue 2&period;0 与 Vue 3&period;0 响应式原理比较

    Vue 2.0 的响应式是基于Object.defineProperty实现的 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 prop ...

  6. 一起学习vue源码 - Vue2&period;x的生命周期&lpar;初始化阶段&rpar;

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  7. vue 数据劫持 响应式原理 Observer Dep Watcher

    1.vue响应式原理流程图概览 2.具体流程 (1)vue示例初始化(源码位于instance/index.js) import { initMixin } from './init' import ...

  8. 手写实现vue的MVVM响应式原理

    文中应用到的数据名词: MVVM   ------------------        视图-----模型----视图模型                三者与 Vue 的对应:view 对应 te ...

  9. 学习Vue源码前的几项必要储备(二)

    7项重要储备 Flow 基本语法 发布/订阅模式 ES6+ 语法 原型链.闭包 函数柯里化 event loop 接上讲 聊到了ES6的几个重要语法,加下来到第四点继续开始. 4.原型链.闭包 原型链 ...

随机推荐

  1. Java字节流与字符流基本操作

    在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据时要使用输入流读取数据,而当程序需要将一些数据保存起来时,就要使用输出流. 在java.io包中流的操作主要有字节流.字符流两大类,两类都 ...

  2. jquery ajax传递多个对象或数组到后台

    1.js对象创建:因为需要把对象json序列化后,才能传递到后台,后台根据json字符串进行反序列化. 2.Jquery   $.ajax方法的配置 针对$.ajax方法的配置参数需要进行修改: 1) ...

  3. ssh连接linux服务器只显示-bash-4&period;1&num;不显示路径解决方法

    ssh连接linux服务器只显示-bash-4.1#不显示路径时,我们只需要修改  ~/.bash_profile文件,如果不存在这个文件,那么新建一个,增加内容  export PS1='[\u@\ ...

  4. java 12-3 StringBuffer的添加和删除功能

    1. StringBuffer的添加功能: public StringBuffer append(String str):可以把任意类型数据添加到字符串缓冲区里面,并返回字符串缓冲区本身 public ...

  5. The Secrets of Oracle Row Chaining and Migration

    from http://www.akadia.com/services/ora_chained_rows.html Overview If you notice poor performance in ...

  6. &lbrack;maven&rsqb; 搭建多模块企业级项目

    知识点:聚合.继承.工程依赖.单元测试.多war聚合.cargo发布 ① 准备工作 参考资料 http://www.cnblogs.com/quanyongan/archive/2013/05/28/ ...

  7. Eclipse常用插件推荐

    Eclipse Web Tools Platform(WTP) 地址:http://download.eclipse.org/webtools/ WTP十分强大,支持HTML, JavaScript, ...

  8. android&colon;onclick属性

    android:onclick属性设置点击时从上下文中调用指定的方法,此时给指定一个方法名.例如: xml中: <Button android:layout_width="wrap_c ...

  9. MVC生成CheckBoxList并对其验证

    原文:MVC生成CheckBoxList并对其验证 通过扩展方法,可以让CheckBox水平排列,生成CheckBoxList,正如"MVC扩展生成CheckBoxList并水平排列&quo ...

  10. 基类包括字段&OpenCurlyDoubleQuote;ScriptManager1”,但其类型&lpar;System&period;Web&period;UI&period;ScriptManager&rpar;与控件&lpar;System&period;Web&period;UI&period;ScriptManager&rpar;的类型不兼容

    首先说下原先的情况,就是原本老项目的Web解决方案是使用.net framework 2.0的老版本, 所以机器也安装过Microsoft ASP.NET 2.0 AJAX Extensions..A ...