关于watch
watch和computed是姊妹篇,前言同上。
为啥姊妹呢,因为computed初始化完了就是初始化watch:
function initWatch (vm, watch) {
for (var key in watch) {
var handler = watch[key];
if (Array.isArray(handler)) {
for (var i = 0; i < handler.length; i++) {
createWatcher(vm, key, handler[i]);
}
} else {
createWatcher(vm, key, handler);
}
}
}
这个方法没啥好解说的,直接到createWatcher:
function createWatcher (
vm,
expOrFn,
handler,
options
) {
if (isPlainObject(handler)) {
options = handler;
handler = handler.handler;
}
if (typeof handler === 'string') {
handler = vm[handler];
}
return vm.$watch(expOrFn, handler, options)
}
从上面的代码可以看出初始化的时候定义在watch上的那些key-value和调用实例的$watch走的是一回事。所以还是看看$watch:
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***mediate) {
try {
cb.call(vm, watcher.value);
} catch (error) {
handleError(error, vm, ("callback for immediate watcher \"" + (watcher.expression) + "\""));
}
}
return function unwatchFn () {
watcher.teardown();
}
};
}
看到没,又是watcher,这里的options是undefined,但是要注意到,options.user = true; 这个很重要是因为刷新任务队列的时候watch里的watcher的cb回调函数就是根据这个参数去调用的。我在写到这里的时候其实想吐槽一句vue就是vue框架的的整个机制大到vuex,vue-router小到这种数据的相应式绑定都跟watcher有关,不过我第一次发现这个的时候倒是觉着挺妙的,其他的倒也没啥。
(n年后的补充:一个工具在一个框架内部要去实现响应式更新,无论路由也好,状态管理也好,其,要实现更新,更定是要利用框架现有的机制的,vue的watcher,react的setstate等等,不然能咋办呢)
这个函数里需要注意到一个地方就是实例化watcher的时候,是吧当前watch的key传进去了,此时,expOrFn是一个字符串类型,这个时候,Watcher构造函数的执行是这样的:
this.getter = parsePath(expOrFn);
parsePath长这样:
function parsePath (path) {
if (bailRE.test(path)) {
return
}
var segments = path.split('.');
return function (obj) {
for (var i = 0; i < segments.length; i++) {
if (!obj) { return }
obj = obj[segments[i]];
}
return obj
}
}
返回的闭包函数就是当前watcher的getter,闭包了当前的'key',这个key也可以是‘key.key.key’,这个有啥用放到后边说,watcher走到最后一步的时候会调用watcher实例的get进行依赖收集,然后依赖收集的时候有这么一句:
value = this.getter.call(vm, vm);
所以再回到上边那个闭包函数中,此时调用的时候obj参数就引用了当前的vm,而下边的for循环则是一步步具体化watch要watch的路径,触发这条路径上所有的get,进行依赖收集,比方说我们watch了一个'key.key',那么vm['key'],vm['key']['key']会依次调用,此时watch里key值派生的watcher也被依赖收集机制 收集了进去。然后一个watch就这么初始化完毕啦。
随机推荐
- battery-historian耗电量测试
Battery-Historian简介 Battery-Historian是谷歌推出的一款专门分析Bugreport的工具,是谷歌2015年I/O大会上推出的一款检测运行在android5.0(Lol ...
- 狄利克雷过程(Dirichlet Process)
先从狄利克雷过程的motivation开始说起,如果我们有一些数据,这些数据是从几个高斯分布中得出的,也就是混合高斯模型中得出的,比如下图这样 但是呢,我们并不知道混合高斯模型中到底有多少个高斯分布, ...
- Flask + PyInstaller = 客户端
Flask + PyInstaller = 客户端 有些特殊情况需要开发客户端,Python有几个常用的几个GUI框架,如 PyQt.wxPython等 但使用这些GUI框架往往界面比较丑,而且GUI ...
- M1芯片的Mac上如何安装Windows系统
其实和安装非M1的mac没什么区别,唯一就是找到arm版本的win10镜像文件. 一.安装 Parallels Desktop 16 1. 双击打开dmg格式的安装包,并双击 「Install P ...
- Jest - Testing Asynchronous
When we test asynchronous, we use Axios to get the response. install the Axios npm i axios Cause we ...
- 067_VFPage中Js与controller交互方式(二) RemoteAction
上篇文章介绍了Toolkit API,是一种js的前台写法 同步调用格式:sforce.connection.method("argument1","argument2& ...
- hadoop服务异常,磁盘坏道critical medium error,dev sdh,sector xxxx
运行spark之后,部分任务失败,排查查看操作系统日志(/var/log/message),发现磁盘坏道,导致服务异常.异常主要错误"critical medium error,dev sd ...
- OS-lab4
OS-lab4 系统调用 系统调用的流程 按照上述的流程逐个分析. user/syscall_lib.c 这个文件位于user文件夹下,也就是用户程序可以调用的函数,相当于操作系统提供给用户程序的一些 ...
- vue input输入框关键字筛选检索列表数据展示
想必大家在项目开发中难免会用到关键字筛选的功能,正好这次项目有需求要做这一块,就整理一下vue的input输入框输入关键字检索数据列表的代码.下面直接上代码: html: <!-- 筛选demo ...
- Python的入门学习Day 19~21——form”夜曲编程“
..Day 19 time:2021.8.16. 很神奇地,编程和数学渐渐有了交集--今天学习了函数,连模样都像 f(x) 的形式.比较有区分度的是,在P里,"x"被称为&qu ...