如何使用vue.js中的$watch

Question

如何使用vue.js中的$watch

Answer 1

Observer, Watcher, vm 可谓 Vue 中比较重要的部分，检测数据变动后视图更新的重要环节。下面我们来看看 如何实现一个简单的 $watch 功能，当然Vue 中使用了很多优化手段，在本文中暂不一一讨论。
例子:
// 创建 vm
let vm = new Vue({
data: 'a'
})

// 键路径
vm.$watch('a.b.c', function () {
// 做点什么
})

先阐明在这个 demo 以及Vue 中，它们的关系：
vm 调用 $watch 后，首先调用 observe 函数 创建 Observer 实例观察数据，Observer 又创建 Dep , Dep 用来维护订阅者。然后创建 Watcher 实例提供 update 函数。一旦数据变动，就层层执行回调函数。

Answer 2

Observer,Watcher,vm可谓Vue中比较重要的部分，检测数据变动后视图更新的重要环节。下面我们来看看如何实现一个简单的$watch功能，当然Vue中使用了很多优化手段，在本文中暂不一一讨论。例子://创建vmletvm=newVue({data:'a'})//键路径vm.$watch('a.b.c',function(){//做点什么})先阐明在这个demo以及Vue中，它们的关系：vm调用$watch后，首先调用observe函数创建Observer实例观察数据，Observer又创建Dep,Dep用来维护订阅者。然后创建Watcher实例提供update函数。一旦数据变动，就层层执行回调函数。