初始化

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 对象做遍历,拿到每一个 handlerVue 支持 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) 函数,$watchVue 原型上的方法

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对象的更多相关文章

  1. 【Vue2.x笔记2】从源码看computed对象

    computed 初始化函数 const computedWatcherOptions = { lazy: true } function initComputed (vm: Component, c ...

  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. [REDIS 读书笔记]第一部分 数据结构与对象 跳跃表

    下面是跳跃表的基本原理,REDIS的实现大致相同 跳跃表的一个特点是,插入NODE是通过随机的方式来决定level的,比较奇特 下面是skipList的一个介绍,转载来的,源地址:http://ken ...

  2. MySql在Windows下自动备份的几种方法

    以下几种全部是批处理命令中对于备份文件 1.复制date文件夹备份============================假想环境:MySQL   安装位置:C:\MySQL论坛数据库名称为:bbs数 ...

  3. lwip netbuf

    lwip2.0.2 netbuf_new——分配netbuf结构体的内存. netbuf_alloc,分配netbuf中pbuf内存(pbuf_alloc中PBUF_RAM类型,包括pbuf结构体和p ...

  4. 开源堡垒机jumpserver

    开源堡垒机jumpserver 开源堡垒机jumpserver的安装 开源堡垒机jumpserver的配置和使用

  5. ubuntu16.04 自建源

    来自于https://www.cnblogs.com/liangqihui/p/7150066.html APT本地源的搭建(可用于局域网apt-get源搭建或者本地源) 本文档介绍使用apt-mir ...

  6. Linux的那些事-系统启动(增加开机启动项)

    1   /etc/init.d 2   /etc/inittab 3   /etc/rc.d/init.d  1.   /etc/init.d 是一般开机的启动服务存放在这个目录下,至于实现机制,其实 ...

  7. SpringMVC版本报错解决办法

    报错代码: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http:// ...

  8. window 下如何恢复被删除的mysql root账户及密码(mysql 8.0.17)

    不久前自学完完sql,下了mysql8.0.17,安装配置好后探索着,想着用root账户登上去能不能删除root账户呢,然后就想给自己一巴掌,,, 如何快速恢复root: 1.关闭mysql服务:wi ...

  9. SVN仓库备份和迁移

    SVN仓库备份和迁移 author: yunqimg(ccxtcxx0) 前言 本文主要是讲 SVN 仓库的全量备份和增量备份,只包括基本操作. 如有疑问请参考 References. 仓库备份 sv ...

  10. Angular4.0环境搭建

    1.安装nodejs 先装nodejs,如果你的电脑已经装过了,最好确认是比较新的版本,否则可能会出问题 下载地址:https://nodejs.org/en/download/ 安装过程很简单,一直 ...