基于 vue2 实现一个简单的可以双向绑定的 minVue
- 模版插值
- 数据劫持,变量更新
- 多依赖更新
- 实现 vue 指令, v-text,v-model,v-click
模版插值
首先 实现模版编译的功能
对于 vue 的 option,我们只传入 el 和 data,其他的属性暂时我们不做处理,让 html 中的文本传值可以被 data 中的数据替换
|
|
此处我们只考虑元素中只有一个文本插值的情况
|
这样我们就实现了文本插入的功能,我们看一下完整代码
|
数据劫持,变量更新
我们都知道 vue2 是通过 Object.defineProperty 来实现数据劫持的,我们也来实现一个简单的 observer
|
这样我们就实现了数据劫持,接下来我们想一下,如何去实现数据代理的功能
首先我们想要在哪里去做依赖收集比较合适,那就是在compileTextNode
方法里面,他会访问所有的文本插值的内容,所以我们可以在这里进行依赖收集。
|
我们先使用一个全局变量 dep
,用来存储依赖收集的回调函数,当数据发生改变时,我们可以调用这个回调函数来更新视图,我们在defineReactive
方法里面进行依赖收集,当数据发生改变时,我们可以调用updateCallBack
回调函数来更新视图。
我们此处先考虑依赖只有一个模版字符串的情况,所以我们dep
只是一个变量,后续我们会考虑多个模版字符串的情况,所以我们dep
是一个数组或类,用来存储多个回调函数。
完整代码
|
多个依赖的情况
如果我们有多个模版字符串的情况,比如有 2 个使用 count 的情况,就无法用一个 dep 去实现了,所以我们此处将 dep 改造成泪类,并把更新函数写到 Watch 类里面
|
|
compileTextNode
中我们改造一下,使用 Watcher 方法去更新
|
然后再把 Observer 中的代码更新为Dep
类的方法
|
|
这样我们就实现了多个依赖更新的情况
实现 vue 指令
实现 v-text
我们之前对非 text 节点没有作特殊处理,现在处理一下,实现 v-text 的功能
|
在 html 中试一下,能够正常展示 😊
|
v-model
然后我们实现 v-model
|
|
可以正常使用
v-click
最后我们实现一下 v-click 指令
|
|
|
到这里,我们就实现了一个简单的 minVue 了,一起来看下最后的完整代码吧
|
- 本文作者: luckyship
- 本文链接: https://luckyship.github.io/2021/08/19/2021-08-19-min-vue/
- 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!