使用Proxy实现简单的Vue
尝试使用es6新特性，自己来实现一个mvvm及vue的各种特性。
功能
- 使用proxy实现基本的数据驱动
- 观察者模式订阅更新
- 精准依赖收集
- 异步更新队列
- 深度监听
- 简单模板渲染
- 节点响应数据更新
- 双向数据绑定
- style/class绑定
- computed\watch整合
- directive指令
- v-bind/v-if/v-for等简单指令
- 事件处理器
- 组件系统
- 插件系统 ...
细节
1. 基本的数据驱动
观察数据，进行基本的响应
import Watcher, { observify } from './data.js'
let obj = observify({
a: 1
})
new Watcher(obj, 'a', (newVal, oldVal) => {
console.log(`a的值更新了，新值为：${newVal}, 旧值为：${oldVal}`)
})
obj.a = 2
2.观察者模式订阅更新
内部集成观察者模式，将订阅多个事件，在对象变化时，发布到多个观察者
let obj = observify({
a: 1
})
new Watcher(obj, 'a', (newVal, oldVal) => {
console.log(`a的值更新了，新值为：${newVal}, 旧值为：${oldVal}`)
})
new Watcher(obj, 'a', (newVal, oldVal) => {
console.log(`a的值更新了，新值为：${newVal}, 旧值为：${oldVal}`)
})
obj.a = 2
3.精准依赖收集
仅仅对收集到的依赖进行更新，支持render函数模式
let obj = observify({
a: 1,
b: 2,
c: 3
})
new Watcher(obj, 'a', (newVal, oldVal) => {
console.log(`a的值更新了，新值为：${newVal}, 旧值为：${oldVal}`)
})
new Watcher(obj, () => {
return obj.a + obj.b
}, (newVal, oldVal) => {
console.log(`结果更新了，新值为：${newVal}, 旧值为：${oldVal}`)
})
obj.a = 2 // 触发watcher
obj.c = 10 // 并不会被触发
4.异步更新队列
将同一事件循环的更新放到一个队列里进行缓冲，在下一事件循环同一执行，避免重复操作dom。
new Watcher(obj, () => {
return obj.a + obj.b
}, (newVal, oldVal) => {
console.log(`结果更新了，新值为：${newVal}, 旧值为：${oldVal}`)
})
obj.a = 1
obj.a = 2
obj.a = 3 // 仅在此处输出
5.深度监听
针对对象可以进行深度监听，当子对象变化时，父级可以检测到变化
let obj = observify({
a: {
b: {
c: 1
}
}
})
new Watcher(obj, 'a', (value) => {
console.log('a的某个属性发生了改变', value)
}, true)
obj.a.b.c = 3 // 可以追踪到a属性发生了变化
6.简单模板渲染
实现简单的模板渲染功能
let vm = new MVVM({
el: 'body',
data () {
return {
msg: 'hello world'
}
},
render (dom) {
return dom.p(
{},
dom.a(
{
href: 'https://www.baidu.com'
},
() => this.msg // 指向vm
)
)
}
})