上一章 Vue2异步更新和nextTick原理,我们介绍了 JavaScript 执行机制是什么?nextTick源码是如何实现的?以及Vue是如何异步更新渲染的?

本章目标

  • 计算属性是如何实现的?
  • 计算属性缓存原理 - 带有dirty属性的watcher
  • 洋葱模型的应用

初始化

在 Vue初始化实例的过程中,如果用户 options选项中存在计算属性时,则初始化计算属性

// 初始化状态
export function initState(vm) {
const opts = vm.$options // 获取所有的选项 // 初始化数据
if (opts.data) { initData(vm) } // 初始化计算属性
if (opts.computed) { initComputed(vm) }
}

我们给每个计算属性都创建了一个 Watcher实例,标识为lazy:true, 在初始化watcher时不会立即执行 get方法(计算属性方法)

并将计算属性watcher 都保存到了 Vue实例上,让我们可以在后续的 getter方法中通过 vm获取到当前的计算属性watcher

然后使用Object.defineProperty去劫持计算属性

// 初始化计算属性
function initComputed(vm) {
const computed = vm.$options.computed
const watchers = (vm._computedWatchers = {}) // 将每个计算属性对应的watcher 都保存到 vm上
for (let key in computed) {
let userDef = computed[key] // 兼容不同写法 函数方式 和 对象getter/setter方式
let fn = typeof userDef === 'function' ? userDef : userDef.get // 给每个计算属性都创建一个 watcher,并标识为 lazy,不会立即执行 get-fn
watchers[key] = new Watcher(vm, fn, { lazy: true }) // 劫持计算属性getter/setter
defineComputed(vm, key, userDef)
}
} // 劫持计算属性
function defineComputed(target, key, userDef) {
const setter = userDef.set || (() => {}) Object.defineProperty(target, key, {
get: createComputedGetter(key),
set: setter,
})
}

当我们劫持到计算属性被访问时,根据 dirty 值去决定是否更新 watcher缓存值

然后让自己依赖的属性(准确来说是订阅的所有dep)都去收集上层watcher,即 Dep.target(可能是计算属性watcher,也可能是渲染watcher)

// 劫持计算属性的访问
function createComputedGetter(key) {
return function () {
const watcher = this._computedWatchers[key] // this就是 defineProperty 劫持的targer。获取到计算属性对应的watcher // 如果是脏的,就去执行用户传入的函数
if (watcher.dirty) {
watcher.evaluate() // 重新求值后 dirty变为false,下次就不求值了,走缓存值
} // 当前计算属性watcher 出栈后,还有渲染watcher 或者其他计算属性watcher,我们应该让当前计算属性watcher 订阅的 dep,也去收集上一层的watcher 即Dep.target(可能是计算属性watcher,也可能是渲染watcher)
if (Dep.target) {
watcher.depend()
} // 返回watcher上的值
return watcher.value
}

Dep

  • Dep.target:当前渲染的 watcher,静态变量
  • stack:存放 watcher 的栈。 利用 pushTarget、popTarget 这两个方法做入栈出栈操作
// 当前渲染的 watcher
Dep.target = null // 存放 watcher 的栈
let stack = []
// 当前 watcher 入栈, Dep.target 指向 当前 watcher
export function pushTarget(watcher) {
stack.push(watcher)
Dep.target = watcher
}
// 栈中最后一个 watcher 出栈,Dep.target指向栈中 最后一个 watcher,若栈为空,则为 undefined
export function popTarget() {
stack.pop()
Dep.target = stack[stack.length - 1]
}

计算属性Watcher

在初始化Vue实例时,我们会给每个计算属性都创建一个对应watcher(我们称之为计算属性watcher,除此之外还有 渲染watcher侦听器watcher ),他有一个 value 属性用于缓存计算属性方法的返回值。

默认标识 lazy: true,懒的,代表计算属性watcher,创建时不会立即执行 get方法

默认标识 dirty: true,脏的,当我们劫持到计算属性访问时,如果是脏的,我们会通过watcher.evaluate重新计算 watcher 的 value值 并将其标识为干净的;如果是干净的,则直接取 watcher 缓存值

depend 方法,会让计算属性watcher 订阅的dep去收集上层watcher,可能是渲染watcher,也可能是计算属性watcher(计算属性嵌套的情况),实现洋葱模型的核心方法

update 方法,当计算属性依赖的对象发生变化时,会触发dep.notify派发更新 并 调用 update 方法,只需更新 dirty 为 true即可。我们会在后续的渲染watcher 更新时,劫持到计算属性的访问操作,并通过 watcher.evaluate重新计算其 value值

class Watcher {
constructor(vm, fn, options) {
// 计算属性watcher 用到的属性
this.vm = vm
this.lazy = options.lazy // 懒的,不会立即执行get方法
this.dirty = this.lazy // 脏的,决定重新读取get返回值 还是 读取缓存值 this.value = this.lazy ? undefined : this.get() // 存储 get返回值
} // 重新渲染
update() {
console.log('watcher-update')
if (this.lazy) {
// 计算属性依赖的值发生改变,触发 setter 通知 watcher 更新,将计算属性watcher 标识为脏值即可
// 后面还会触发渲染watcher,会走 evaluate 重新读取返回值
this.dirty = true
} else {
queueWatcher(this) // 把当前的watcher 暂存起来,异步队列渲染
// this.get(); // 重新渲染
}
} // 计算属性watcher为脏时,执行 evaluate,并将其标识为干净的
evaluate() {
this.value = this.get() // 重新获取到用户函数的返回值
this.dirty = false
} // 用于洋葱模型中计算属性watcher 订阅的dep去 depend收集上层watcher 即Dep.target(可能是计算属性watcher,也可能是渲染watcher)
depend() {
let i = this.deps.length
while (i--) {
this.deps[i].depend()
}
}
}

缓存原理

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。 缓存原理如下:

在初始化计算属性时,我们使用Object.defineProperty劫持了计算属性,并做了一些 getter/setter操作

计算属性watcher 有一个 dirty脏值属性,默认为 true

当我们劫持到计算属性被访问时,如果 dirty 为 true,则执行 evaluate 更新 watcher 的 value值 并 将 dirty 标识为 false;如果为 false,则直接取 watcher 的缓存值

当计算属性依赖的属性变化时,会通知 watcher 调用 update方法,此时我们将 dirty 标识为 true。这样再次取值时会重新进行计算

洋葱模型

在初始化Vue实例时,我们会给每个计算属性都创建一个对应的懒的watcher,不会立即调用计算属性方法

当我们访问计算属性时,会通过watcher.evaluate()让其直接依赖的属性去收集当前的计算属性watcher,并且还会通过watcher.depend()让其订阅的所有 dep都去收集上层watcher,可能是渲染watcher,也可能是计算属性watcher(如果存在计算属性嵌套计算属性的话)。这样依赖的属性发生变化也可以让视图进行更新

让我们一起来分析下计算属性嵌套的例子

<p>{{fullName}}</p>

computed: {
fullAge() {
return '今年' + this.age
},
fullName() {
console.log('run')
return this.firstName + ' ' + this.lastName + ' ' + this.fullAge
},
}
  1. 初始化组件时,渲染watcher 入栈

    • stack:[渲染watcher]
  2. 当执行 render方法并初次访问 fullName时,执行computed watcher1.evaluate()watcher1入栈
    • stack:[渲染watcher, watcher1]
  3. 当执行watcher1的 get方法时,其直接依赖的 firstName 和 lastName 会去收集当前的 watcher1;然后又访问 fullAge 并执行computed watcher2.evaluate()watcher2入栈
    • watcher1:[firstName, lastName]
    • stack:[渲染watcher, watcher1, watcher2]
  4. 执行watcher2的 get方法时,其直接依赖的 age 会去收集当前的 watcher2
    • watcher2:[age]
  5. watcher2出栈,并执行watcher2.depend(),让watcher2订阅的 dep再去收集当前watcher1
    • stack:[渲染watcher, watcher1]
    • watcher1:[firstName, lastName, age]
  6. watcher1出栈,执行watcher1.depend(),让watcher1订阅的 dep再去收集当前的渲染watcher
    • stack:[渲染watcher]
    • 渲染watcher:[firstName, lastName, age]

【Vue2.x源码系列06】计算属性computed原理的更多相关文章

  1. vue2.0中的watch和计算属性computed

    watch和computed均可以监控程序员想要监控的对象,当这些对象发生改变之后,可以触发回调函数做一些逻辑处理 watch监控自身属性变化 <!DOCTYPE html> <ht ...

  2. Vue2.0源码阅读笔记--双向绑定实现原理

    上一篇 文章 了解了Vue.js的生命周期.这篇分析Observe Data过程,了解Vue.js的双向数据绑定实现原理. 一.实现双向绑定的做法 前端MVVM最令人激动的就是双向绑定机制了,实现双向 ...

  3. Mybaits 源码解析 (五)----- 面试源码系列:Mapper接口底层原理(为什么Mapper不用写实现类就能访问到数据库?)

    刚开始使用Mybaits的同学有没有这样的疑惑,为什么我们没有编写Mapper的实现类,却能调用Mapper的方法呢?本篇文章我带大家一起来解决这个疑问 上一篇文章我们获取到了DefaultSqlSe ...

  4. 大白话Vue源码系列(05):运行时鸟瞰图

    阅读目录 Vue 实例的生命周期 实例创建 响应的数据绑定 挂载到 DOM 节点 结论 研究 runtime 一边 Vue 一边源码 初看 Vue 是 Vue 源码是源码 再看 Vue 不是 Vue ...

  5. Spring源码系列(二)--bean组件的源码分析

    简介 spring-bean 组件是 Spring IoC 的核心,我们可以使用它的 beanFactory 来获取所需的对象,对象的实例化.属性装配和初始化等都可以交给 spring 来管理. 本文 ...

  6. 深入学习JDK源码系列之、ArrayList

    前言 JDK源码解析系列文章,都是基于JDK8分析的,虽然JDK15马上要出来了,但是JDK8我还不会,我... 类图 实现了RandomAccess接口,可以随机访问 实现了Cloneable接口, ...

  7. 事件机制-Spring 源码系列(4)

    事件机制-Spring 源码系列(4) 目录: Ioc容器beanDefinition-Spring 源码(1) Ioc容器依赖注入-Spring 源码(2) Ioc容器BeanPostProcess ...

  8. Ioc容器BeanPostProcessor-Spring 源码系列(3)

    Ioc容器BeanPostProcessor-Spring 源码系列(3) 目录: Ioc容器beanDefinition-Spring 源码(1) Ioc容器依赖注入-Spring 源码(2) Io ...

  9. 大白话Vue源码系列(03):生成AST

    阅读目录 AST 节点定义 标签的正则匹配 解析用到的工具方法 解析开始标签 解析结束标签 解析文本 解析整块 HTML 模板 未提及的细节 本篇探讨 Vue 根据 html 模板片段构建出 AST ...

  10. 大白话Vue源码系列(03):生成render函数

    阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...

随机推荐

  1. new一个实例的原理及过程

    前提,要明白new出来的实例是什么,包含了哪些内容? 请看一下举例代码↓↓↓↓ function Person(name,age){ this.name = name; this.age = age; ...

  2. SQL相关知识点

    一.基本概念 数据库术语 数据库(database) - 保存有组织的数据的容器(通常是一个文件或一组文件). 数据表(table) - 某种特定类型数据的结构化清单. 模式(schema) - 关于 ...

  3. 七、CSS网格

    构造一个5*5的网格,如下图所示,同一颜色表示同个区域,黑线表示间隔5px 1.普通方式建立网格 <!DOCTYPE html> <html> <body> < ...

  4. c语言数据结构 树的基本操作

    树的基本操作有创建,插入,删除,以及各种遍历的应用,如:利用后序遍历求高度,利用前序遍历求层数的结点 基本算法思路:创建二叉树函数参数必须接受二级指针!如果使用同级指针,无法返回创建后的结果,利用递归 ...

  5. 初识MPC

    MPC调研报告 ​ 这是一篇关于MPC的调研报告,主要介绍了我对MPC领域的一些基础认识.全文按照这样的方式组织:第一节我介绍了什么是MPC以及MPC的起源:第二节介绍了MPC领域常用的一些符号和安全 ...

  6. 5G智能网关助力打造5G移动医疗车

    医疗资源分布不均衡,是导致老百姓看病难的重要原因之一.随着新一代信息技术的快速发展和普及应用,基于5G远程通信技术.音视频数字化技术,解决医疗资源分布不均衡问题,打破空间限制,让群众在家门口就能享受到 ...

  7. 无法将类 org.example.sh.utils.PageInfo<T>中的构造器 PageInfo应用到给定类型;

    是因为没有在工具类中加入构造器, @Data @NoArgsConstructor @AllArgsConstructor @ToString

  8. CH573 CH582 CH579蓝牙从机(peripheral)例程讲解二(广播内容修改)

    在上一篇外设例程讲解中讲述了蓝牙从机的收发接口,这样可以快速的上手,那么接下来就讲解另一个重要设置,从机的广播. 在peripheral例程中,一直是以50ms的周期进行广播,使用手机软件扫描可以获取 ...

  9. python 超时装饰器

    #************************************************************** 设置超时的装饰器 *************************** ...

  10. 如何加快打开网页的速度------通过调节“QoS数据包计划程序”的“限制可保留宽带”实现&如何解决win10可能找不到gpedit.msc的问题

    参考:http://www.windowszj.com/news/win10/42119.html http://www.docin.com/p-1510367352.html(QoS数据包计划程序有 ...