1.双向数据绑定
简单来说就是数据的改变能够引起视图的改变,视图的改变同样也能引起数据的改变
2.双向绑定原理
双向数据绑定由三个部分组成
1.数据层(Model):数据及业务逻辑
2.视图(View):应用的展示效果
3.业务逻辑层(ViewModel):负责将视图和数据连接起来
这也是MVVM的全部组成部分
Vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。主要分为以下几个步骤:
- 需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化
- compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
- Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是: ①在自身实例化时往属性订阅器(dep)里面添加自己 ②自身必须有一个update()方法 ③待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。
- MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。
2.1 ViewModel
职责:
1.数据变化后更新视图
2.视图变化后更新数据
组成:
1.监听器(Observer):对所有数据的属性进行监听
2.解析器(Compile):对每个元素结点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
2.2 实现步骤
1.new Vue()首先执行初始化,对data执行响应化处理,这个过程发生在Oberbe中
2.同时对模板执行编译,找到其中动态绑定的数据,从data中获取并初始化视图,发生在compile中
3.同时定义一个更新函数和watcher,将来对应数据发生变化时watcher会调用更新函数
4.由于data的某个key在一个视图中可能出现多次,所以每个key需要一个管家Dep来管理多个Watcher
5.将来data中的数据一旦发生变化,会首先找到对应的Dep,通知所有Watcher执行更新函数
class Vue {
constructor(options) {
this.$options = options
this.$data = options.data
//对data选项做响应式处理
observe(this.$data)
//代理data到vm上
proxy(this)
//执行编译
new Compile(options.el, this)
}
}
//对data选项执行响应化操作
function observe(obj) {
if (typeof obj !== 'object' || obj == null) {
return;
}
new Observer(obj)
}
class Observer {
constructor(value) {
this.value = value
this.walk(value)
}
walk(obj) {
Object.keys(obj).forEach((key) => {
defineReactive(obj, key, obj[key])
})
}
}
//对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
class Compile {
constructor(el, vm) {
this.$vm = vm
this.$el = document.querySelector(el) //获取dom
if (this.$el) {
this.compile(this.$el)
}
}
compile(el) {
const childNodes = el.childNodes
Array.from(childNodes).forEach((node) => {
if (this.isElement(node)) {//如果是结点
console.log('编译元素' + node.nodeName);
} else if (this.isInterpolation(node)) {//判断是否时插值文本
console.log('编译插值文本' + node.textContent);
}
if (node.childNodes && node.childNodes.length > 0) {
this.compile(node)
}
})
}
isElement(node) {
return node.nodeType == 1
}
isInterpolation(node) {
return node.nodeType == 3 && /\{\{(.*)\}\}/.test(node.textContent);
}
}
//依赖收集
//负责更新视图
class Watcher {
constructor(vm, key, updater) {
this.vm = vm
this.key = key
this.updaterFn = updater
// 创建实例时,把当前实例指定到Dep.target静态属性上
Dep.target = this
// 读一下key,触发get
this.vm[this.key]
Dep.target = null
}
// dom dep
update() {
this.updaterFn.call(this.vm, this.vm[this.key])
}
}
//声明Dep
class Dep{
constructor(){
this.deps = []
}
addDep(dep){
this.deps.push(dep)
}
notify(){
this.deps.forEach((dep) => dep.update())
}
}
//依赖收集
function defineReactive(obj,key,val){
this.observe(val)
const dep = new Dep()
Object.defineProperty(obj,key,{
get(){
Dep.target && dep.addDep(Dep.target)
return val
},
set(newVal){
if(newVal === val) return
dep.notify()
}
})
}