场景1
在 Vue2剥丝抽茧-响应式系统之watch 中,我们实现了 initWatch
,对于下边的代码
import { observe } from "./reactive";
import { initWatch } from "./state";
const options = {
data: {
title: "liang",
},
watch: {
title(newVal, oldVal) {
console.log("收到变化", newVal, oldVal);
},
},
};
observe(options.data);
initWatch(options.data, options.watch);
options.data.title = "changeTitle";
我们可以感知到 title
的变化,但 title
赋初始值的时候并不会感知到,Vue
中我们可以通过添加 immediate
属性来达到。
import { observe } from "./reactive";
import { initWatch } from "./state";
const options = {
data: {
title: "liang",
},
watch: {
title: {
handler(newVal, oldVal) {
console.log("收到变化", newVal, oldVal);
},
immediate: true,
},
},
};
observe(options.data);
initWatch(options.data, options.watch);
options.data.title = "changeTitle";
回调函数是传递一个 handler
方法。
接下来我们来实现一下。
实现思路
其实思路非常简单,实现两点就可以:
- 解析
handler
,将传入的handler
和options
分开 - 如果
immediate
为true
,立即执行一次回调函数
可以直接看代码了:
/**
* Get the raw type string of a value, e.g., [object Object].
*/
const _toString = Object.prototype.toString;
/**
* Strict object type check. Only returns tru