【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系列函数 ...
随机推荐
- [REDIS 读书笔记]第一部分 数据结构与对象 跳跃表
下面是跳跃表的基本原理,REDIS的实现大致相同 跳跃表的一个特点是,插入NODE是通过随机的方式来决定level的,比较奇特 下面是skipList的一个介绍,转载来的,源地址:http://ken ...
- MySql在Windows下自动备份的几种方法
以下几种全部是批处理命令中对于备份文件 1.复制date文件夹备份============================假想环境:MySQL 安装位置:C:\MySQL论坛数据库名称为:bbs数 ...
- lwip netbuf
lwip2.0.2 netbuf_new——分配netbuf结构体的内存. netbuf_alloc,分配netbuf中pbuf内存(pbuf_alloc中PBUF_RAM类型,包括pbuf结构体和p ...
- 开源堡垒机jumpserver
开源堡垒机jumpserver 开源堡垒机jumpserver的安装 开源堡垒机jumpserver的配置和使用
- ubuntu16.04 自建源
来自于https://www.cnblogs.com/liangqihui/p/7150066.html APT本地源的搭建(可用于局域网apt-get源搭建或者本地源) 本文档介绍使用apt-mir ...
- Linux的那些事-系统启动(增加开机启动项)
1 /etc/init.d 2 /etc/inittab 3 /etc/rc.d/init.d 1. /etc/init.d 是一般开机的启动服务存放在这个目录下,至于实现机制,其实 ...
- SpringMVC版本报错解决办法
报错代码: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http:// ...
- window 下如何恢复被删除的mysql root账户及密码(mysql 8.0.17)
不久前自学完完sql,下了mysql8.0.17,安装配置好后探索着,想着用root账户登上去能不能删除root账户呢,然后就想给自己一巴掌,,, 如何快速恢复root: 1.关闭mysql服务:wi ...
- SVN仓库备份和迁移
SVN仓库备份和迁移 author: yunqimg(ccxtcxx0) 前言 本文主要是讲 SVN 仓库的全量备份和增量备份,只包括基本操作. 如有疑问请参考 References. 仓库备份 sv ...
- Angular4.0环境搭建
1.安装nodejs 先装nodejs,如果你的电脑已经装过了,最好确认是比较新的版本,否则可能会出问题 下载地址:https://nodejs.org/en/download/ 安装过程很简单,一直 ...