【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系列函数 ...
随机推荐
- SpringProfile轻松切换多环境配置文件
在项目开发的过程中,我们难免会遇到开发.测试.生产等环境的切换,而各个环境的配置肯定是不同的.传统的办法是在项目打包的时候修改配置文件.但人为做的事情难免产生意外.Spring 为我们提供了一种多环境 ...
- mysql出现 Unknown column 'Password' in 'field list'
linux安装了mysql之后初始化密码获取:出现了下面的内容,密码很尴尬,无法用root登录: grep 'temporary password' /var/log/mysqld.log [Note ...
- 多线程笔记 - provider-consumer
通过多线程实现一个简单的生产者-消费者案例(笔记). 首先定义一个要生产消费的数据类 : public class Data { private String id; private String n ...
- JS中new的实现原理及重写
提到new,肯定会和类和实例联系起来,如: function Func() { let x = 100; this.num = x + } let f = new Func(); 上面的代码,我们首先 ...
- 解决Fail to post notification on channel "null"的方法
mNotifyMgr = (NotificationManager) getSystemService(NOTIFICATION_SERVICE);mNotifyMgr.cancelAll(); St ...
- 一行代码解决MacBook Pro安装VSCode没有应用图标问题
笔者今天升级了VSCode,安装完后发现Dock(程序坞)没有VSCode的图标了,导致切换应用非常不方便. 具体情况就像下面这张图,VSCode明明开着,但是在Dock找不到VSCode了. 解决办 ...
- Winfrom中From控件的重绘
重绘目的: 1. 满足非默认主题下的标题栏样式 2. 在保留停靠功能的同时进行重绘. 代码如下: public partial class FormEx: Form { public FormEx() ...
- 从零开始一个个人博客 by asp.net core and angular(三)
这是第三篇了,第一篇只是介绍,第二篇介绍了api项目的运行和启动,如果api项目没什么问题了,调试都正常了,那基本上就没什么事了,由于这一篇是讲前端项目的,所以需要运行angular项目了,由于前端项 ...
- ASP.NET Core DI概述
众所周知,ASP.NET Core有一个DI框架,应用程序启动时初始化. 预定义依赖 1: IApplicationBuilder:提供了配置应用程序的请求管道机制 2:ILoggerFactory: ...
- JS淘宝浏览商品
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...