watch在Vue.js中的使用方法详解

这两天学习了Vue.js 中的 $watch这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。

github 源码

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

例子:

先阐明在这个 demo 以及Vue 中，它们的关系：

vm 调用 $watch 后，首先调用 observe 函数 创建 Observer 实例观察数据，Observer 又创建 Dep , Dep 用来维护订阅者。然后创建 Watcher 实例提供 update 函数。一旦数据变动，就层层执行回调函数。

Observer和observe

递归调用 observe 函数创建 Observer。在创建 Observer 的过程中，使用 Object.defineProperty() 函数为其添加 get set 函数， 并创建 Dep 实例。

你可能会疑问 Dep.target 是个什么鬼？

以上就是watch在Vue.js中的使用方法详解的详细内容，更多请关注Gxl网其它相关文章！