往期内容：
默认情况下, watch中的回调是不执行的. 但是可以通过传入参数让其立即执行
第一次立即执行回调时, 拿到的旧值是undefined
基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<script>
const { reactive, watch } = Vue
const state = reactive({ name: 'xiaoming', address: { city: '武汉' } })
watch(
() => state.name,
(newValue, oldValue) => {
console.log('设置immediate选项会立即执行回调')
console.log(newValue, oldValue)
},
{ immediate: true }
)
setTimeout(() => {
state.name = 'xiaopang'
}, 1000)
</script>
</body>
</html>
具体实现
立即执行的函数和更新时执行的函数本质上是没有区别的
因此, 我们可以将scheduler封装起来
function watch(source, cb, options = {}) {
let getter
if (typeof source == 'function') {
getter = source
} else {
getter = () => traverse(source)
}
let oldValue, newValue
const job = () => {
newValue = _effect.run()
cb(newValue, oldValue)
oldValue = newValue
}
const _effect = effect(getter, {
lazy: true,
scheduler: job,
})
if (options.immediate) {
job()
} else {
oldValue = _effect.run()
}
}