this.vm.$data.name = e.target.value // 将修改的值 更新到 vm的data中
document.querySelector('.form-control').value = targetValue; // 更新dom 节点
document.querySelector('.template').textContent = targetValue
}
},false)
}
}
这样就可以看到 在表单中，数据的双向绑定了。
未完待续，错误之处，敬请指出,共同进步！
下一篇 vue 双向数据绑定的实现学习（三）- 模板编译
附：演示代码：
js:
function Myvue (options) {
this.$options = options
this.$el = document.querySelector(options.el);
this.$data = options.data;
Object.keys(this.$data).forEach(key => {
this.$prop = key;
})
this.init()
}
Myvue.prototype.init = function () {
// 监听数据变化
observer(this.$data);
// 获得值
// let value = this.$data[this.$prop];
// 不经过模板编译直接 通知订阅者更新dom
// new Watcher(this,this.$prop,value => {
// console.log(`watcher ${this.$prop}的改动，要有动静了`)
// this.$el.textContent = value
// })
//通知模板编译来执行页面上模板变量替换
new Compile(this)
}
function observer (data) {
if(!data || typeof data !== 'object') {
return;
}
Object.keys(data).forEach(key => {
// 对每个属性监听处理
defineReactive(data, key, data[key]);
})
}
function defineReactive (data,key,value) {
// 每次访问/修改属性的时候 实例化一个调度中心Dep
var dep = new Dep();
Object.defineProperty(data,key,{
get: function() {
// 添加到watcher 的Dep 调度中心
if (Dep.target) { // Dep.target 是个什么鬼？ 转到watcher.js 它是某个订阅者 watcher
dep.addSub(Dep.target); //这个代码段的意思： 如果有订阅者(访问/修改属性的时候) 就将这个订阅者统一放进 Dep 调度中心中
}
// console.log(`${key}属性被访问了`)
return value
},
set: function (newValue) {
if (value != newValue) {
// console.log(`${key}属性被重置了`)
value = newValue
dep.notify(); //我这里有做改动了，通知调度中心的notify方法
}
}
})
// 递归调用，observe 这个value
observer(value)
}
// 统一管理watcher订阅者的Dep （调度中心） Dispatch center
function Dep () {
// 所有的watcher 放进这里统一管理
this.subs = []}
Dep.target = null;
// 通知视图更新dom的 notify的方法
Dep.prototype.notify = function () {
// this.subs 是上面订阅器watcher 的集合
