(七)Directives行为预设

Directive我们通常叫它指令,在我的理解里Directives就是它是一组行为预设。前面我们不是有讲到Watcher嘛,Watcher作为中介者连接了数据和回调函数,但是我们的回调函数还是都是需要自己写一些操作的,实际上我们开发过程中有很多的重复性的操作,我们就将这一部分操作提取出来这就是Directive。现在这样是不是觉得指令这个名称很贴切呢,我们定义了指令告诉程序要做什么,而不是具体的谁要去做什么,这是一种抽象。

阅读全文

(五)模板字符串转换成DOM

模板

在前面的章节中我们已经知道了通过对数据进行劫持的方式可以让我们以这种通过数据驱动的方式去开发一个应用程序。但是如果全部在Watcher中做控制这样需要写很多重复性的控制视图的代码。

这样显然是很麻烦的,MVVM的核心是在MVC的基础上将view的状态行为抽象化。

在Vue中模板就是用来声明我们应用程序的数据与界面的绑定关系。

在Vue中模板不仅可以做到绑定数据还可以做到诸如循环判断等复杂功能,因此一定是一个图灵完备的语言去实现而不是html,它只是一种接近html的写法。

在Javascript中模板本质上也就是字符串,因此在Vue的运行过程中还需要将我们的模板字符串转换成DOM节点,并在这个过程中实现与我们数据的绑定。

阅读全文

(四)Dep依赖收集

通过Watcher我们可以定义一个数据和回调函数的关系,当我们的数据变化的时候执行对应的回调函数。

有的时候一个数据可能会对应很多的回调函数(即程序中很多地方都用到了某个数据),这时候我们就需要将这些依赖关系收集起来,当数据变化的时候统一执行回调函数。

Dep的定义

Dep就是这样一个专门帮助我们管理依赖的类,它主要实现了依赖的收集、删除以及向依赖发送通知。同时我们可以将之前挂载到全局对象上的方法改为挂载到Dep上,避免污染全局作用域。

阅读全文

(三)Watcher依赖数据的对象

如何利用变化侦测

我们在前面已经做到了将一个对象上所有属性进行侦测,也就是说任何值改变我们都能知道。但是并没有将对应的方法暴露出来,也就是说不管更新在setter或者mutator中触发了,我们并不能再外部去调用方法去更新。

同时虽然取值的时候可以会触发getter,而在setter或者mutator中赋值的时候可以通知改变,但是有个问题是我们并不知道getter中是哪个方法或者对象调用的,因此我们就不知道去通知谁去更新。

为了解决这两个问题,我们需要定义一个依赖对象,这个对象有一个取值get方法,和一个update更新方法。当调用取值方法时可以触发getter,在取值前我们将这个对象挂载到一个全局的对象中,这样在触发getter方法时我们就可以通过全局对象获取到我们的依赖对象并将其收集起来,当触发setter或者mutator的时候我们就调用依赖对象的update方法实现更新操作。

阅读全文