【Vue2.x笔记3】从源码看watch对象
初始化
function initWatch (vm: Component, watch: Object) {
for (const key in watch) {
const handler = watch[key]
if (Array.isArray(handler)) {
for (let i = 0; i < handler.length; i++) {
createWatcher(vm, key, handler[i])
}
} else {
createWatcher(vm, key, handler)
}
}
}
对 watch
对象做遍历,拿到每一个 handler
,Vue
支持 watch
的同一个 key
对应多个 handler
,所以如果 handler
是一个数组,则遍历这个数组,调用 createWatcher
方法,否则直接调用 createWatcher
:
function createWatcher (
vm: Component,
expOrFn: string | Function,
handler: any,
options?: Object
) {
if (isPlainObject(handler)) {
options = handler
handler = handler.handler
}
if (typeof handler === 'string') {
handler = vm[handler]
}
return vm.$watch(expOrFn, handler, options)
}
对 hanlder
的类型做判断,拿到它最终的回调函数,最后调用 vm.$watch(keyOrFn, handler, options)
函数,$watch
是 Vue
原型上的方法
Vue.prototype.$watch = function (
expOrFn,
cb,
options
) {
var vm = this;
if (isPlainObject(cb)) {
return createWatcher(vm, expOrFn, cb, options)
}
options = options || {};
options.user = true;
var watcher = new Watcher(vm, expOrFn, cb, options);
if (options.immediate) {
try {
cb.call(vm, watcher.value);
} catch (error) {
handleError(error, vm, ("callback for immediate watcher \"" + (watcher.expression) + "\""));
}
}
return function unwatchFn () {
watcher.teardown();
}
};
$watch
方法是用户可以直接调用的,它可以传递一个对象,也可以传递函数,先判断 cb
如果是一个对象,则调用 createWatcher
方法,接着执行 const watcher = new Watcher(vm, expOrFn, cb, options)
实例化了一个 watcher
,如果设置了 immediate
为 true,则直接会执行回调函数 cb
。最后返回了一个 unwatchFn
方法,它会调用 teardown
方法去移除这个 watcher
。
get () {
pushTarget(this)
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()
this.cleanupDeps()
}
return value
}
后来看了Watcher
构造函数的逻辑想了半天watch
监听的属性是如何关联当前Watcher
的,原来在get
函数里value = this.getter.call(vm, vm)
这句代码巧妙的收集了依赖,在watch
初始化之前data
已经初始化完毕,this.getter.call(vm, vm)
对于watch
的监听器来说实质上是获取当前监听的属性,在获取属性时可以收集依赖
至于watch的使用用法可以参考:Vue.js中 watch 的高级用法
源码分析参考:watch
【Vue2.x笔记3】从源码看watch对象的更多相关文章
- 【Vue2.x笔记2】从源码看computed对象
computed 初始化函数 const computedWatcherOptions = { lazy: true } function initComputed (vm: Component, c ...
- 解密随机数生成器(二)——从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系列函数 ...
随机推荐
- 线段树学习----C语言
/* 线段树学习:如果一个节点为i,那么他的左孩子为2I+1,右孩子为2i+2: */ #include<stdio.h> #define min(a,b) a<b?a:b; ]; ...
- python3配置阿里云短信服务
1.申请阿里云短信服务,具体步骤看我的python2-Django配置短信服务 2.安装依赖 aliyun-python-sdk-core-v3 aliyun-python-sdk-dysmsapi= ...
- centos7搭建SVN并配置使用http方式访问SVN服务器
一.检查SVN是否安装 centos7系统自带SVN # rpm -qa subversion [root@localhost ~]# rpm -qa subversion subversion--. ...
- css实现文字过长显示省略号的方法
<div class="title">当对象内文本溢出时显示省略标记</div> 这是一个例子,其实我们只需要显示如下长度: css实现网页中文字过长截取. ...
- codewars--js--Find The Parity Outlier
问题描述:(找出奇数数组中唯一的偶数,或是偶数数组中唯一的奇数) You are given an array (which will have a length of at least 3, but ...
- 分形的奥秘!分形着色器!shader 编程入门实战 ! Cocos Creator!
极致的数学之美! 什么是分形? "一个粗糙或零碎的几何形状,可以分成数个部分,且每一部分都(至少近似地)是整体缩小后的形状" 简单来说,分形(fractal)就像这个doge表情包 ...
- ES6 - 基础学习(1): 开发环境搭建
现在Chrome浏览器已经很好的支持ES6了,但有些低版本的浏览器或其他浏览器还是不支持ES6的语法,因此实际项目开发或上线过程中就需要把ES6的语法转变成ES5的语法.项目开发过程中 Webpack ...
- redis 5.0.7 源码阅读——字典dict
redis中字典相关的文件为:dict.h与dict.c 与其说是一个字典,道不如说是一个哈希表. 一.数据结构 dictEntry typedef struct dictEntry { void * ...
- CSGO控制台命令
转帖: 按下“~”即可开启 使用时先输入参数名 然后按下SPACE空出一格 再输入设定值即可 一般玩家进入游戏都只能用到Client(玩家用参数) 不过...如果你是开LAN GAME的人 就能进阶到 ...
- PHP0025:PHP 博客项目开发2