当vue开发经验越来越丰富的时候，就想了解其各种实现原理，其中第一个感兴趣的便是双向数据绑定原理，前后看过不少文档和资料，终于有所收获，此文将详细解析vue双向数据绑定的基本实现思路（非源码）。
MVVM简介：
1.输入框内容变化时，data 中的数据同步变化。即 view => data 的变化。
2.data 中的数据变化时，文本节点的内容同步变化。即 data => view 的变化。
MVVM示意图.png
思路：
-
实现一个监听器 Observer ，用来劫持并监听所有属性，如果属性发生变化，就通知订阅者；基础入门
-
实现一个订阅器 Dep，用来收集订阅者，对监听器 Observer 和 订阅者 Watcher 进行统一管理；
-
实现一个订阅者 Watcher，可以收到属性的变化通知并执行相应的方法，从而更新视图；
-
实现一个解析器 Compile，可以解析每个节点的相关指令，对模板数据和订阅器进行初始化。
-
创建一个公共的入口对象（Vue），接收初始化配置，并协调Compile、Observer、Watcher模块，也就是Vue。
双向绑定思路图解.png
一、监听器Observer实现
作用：递归劫持vm.$data中的所有数据，拦截setter和getter。如果数据变更，则发布通知,让所有订阅者更新内容，改变视图。Object.defineProperty详解 玩家详解
class Observer {
constructor(data){
this.data = data
this.walk(data)
}
// 遍历walk中所有的数据,劫持 set 和 get方法
walk(data) {
// 判断data 不存在或者不是对象的情况
if(!data || typeof data !=='object') return
// 拿到data中所有的属性
Object.keys(data).forEach(key => {
// 给data中的属性添加 getter和 setter方法
this.defineReactive(data,key,data[key])
// 如果data[key]是对象,深度劫持
this.walk(data[key])
})
}
// 定义响应式数据
defineReactive(obj,key,value) {
let _this = this
let dep = new Dep() // Dep函数请看下节实现
Object.defineProperty(obj,key,{
enumerable:true,
configurable: true,
get(){
// 如果Dep.target 中有watcher 对象,则存储到订阅者数组中
Dep.target && dep.addSub(Dep.target)
return value
},
set(newVal){
if(value === newVal) return
value = newVal
// 如果设置的值是一个对象,那么这个对象也应该是响应式的
_this.walk(newVal)
// 发布通知,让所有订阅者更新内容
dep.notify()
}
})
}
}
二、订阅器Dep实现
class Dep {
constructor(){
// 初始化一个空数组，用来存储订阅者
this.subs = []
}
// 添加订阅者
addSub(watcher){
this.subs.push(watcher)
}
// 通知
notify() {
// 通知所有的订阅者更改页面
this.subs.forEach(sub => {
sub.update()
})
}
}
三、订阅者Watcher实现
class Watcher {
/**
*
* @param {*} vm 当前的vue实例
* @param {*} expr data中数据的名字
* @param {*} callback 一旦数据改变,则需要调用callback
*/
constructor(vm,expr,callback){
this.vm = vm
this.expr = expr
this.callback = callback
Dep.target = this // 全局变量 订阅者 赋值
this.oldValue = this.getVMData(vm,expr) // 强制执行监听器Observer里的get函数
Dep.target = null //全局变量 订阅者 释放
}
// 对外暴露的方法,用于更新页面
update() {
// 对比expr是否发生改变,如果改变则调用callback
let oldValue = this.oldValue
let newValue = this.getVMData(this.vm,this.expr)
// 变化的时候调用callback
if(oldValue !== newValue) {
this.callback(newValue,oldValue)
}
}
getVMData(vm,expr) {
let data = vm.$data
expr.split('.').forEach(key => {
data = data[key]
})
return data
}
}
当我们去实例化一个 watcher 的时候，首先进入 watcher 的构造函数逻辑
在这个过程中会对 vm 上的数据访问，其实就是为了触发数据对象的 getter。
this.oldValue = this.getVMData(vm,expr)
每个对象值的 getter 都持有一个 dep，在触发 getter 的时候会执行this.addSub(Dep.target)，即把当前的 watcher 订阅到这个数据持有的 dep 的 watchers(subs) 中，这个目的是为后续数据变化时候能通知到哪些 watchers 做准备。
完成依赖收集后，还需要把 Dep.target 恢复成上一个状态，即：
Dep.target = null; // 释放自己
而 update() 函数是用来当数据发生变化时调用 Watcher 自身的更新函数进行更新的操作。
先通过 let newValue = this.getVMData(this.vm,this.expr), 获取到最新的数据,然后将其与之前的oldValue进行比较，如果不一样，则调用更新函数 cb 进行更新。
至此，简单的订阅者 Watcher 设计完毕。（new Watcher()在Compile解析dom节点时调用从而形成绑定关系）
四、Compile核心代码
- 解析指令（属性节点）与插值表达式（文本节点），并替换模板数据，初始化视图；
- 将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图；
mustache(node, vm) {
let txt = node.textContent
let reg = /\{\{(.+)\}\}/
if (reg.test(txt)) {
let expr = RegExp.$1
node.textContent = txt.replace(reg, this.getVMData(vm, expr))
// 侦听expr值的变化。当expr的值发生改变时，执行回调函数
new Watcher(vm, expr, newValue => {
node.textContent = txt.replace(reg, newValue)
})
}
}
五、Vue 入口文件
入口文件所做的事情：
- 把data和methods挂载到根实例中；
- 用Observer模块监听data所有属性的变化
- 如果存在挂载点，则用Compile模块编译该挂载点下的所有指令和插值表达式
// vue.js
class Vue {
constructor(options={}){
this.$el = options.el;
this.$data = options.data;
this.$methods = options.methods;
// 将data,methods里面的属性挂载根实例中
this.proxy(this.$data);
this.proxy(this.$methods);
// 监听数据
new Observer(this.$data)
if(this.$el) {
new Compile(this.$el,this);
}
}
proxy(data={}){
Object.keys(data).forEach(key=>{
// 这里的this 指向vue实例
Object.defineProperty(this,key,{
enumerable: true,
configurable: true,
set(value){
if(data[key] === value) return
return value
},
get(){
return data[key]
},
})
})
}
}
网友评论