资源说明:关于vm.$watch()详细用法可以见官网。
大致用法如下:
[removed]
const app = new Vue({
el: "#app",
data: {
a: {
b: {
c: 'c'
}
}
},
mounted () {
this.$watch(function () {
return this.a.b.c
}, this.handle, {
deep: true,
immediate:
Vue.js 是一款流行的前端框架,它的`vm.$watch()`方法是其响应式系统的重要组成部分,用于监听和响应数据的变化。当我们调用`vm.$watch()`时,实际上是在创建一个`Watcher`实例,这个实例会在数据变化时触发指定的回调函数。
`vm.$watch()`接收三个参数:`expOrFn`、`cb`和`options`。`expOrFn`是你要观察的数据表达式或函数,`cb`是当`expOrFn`所代表的数据发生变化时需要调用的回调函数,`options`则是一个可选的配置对象,包含`deep`和`immediate`等选项。
`deep`选项决定是否深度观测对象,如果设置为`true`,那么即使观测的属性是对象,内部的子属性变化也会触发回调。`immediate`选项如果设置为`true`,会在`$watch`调用后立即执行一次回调,提供当前的新值,而不是等待下次数据变化。
在源码中,`isPlainObject()`函数用于判断传入的`cb`是否为一个纯对象。如果是,那么`cb`应该是包含`handle`属性的对象,而不是直接的函数。如果`cb`是对象,那么`createWatcher`会根据对象中的`handle`属性来创建`Watcher`实例。
`Watcher`类在`vue/src/core/observer/watcher.js`中定义,它包含了与观察相关的属性和方法。例如,`getter`用于获取当前观察的值,`deps`存储了依赖(Dep)实例,这些依赖代表了对数据的观察者。`cb`则是当数据变化时需要调用的回调函数。
`Watcher`实例的`teardown`方法用于解除对数据的观察,这通常是通过返回的`unwatchFn`函数来调用的。当调用`unwatchFn`时,对应的`Watcher`实例将不再监听数据变化,也就不会触发回调函数。
在响应式系统中,`Dep`和`Watcher`紧密协作。当数据变化时,会通知其对应的`Dep`,`Dep`再通知其所有依赖的`Watcher`进行更新。在`vm.$watch`的实现中,如果设置了`deep`选项,那么`Observer`会在初始化时递归地观察对象的所有子属性,确保深度观测的生效。
`vm.$watch()`的内部原理涉及到Vue的响应式机制,包括`Watcher`、`Dep`以及它们之间的交互。通过创建`Watcher`实例并将其添加到依赖关系中,Vue能够确保在数据变化时准确地执行回调函数,从而实现视图的自动更新。
本源码包内暂不包含可直接显示的源代码文件,请下载源码包。