2021-03-06

vue 双向数据绑定的原理

双向数据绑定主要是通过数据劫持配合发布订阅者模式实现的

首先使用object.defineProperty中的get和set属性对数据进行依赖收集和派发更新，根据set里数据比对数据是否有变化，通知监听的观察者是否对视图进行更新。

 

实现一个简单的双向数据绑定

<input type="text" id="a">

<span id='b'></span>

let obj = {},val = '1'

Object.defineProperty(obj,'val',{

get:()=>{

  return val
}

set:(newValue){

val = newValue
document.getElementById('a').value = val

document.getElementById('b').innerText = val

}

})

window.addEventListener('keyup',(e)=>{

obj.val = e.target.value

})

 

以上就是简单的双向数据绑定

明天对发布订阅者模式进行详细说明

 

小知识点：

vue-loader对.vue文件进行解析和转义，提前vue文件中的html，js和css，再分别提交给相对应的loader去执行

css-loader对加载提取出来的css

vue-template-compiler对html模板转换成可执行的JavaScript内容

vue中对数组或者object类型有无法监听到实现双向的时候，可以使用vue.set()的方式将数组和对象进行绑定。除此之外，数组中对长度和某个内容的修改还可以使用splice