Vue2剥丝抽茧-响应式系统之watch2

场景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