【Vue2.x笔记2】从源码看computed对象
更新重新看了下源码
// 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对象的更多相关文章
- 【Vue2.x笔记3】从源码看watch对象
初始化 function initWatch (vm: Component, watch: Object) { for (const key in watch) { const handler = w ...
- 解密随机数生成器(二)——从java源码看线性同余算法
Random Java中的Random类生成的是伪随机数,使用的是48-bit的种子,然后调用一个linear congruential formula线性同余方程(Donald Knuth的编程艺术 ...
- memcached学习笔记——存储命令源码分析下篇
上一篇回顾:<memcached学习笔记——存储命令源码分析上篇>通过分析memcached的存储命令源码的过程,了解了memcached如何解析文本命令和mencached的内存管理机制 ...
- [转]【安卓笔记】AsyncTask源码剖析
[转][安卓笔记]AsyncTask源码剖析 http://blog.csdn.net/chdjj/article/details/39122547 前言: 初学AsyncTask时,就想研究下它的实 ...
- Laravel学习笔记之Session源码解析(上)
说明:本文主要通过学习Laravel的session源码学习Laravel是如何设计session的,将自己的学习心得分享出来,希望对别人有所帮助.Laravel在web middleware中定义了 ...
- Hadoop学习笔记(10) ——搭建源码学习环境
Hadoop学习笔记(10) ——搭建源码学习环境 上一章中,我们对整个hadoop的目录及源码目录有了一个初步的了解,接下来计划深入学习一下这头神象作品了.但是看代码用什么,难不成gedit?,单步 ...
- 从源码看Azkaban作业流下发过程
上一篇零散地罗列了看源码时记录的一些类的信息,这篇完整介绍一个作业流在Azkaban中的执行过程,希望可以帮助刚刚接手Azkaban相关工作的开发.测试. 一.Azkaban简介 Azkaban作为开 ...
- memcached学习笔记——存储命令源码分析上篇
原创文章,转载请标明,谢谢. 上一篇分析过memcached的连接模型,了解memcached是如何高效处理客户端连接,这一篇分析memcached源码中的process_update_command ...
- 从源码看Android中sqlite是怎么通过cursorwindow读DB的
更多内容在这里查看 https://ahangchen.gitbooks.io/windy-afternoon/content/ 执行query 执行SQLiteDatabase类中query系列函数 ...
随机推荐
- 使用newtonsoft完美序列化WebApi返回的ValueTuple
由于开发功能的需要,又懒得新建太多的class,所以ValueTuple是个比较好的偷懒方法,但是,由于WebApi需要返回序列化后的json,默认的序列化只能将ValueTuple定义的各个属性序列 ...
- [CentOS7 mini]Linux命令补全 yum install bash-completion
CentOS7 mini默认不带命令补全需要自行安装 使用国内yum清华源 安装完后退出当前窗口再登录生效 # yum install -y bash-completion 已加载插件:fastest ...
- 2020/1/4 H5&&C3笔记
1. 类名不能由数字开头 2.float 是float 属性定义元素在哪个方向浮动.有left / right / none / inherit四个 参考https://www.w3school.co ...
- 搞定 ElasticSearch系列一 下载安装
一.安装jdk 二.安装ElasticSearch 1.ElasticSearch下载地址: 2: 配置ElasticSearch 3:启动ElasticSearch 4: 安装ElasticSear ...
- POJ 1753 Flip Game 暴力 深搜
Flip Game Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 59468 Accepted: 24750 Descr ...
- 89组合margin、padding、float、clear问题
有关css外边距margin和内边距padding样式,简而述之,顺时针方向旋转,按照上右下左读取,margin-top:/*距离上边距*/margin-right:/*距离右边距*/margin-b ...
- 仁和药业顺利出局,布局地产万科A
仁和药业布局到第二单,被止盈了,盈利大约1.1%.这几日地产行业回调明显,所以布局了万科A. 资金量W11.8 建仓价格28.6 加仓系数1.5 加仓间隔2.70% 总盈利比6.50% 期待吧!
- Java软件工程师技能图谱
原文链接:Java软件工程师技能图谱 最近在考虑"拥有怎样的技能才能算一名合格的java软件工程师呢?"这个问题.碰巧在github发现一个很棒的开源项目--程序员技能图谱.@Zh ...
- Expert C Programming(C专家编程) 读书笔记
目录 几个比较奇葩的指针赋值 int (* fun())() int (* foo())[] int (*foo[])() const 关键词的意义是什么? char const (*next )() ...
- 解决mysql导入导出错误问题
1.datetime类型: 当datetime的值为0000-00-00:00:00:00时,mysql是不接受此条数据的,当然可以 insert ignore into table--------- ...