更新重新看了下源码

// Watcehr 的执行函数
get () {
pushTarget(this) // 将当前的Watcher放入队列
let value
const vm = this.vm
try {
value = this.getter.call(vm, vm)
} catch (e) {
if (this.user) {
handleError(e, vm, `getter for watcher "${this.expression}"`)
} else {
throw e
}
} finally {
// "touch" every property so they are all tracked as
// dependencies for deep watching
if (this.deep) {
traverse(value)
}
popTarget() // 将当前的Watcher从队列里清除
this.cleanupDeps()
}
return value
}

computed 属性如何做到依赖收集总结

初始化computed属性为lazy watcher this.value = this.lazy ? undefined: this.get(),lazy watcher 不会立即执行,此时Dep.target = null

当组件挂载时,会创建一个RenderWatcher,并且立即执行,此时Dep.target = RenderWatcher,这时data定义的每个属性都会收集RenderWatcher

当组件挂载时,如果模板里用到了某一个计算机属性,计算属性会执行自己的getter函数,dirty=true执行evaluate(),与此同时计算机属性所依赖的data属性收集该计算机属性对应watcher

此时 Dep.target = RenderWatcher,计算机属性收集RenderWatcher

所以计算机属性只有当其依赖的data属性时,才会被依赖收集watcher

<template>
<div>
a:{{ a }}
c:{{c}}
<p>b:{{ b }}</p>
<p>d:{{ d }}</p>
<button @click="a++">a++</button>
<button @click="c++">c++</button>
</div>
</template>
<script>
export default {
data() {
return {
a: 1,
c:1
};
},
computed: {
b(vm) {
return vm.a;
},
d() {
return 1;
}
}
};
</script> // b依赖a,a更新b更新,d不依赖任何响应式数据,始终返回1

以上更新2020-04-12

computed 初始化函数

const computedWatcherOptions = { lazy: true }

function initComputed (vm: Component, computed: Object) {
// $flow-disable-line
const watchers = vm._computedWatchers = Object.create(null)
// computed properties are just getters during SSR
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) {
// create internal watcher for the computed property.
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)
}
}
}
}

Vue会为每个computed属性创建一个lazy Watcher,在Watcher中有下面语句:

  this.dirty = this.lazy // for lazy watchers
this.value = this.lazy ? undefined: this.get() update () {
/* istanbul ignore else */
if (this.lazy) {
this.dirty = true
} else if (this.sync) {
this.run()
} else {
queueWatcher(this)
}
} evaluate () {
this.value = this.get()
this.dirty = false
}

computed 属性的getter

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
}
}
}

watcher.depend()表示在当前watcher添加依赖

watcher.dirty控制是否更新,依赖没改变就不会执行

computed定义函数

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)
}

总结:

  • 如果计算机属性定义后未使用,则依赖改变并不会执行
  • 计算机属性是Lazy的,只有在依赖更新的时候才会触犯返回新的值

【Vue2.x笔记2】从源码看computed对象的更多相关文章

  1. 【Vue2.x笔记3】从源码看watch对象

    初始化 function initWatch (vm: Component, watch: Object) { for (const key in watch) { const handler = w ...

  2. 解密随机数生成器(二)——从java源码看线性同余算法

    Random Java中的Random类生成的是伪随机数,使用的是48-bit的种子,然后调用一个linear congruential formula线性同余方程(Donald Knuth的编程艺术 ...

  3. memcached学习笔记——存储命令源码分析下篇

    上一篇回顾:<memcached学习笔记——存储命令源码分析上篇>通过分析memcached的存储命令源码的过程,了解了memcached如何解析文本命令和mencached的内存管理机制 ...

  4. [转]【安卓笔记】AsyncTask源码剖析

    [转][安卓笔记]AsyncTask源码剖析 http://blog.csdn.net/chdjj/article/details/39122547 前言: 初学AsyncTask时,就想研究下它的实 ...

  5. Laravel学习笔记之Session源码解析(上)

    说明:本文主要通过学习Laravel的session源码学习Laravel是如何设计session的,将自己的学习心得分享出来,希望对别人有所帮助.Laravel在web middleware中定义了 ...

  6. Hadoop学习笔记(10) ——搭建源码学习环境

    Hadoop学习笔记(10) ——搭建源码学习环境 上一章中,我们对整个hadoop的目录及源码目录有了一个初步的了解,接下来计划深入学习一下这头神象作品了.但是看代码用什么,难不成gedit?,单步 ...

  7. 从源码看Azkaban作业流下发过程

    上一篇零散地罗列了看源码时记录的一些类的信息,这篇完整介绍一个作业流在Azkaban中的执行过程,希望可以帮助刚刚接手Azkaban相关工作的开发.测试. 一.Azkaban简介 Azkaban作为开 ...

  8. memcached学习笔记——存储命令源码分析上篇

    原创文章,转载请标明,谢谢. 上一篇分析过memcached的连接模型,了解memcached是如何高效处理客户端连接,这一篇分析memcached源码中的process_update_command ...

  9. 从源码看Android中sqlite是怎么通过cursorwindow读DB的

    更多内容在这里查看 https://ahangchen.gitbooks.io/windy-afternoon/content/ 执行query 执行SQLiteDatabase类中query系列函数 ...

随机推荐

  1. 使用newtonsoft完美序列化WebApi返回的ValueTuple

    由于开发功能的需要,又懒得新建太多的class,所以ValueTuple是个比较好的偷懒方法,但是,由于WebApi需要返回序列化后的json,默认的序列化只能将ValueTuple定义的各个属性序列 ...

  2. [CentOS7 mini]Linux命令补全 yum install bash-completion

    CentOS7 mini默认不带命令补全需要自行安装 使用国内yum清华源 安装完后退出当前窗口再登录生效 # yum install -y bash-completion 已加载插件:fastest ...

  3. 2020/1/4 H5&&C3笔记

    1. 类名不能由数字开头 2.float 是float 属性定义元素在哪个方向浮动.有left / right / none / inherit四个 参考https://www.w3school.co ...

  4. 搞定 ElasticSearch系列一 下载安装

    一.安装jdk 二.安装ElasticSearch 1.ElasticSearch下载地址: 2: 配置ElasticSearch 3:启动ElasticSearch 4: 安装ElasticSear ...

  5. POJ 1753 Flip Game 暴力 深搜

    Flip Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 59468   Accepted: 24750 Descr ...

  6. 89组合margin、padding、float、clear问题

    有关css外边距margin和内边距padding样式,简而述之,顺时针方向旋转,按照上右下左读取,margin-top:/*距离上边距*/margin-right:/*距离右边距*/margin-b ...

  7. 仁和药业顺利出局,布局地产万科A

    仁和药业布局到第二单,被止盈了,盈利大约1.1%.这几日地产行业回调明显,所以布局了万科A. 资金量W11.8 建仓价格28.6 加仓系数1.5 加仓间隔2.70% 总盈利比6.50% 期待吧!

  8. Java软件工程师技能图谱

    原文链接:Java软件工程师技能图谱 最近在考虑"拥有怎样的技能才能算一名合格的java软件工程师呢?"这个问题.碰巧在github发现一个很棒的开源项目--程序员技能图谱.@Zh ...

  9. Expert C Programming(C专家编程) 读书笔记

    目录 几个比较奇葩的指针赋值 int (* fun())() int (* foo())[] int (*foo[])() const 关键词的意义是什么? char const (*next )() ...

  10. 解决mysql导入导出错误问题

    1.datetime类型: 当datetime的值为0000-00-00:00:00:00时,mysql是不接受此条数据的,当然可以 insert ignore into table--------- ...