vue源码分析之如何实现observer和watcher

  • A+
所属分类:JavaScript

本文能帮你做什么?

好奇vue双向绑定的同学,可以部分缓解好奇心还可以帮你了解如何实现$watch

前情回顾:

我之前写了一篇没什么干货的文章。。并且刨了一个大坑。。

今天。。打算来填一天。。并再刨一个。。哈哈

不过话说说回来了.看本文之前,,

如果不知道Object.defineProperty,还必须看看解析神奇的 Object.defineProperty

不得不感慨vue的作者,人长得帅,码写的也好。

本文是根据作者源码,摘取出来的

本文将实现什么

正如上一篇许下的承诺一样,本文要实现一个 $wacth

为了帮助大家理清思路。。我们就做最简单的实现。。只考虑对象不考虑数组

第一步,实现 observer

思路:我们知道Object.defineProperty的特性了,

我们就利用它的set和get。。我们将要observe的对象,

通过递归,将它所有的属性,包括子属性的属性,都给加上set和get,

这样的话,给这个对象的某个属性赋值,就会触发set。。嗯。。开始吧

代码很简单,就给每个属性(包括子属性)都加上get/set,

这样的话,这个对象的,有任何赋值,就会触发set方法。。

所以,我们是不是应该写一个消息-订阅器呢?这样的话,

一触发set方法,我们就发一个通知出来,然后,订阅这个消息的,

就会怎样?。。。对咯。。收到消息。。。触发回调。

第二步,消息-订阅器

很简单,我们维护一个数组,,这个数组,就放订阅着,一旦触发notify,

订阅者就调用自己的update方法

所以,每次set函数,调用的时候,我们是不是应该,触发notify,对吧。所以
我们把代码补充完整

那么问题来了。。谁是订阅者。。对,是Watcher。。一旦 dep.notify()

就遍历订阅者,也就是Watcher,并调用他的update()方法

第三步,实现一个Watcher

我们想象这个Watcher,应该用什么东西。update方法,嗯这个毋庸置疑,还有呢,

对表达式(就是那个“a”) 和 回调函数,这是最基本的,所以我们简单写写

那么问题来了,我们怎样将通过addSub(),将Watcher加进去呢。

我们发现var dep = new Dep() 处于闭包当中,

我们又发现Watcher的构造函数里会调用this.get

所以,我们可以在上面动动手脚,

修改一下Object.defineProperty的get要调用的函数,

判断是不是Watcher的构造函数调用,如果是,说明他就是这个属性的订阅者

果断将他addSub()中去,那问题来了,

我怎样判断他是Watcher的this.get调用的,而不是我们普通调用的呢。

对,在Dep定义一个全局唯一的变量,跟着思路我们写一下

这样的话,我们只需要在Object.defineProperty的get要调用的函数里,

判断有没有值,就知道到底是Watcher 在get,还是我们自己在查看赋值,如果

是Watcher的话就addSub(),代码补充一下

最后不要忘记,在Dep.js中加上这么一句

第四步,实现一个Vue

还差一步就大功告成了,我们要把以上代码配合Vue的$watch方法来用,

要watch Vue实例的属性,算了,,不要理会我在说什么,,直接看代码吧

非常简单。。两件事,observe自己的data,代理自己的data,

使访问自己的属性,就是访问子data的属性。。

截止到现在,在我们只考虑最简单情况下。。整个流程终于跑通了。。肯定会有

很多bug,本文主要目的是展示整个工作流,帮助读者理解。。

代码在https://github.com/georgebbbb/fakeVue

我是一万个不想展示自己代码。。因为很多槽点,还请见谅

下一篇,有两个方向,将聊一聊如何实现双向绑定,,或者是如何watch数组

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • avatar ss 0

      不错, 其实 vm应该是this, vm.$watch(‘a’,call), 你函数的Watch把vm变成一个参数了