计算属性是基于响应式依赖进行缓存的,只有在相关响应式依赖发生改变时才会重新求值,这种缓存机制在求值消耗比较大的情况下能够显著提高性能。

一、计算属性初始化

  Vue 在做数据初始化时,通过 initComputed() 方法初始化计算属性。

const computedWatcherOptions = { lazy: true }

function initComputed (vm: Component, computed: Object) {
const watchers = vm._computedWatchers = Object.create(null)
const isSSR = isServerRendering() for (const key in computed) {
const userDef = computed[key]
const getter = typeof userDef === 'function' ? userDef : userDef.get
if (process.env.NODE_ENV !== 'production' && getter == null) {
warn(`Getter is missing for computed property "${key}".`, vm)
} if (!isSSR) {
watchers[key] = new Watcher(vm, getter || noop,
noop, computedWatcherOptions)
} if (!(key in vm)) {
defineComputed(vm, key, userDef)
} else if (process.env.NODE_ENV !== 'production') {
if (key in vm.$data) {
warn(`The computed property "${key}" is already defined in data.`, vm)
} else if (vm.$options.props && key in vm.$options.props) {
warn(`The computed property "${key}" is already defined as a prop.`, vm)
}
}
}
}

  首先将变量 watchers 与变量 _computedWatchers 同时指向一个空对象,该对象用来存储所有计算属性的观察者。接着定义变量 isSSR 用来标识是否为服务器端渲染。

  然后对选项 computed 中的属性遍历,将属性赋值给 userDef 变量。计算属性有两种写法:函数、对象。如果是对象的话则必须要有 get(), set() 方法可以不实现。使用 getter 变量指向能够获取值的函数。

  在服务器端渲染时,使用计算属性的方式和使用方法基本一样。在非服务器端渲染时,生成该计算属性的观察者添加到变量 watchers 与变量 _computedWatchers 对应的属性上。

  最后检查 Vue 实例对象上有没有与计算属性同名的属性,因为不管选项 props 、data ,还是选项 computed 中的数据经过处理最终都会添加到 Vue 实例对象上。如果没有重复,则调用 defineComputed() 方法将计算属性处理之后添加到 Vue 实例对象上。

二、定义计算属性

  defineComputed() 函数的功能是将计算属性转化为 Vue 实例对象的访问器属性。

export function defineComputed (target: any, key: string,
userDef: Object | Function
) {
const shouldCache = !isServerRendering()
if (typeof userDef === 'function') {
sharedPropertyDefinition.get = shouldCache
? createComputedGetter(key)
: createGetterInvoker(userDef)
sharedPropertyDefinition.set = noop
} else {
sharedPropertyDefinition.get = userDef.get
? shouldCache && userDef.cache !== false
? createComputedGetter(key)
: createGetterInvoker(userDef.get)
: noop
sharedPropertyDefinition.set = userDef.set || noop
}
if (process.env.NODE_ENV !== 'production' &&
sharedPropertyDefinition.set === noop) {
sharedPropertyDefinition.set = function () {
warn(
`Computed property "${key}" was assigned to but it has no setter.`,
this
)
}
}
Object.defineProperty(target, key, sharedPropertyDefinition)
}

  在非服务器端渲染时,若选项中计算属性是函数形式,则将 set() 方法设为空;若是对象形式,对象中提供 set() 方法,则采用该方法作为访问器属性的 set() 方法,如果没有提供,则 set() 方法为空。最后在 set() 方法为空的情况下,重写该方法,使其在非生产环境下访问器属性被设置时提示警告信息。

  计算属性的 get() 方法 为 createComputedGetter() 的返回值,该返回值为 computedGetter() 函数。

function createComputedGetter (key) {
return function computedGetter () {
const watcher = this._computedWatchers && this._computedWatchers[key]
if (watcher) {
if (watcher.dirty) {
watcher.evaluate()
}
if (Dep.target) {
watcher.depend()
}
return watcher.value
}
}
}

  比如传入 computed 选项如下:

data () {
retrun {
a: 1
}
} computed: {
b () {
retrun a * 2
}
}

  经过计算属性初始化处理之后,变成 Vue 实例对象 vm 上的属性:

vm.b = Object.defineProperty(vm, 'b', {
enumerable: true,
configurable: true,
get () {
const watcher = this._computedWatchers && this._computedWatchers[key]
if (watcher) {
if (watcher.dirty) {
watcher.evaluate()
}
if (Dep.target) {
watcher.depend()
}
return watcher.value
}
},
set () {
warn(
`Computed property "${key}" was assigned to but it has no setter.`,
this
)
}
})

三、计算属性观察者

  上面例子中的计算属性 b 在初始化时创建的观察者对象 watcherB 如下:

watcherB = {
vm: vm,
lazy: true,
deep: false,
user: false,
sync: false,
cb: function () {},
uid: 1,
active: true,
dirty: true,
deps: [],
newDeps: [],
depIds: new Set(),
newDepIds: new Set(),
expression: 'function() {\n return a * 2 \n}',
getter: function() { return a * 2 },
value: undefined
}

  在开发中最常见的是在模板中使用计算属性,该种情况下会先将模板转换成渲染函数,然后生成渲染函数观察者,在此过程中,会读取计算属性。

(1)、读取计算属性时的函数执行情况

  在计算属性 b 被读取时,会调用访问器属性的 get() 方法。

get () {
const watcher = this._computedWatchers && this._computedWatchers[key]
if (watcher) {
if (watcher.dirty) {
watcher.evaluate()
}
if (Dep.target) {
watcher.depend()
}
return watcher.value
}
}

  此时,访问器属性的 get() 方法中的 watcher 为 watcherB ,Dep.target 为渲染函数观察者,记为 renderWatcher。函数执行的顺序如下:

1、watcherB.dirty 为 true ,所以先执行 watcherB.evaluate() 。在该方法中首先调用 watcherB.get() 。

2、watcherB.get() 先将 Dep.target 引用变量指向 watcherB ,然后 调用 watcherB.getter() 。

3、watcherB.getter() 会触发响应式数据 a 的 get() ,在该方法中调用 a 闭包引用的的变量 dep 的 depend() 方法。

4、在 dep.depend() 会调用 watcherB.addDep(dep)。

5、watcherB.addDep(dep)主要做三件事:将 dep.id 添加到 watcherB.newDepIds 集合中、将 dep 添加到 watcherB.newDeps 数组中、调用dep.addSub()方法。

6、dep.addSub() 方法会将 watcherB 添加到响应式数据 a 闭包引用的变量 dep 的 subs 数组中。

7、然后接着执行 watcherB.get(),首先将 Dep.target 的值设置为 renderWatcher ,再执行 watcherB.cleanupDeps()。

8、watcherB.cleanupDeps() 会将 watcherB.newDepIds、watcherB.newDeps 中的数据分别复制到 watcherB.depIds、watcherB.deps中,然后再清空 watcherB.newDepIds、watcherB.newDeps。

9、然后接着执行 watcherB.evaluate(),将 watcherB.dirty 设置为 false。

10、然后接着执行计算属性 b 的 get() 方法,调用 watcherB.depend()。

11、watcherB.depend() 方法循环 watcherB.deps 数组,调用数据 a 闭包引用的 dep 的 depend() 方法。此时的 Dep.target 的值为 renderWatcher,dep.depend() 将渲染函数观察者添加到数据 a 闭包引用的 dep 中。

(2)、计算属性读取总结

  抛开较为繁琐的执行过程不说,当第一次读取计算属性时,主要做了以下几方面的事情:

1、将计算属性观察者收集进相关响应式数据的依赖容器中。

2、将使用计算属性的渲染函数观察者收集进相关响应式数据的依赖容器中。

3、将计算属性观察者的 dirty 属性设置为 false。若 dirty 为 true ,读取计算属性时会执行第1条操作。

(3)、依赖改变时计算属性重新求值

  当计算属性依赖的响应式数据发生改变时,会触发依赖容器中的依赖,此时计算属性以及使用计算属性的渲染函数都会重新求值。

四、总结

  Vue在数据初始化时会将计算属性改造成实例对象上的访问器属性,同时生成对应的计算属性观察者。

  在初次读取计算属性时,会将计算属性观察者、读取计算属性的渲染函数观察者作为依赖收集到相关响应式数据的依赖容器中。再次读取计算属性时,仅仅将读取计算属性的渲染函数观察者收集到依赖容器中,因为计算属性与响应式数据的依赖关系没有发生变化,此时计算属性观察者已作为依赖被收集,不必重复添加。

  当相关响应式数据改变时,对应的计算属性以及渲染函数都会发生改变。

  计算属性就像响应式数据与渲染函数观察者之间的“桥梁”。如果渲染函数直接使用响应式数据,则只需要收集渲染函数观察者,计算属性存在的意义在于对响应式数据进行操作,而且不用每次都经过计算求值。

如需转载,烦请注明出处:https://www.cnblogs.com/lidengfeng/p/10768474.html

Vue2.0源码阅读笔记(三):计算属性的更多相关文章

  1. Vue2.0源码阅读笔记(四):nextTick

      在阅读 nextTick 的源码之前,要先弄明白 JS 执行环境运行机制,介绍 JS 执行环境的事件循环机制的文章很多,大部分都阐述的比较笼统,甚至有些文章说的是错误的,以下为个人理解,如有错误, ...

  2. Vue2.0源码阅读笔记--生命周期

    一.Vue2.0的生命周期 Vue2.0的整个生命周期有八个:分别是 1.beforeCreate,2.created,3.beforeMount,4.mounted,5.beforeUpdate,6 ...

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

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

  4. Vue2.0源码阅读笔记(二):响应式原理

      Vue是数据驱动的框架,在修改数据时,视图会进行更新.数据响应式系统使得状态管理变的简单直接,在开发过程中减少与DOM元素的接触.而深入学习其中的原理十分有必要,能够回避一些常见的问题,使开发变的 ...

  5. Vue2.0源码阅读笔记(一):选项合并

      Vue本质是上来说是一个函数,在其通过new关键字构造调用时,会完成一系列初始化过程.通过Vue框架进行开发,基本上是通过向Vue函数中传入不同的参数选项来完成的.参数选项往往需要加以合并,主要有 ...

  6. Werkzeug源码阅读笔记(三)

    这次主要讲下werkzeug中的Local. 源码在werkzeug/local.py Thread Local 在Python中,状态是保存在对象中.Thread Local是一种特殊的对象,它是对 ...

  7. Linux 0.11源码阅读笔记-中断过程

    Linux 0.11源码阅读笔记-中断过程 是什么中断 中断发生时,计算机会停止当前运行的程序,转而执行中断处理程序,然后再返回原被中断的程序继续运行.中断包括硬件中断和软件中断,硬中断是由外设自动产 ...

  8. Linux 0.11源码阅读笔记-总览

    Linux 0.11源码阅读笔记-总览 阅读源码的目的 加深对Linux操作系统的了解,了解Linux操作系统基本架构,熟悉进程管理.内存管理等主要模块知识. 通过阅读教复杂的代码,锻炼自己复杂项目代 ...

  9. Linux 0.11源码阅读笔记-文件管理

    Linux 0.11源码阅读笔记-文件管理 文件系统 生磁盘 未安装文件系统的磁盘称之为生磁盘,生磁盘也可以作为文件读写,linux中一切皆文件. 磁盘分区 生磁盘可以被分区,分区中可以安装文件系统, ...

随机推荐

  1. flash builder 4.6与myecilpse 10.7集成

    一.在flash builder 4.0以后就没有单独提供插件版的flash builder了,因此必须先安装完整版的flash builder,再进行插件集成. 二.集成过程比较简单但也有几个要注意 ...

  2. Flask快速入门

    flask快速入门 1.1.三种框架比较 Django: 重武器,内部包含了非常多组件:ORM.Form.ModelForm.缓存.Session.中间件.信号等 Flask:短小精悍,内部没有太多组 ...

  3. django管理数据库之中文字符编码问题

    django中通过models创建数据库字符编码文字mysql数据库中默认的字符编码都为latin1,插入中文时会出现以下的错误类型 1366 - Incorrect string value: '\ ...

  4. 压力测试工具ab - Apache HTTP server benchmarking tool

    搞互联网开发,压力测试必不可少.压力测试的工具很多,我用过ab和JMeter,今天主要讲ab的用法. 1.ab是什么 ab is a tool for benchmarking your Apache ...

  5. Vue-cli的配置知识

    Vue-cli有两个文件--build和config:build文件包含了脚手架在开发环境和生产环境下webpack该如何配置.config文件则包含了build文件下webpack具体配置的值.换句 ...

  6. Setting up Latex-vim (or Latex-suite) plugin within macVim under Mac OSX Yosemite 2015-1-20 by congliu

    1. Overview: Vim是命令行下的文本编辑程序,gVim是Vim的Linux下的图形化版本,macVim是Mac下的图形化版本 Latex-vim是vim写Latex文件时的插件 Skim是 ...

  7. mysqldump+系统计划任务定时备份MySql数据

    MYSQL 数据库备份有很多种(cp.tar.lvm2.mysqldump.xtarbackup)等等,具体使用哪一个还要看你的数据规模.下面给出一个表 #摘自<学会用各种姿态备份Mysql数据 ...

  8. ajax如何实现、readyState五中状态的含义

    转载:http://www.cnblogs.com/teroy/p/3917439.html 熟悉web开发的程序员想必对Ajax也不会陌生.现在已经有很多js框架封装了ajax实现,例如JQuery ...

  9. SSM-MyBatis-05:Mybatis中别名,sql片段和模糊查询加getMapper

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 简单概述一下本讲 别名,sql片段简单写一下,模糊查询多写一点 一.别名 <typeAliases> ...

  10. 000webhost虚拟主机绑定自定义二级域名

    作者:荒原之梦 原文链接:http://zhaokaifeng.com/?p=558 前言: 最近想给导航狗IT信息导航做一个文件服务器专门存放文件,以提供引用或下载.于是,我在000webhost上 ...