1.前言
每当被问到Vue数据双向绑定原理的时候，大家可能都会脱口而出：Vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter，当数据变化时通知视图更新。虽然一句话把大概原理概括了，但是其内部的实现方式还是值得深究的，本文就以通俗易懂的方式剖析Vue内部双向绑定原理的实现过程。
2.思路分析
所谓MVVM数据双向绑定，即主要是：数据变化更新视图，视图变化更新数据。如下图：
也就是说：
- 输入框内容变化时，data 中的数据同步变化。即 view => model 的变化。
- data 中的数据变化时，文本节点的内容同步变化。即 model => view 的变化。
3.原理
1.vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
2.核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法；
3.介绍一下Object.defineProperty()方法
Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为obj（要定义其上属性的对象），prop （要定义或修改的属性），descriptor （具体的改变方法）
简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法详情可参考 MDN|Object.defineProperty()
4.具体实现
1.实现效果
先来看一下vue双向数据绑定是如何进行的，以便我们确定好思考方向
<div id="app">
<input type="text" v-model="text">{{text}}
</div>//创建一个vue实例
var vm=new Vue({
el:'app',
data:{
text:'hello world'
}
})2.任务拆分
拆分任务可以让我们的思路更加清晰：
（1）将vue中的data中的内容绑定到输入文本框和文本节点中
（2）当文本框的内容改变时，vue实例中的data也同时发生改变
（3）当data中的内容发生改变时，输入框及文本节点的内容也发生变化
3.分布执行任务
1.任务1-绑定data到view
我们先了解一下 DocuemntFragment（碎片化文档）这个概念，你可以把他认为一个dom节点收容器，当你创造了10个节点，当每个节点都插入到文档当中都会引发一次浏览器的回流，也就是说浏览器要回流10次，十分消耗资源。而使用碎片化文档，也就是说我把10个节点都先放入到一个容器当中，最后我再把容器直接插入到文档就可以了！浏览器只回流了1次。
注意：还有一个很重要的特性是，如果使用appendChid方法将原dom树中的节点添加到DocumentFragment中时，会删除原来的节点。
利用DocuemntFragment的这个特性，可以通过while循环将需要绑定区域的内容添加到碎片化文档中
//碎片化文档，遍历app所有子元素，调用编译函数更新model
function nodeTofragment(node,vm) {
let fragment=document.createDocumentFragment()
let child
while(child=node.firstChild){
fragment.appendChild(child)
}
return fragment
}接下来就需要将data中的数据分别绑定到input框上和文本节点。目前闲置我们已经获取到了div的所有子节点了，就在DocumentFragment里面，然后对每一个节点进行处理，看是不是有跟vm实例中有关联的内容，如果有，修改这个节点的内容。然后重新添加入DocumentFragment中。
首先，我们写一个处理每一个节点的函数，如果有input绑定v-model属性或者有{{ xxx }}的文本节点出现，就进行内容替换，替换为vm实例中的data中的内容。
// 编译函数，把data数据更新给model
function compile(node,vm) {
let attr = node.attributes
if(node.nodeType===1){
for(let i=0;i<attr.length;i++){
if(attr[i].nodeName=='v-model'){
let name = attr[i].nodeValue
node.value=vm.data[name]
node.removeAttribute('v-model')
}
}
}
let reg=/\{\{(.*)\}\}/
if(node.nodeType===3){
if(reg.test(node.nodeValue)){
let name = RegExp.$1
name=name.trim()
node.nodeValue=vm.data[name]
}
}
}然后，在向碎片化文档中添加节点时，每个节点都处理一下。
//碎片化文档，遍历app所有子元素，调用编译函数更新model
function nodeTofragment(node,vm) {
let fragment=document.createDocumentFragment()
let child
while(child=node.firstChild){
//添加编译函数
compile(child,vm)
fragment.appendChild(child)
}
return fragment
}创建Vue的实例化函数
// vue构造函数
function Vue(options) {
let id=options.el
this.data=options.data
let dom = nodeTofragment(document.getElementById(id),this)
document.getElementById(id).appendChild(dom)
}
var vm=new Vue({
el:'app',
data:{
text:'hello world'
}
})效果如下图，已经将data中的数据绑定到节点中。
2.任务2-监听input变化view到model
对于此任务，我们可以通过事件监听器keyup，input等，来获取到最新的value，然后通过Object.defineProperty将获取的最新的value，赋值给实例vm的text，我们把vm实例中的data下的text通过Object.defineProperty设置为访问器属性，这样给vm.text赋值，就触发了set。set函数的作用一个是更新data中的text。
首先实现一个响应式监听属性的函数。一旦有赋新值就发生变化。
function defineReactive(vm,key,val) {
Object.defineProperty(vm,key,{
get:function () {
return val
},
set:function (newVal) {
if(newVal==val){
return
}
val=newVal
}
})
}然后，实现一个观察者，对于一个实例 每一个属性值都进行观察。
//观察者函数
function observe(obj) {
for(let key of Object.keys(obj)){
defineReactive(obj,key,obj[key])
}
}改写编译函数，注意由于改成了访问器属性，只要存在复制操作就行触发set，访问的方法也产生变化，同时添加了事件监听器，把实例的text值随时更新。
// 编译函数，把data数据更新给model
function compile(node,vm) {
let attr = node.attributes
if(node.nodeType===1){
for(let i=0;i<attr.length;i++){
if(attr[i].nodeName=='v-model'){
let name = attr[i].nodeValue
//增加时间监听，将结果赋值给data
node.addEventListener('input',function (e) {
vm.data[name]=e.target.value
})
node.value=vm.data[name]
node.removeAttribute('v-model')
}
}
}
let reg=/\{\{(.*)\}\}/
if(node.nodeType===3){
if(reg.test(node.nodeValue)){
let name = RegExp.$1
name=name.trim()
// node.nodeValue=vm.data[name]
new Watcher(vm,node,name)
}
}
}然后在实例函数中，观察data中的所有属性值，添加observe函数。
// vue构造函数
function Vue(options) {
let id=options.el
this.data=options.data
observe(options.data)
let dom = nodeTofragment(document.getElementById(id),this)
document.getElementById(id).appendChild(dom)
}做到这一步，打印一下结果我们发现，最终我们改变input中的内容能改变data中的数据，但是页面上的数据却没有刷新。接下来就进行下一步
3.任务3-发布订阅model到view
继续上一个问题 需要我们注意，当我们修改输入框，改变了vm实例的属性，这是1对1的。但是，我们可能在页面中多处用到 data中的属性，这是1对多的。也就是说，改变1个model的值可以改变多个view中的值。
这就需要我们引入一个新的知识点：订阅/发布者模式 订阅发布模式（又称观察者模式）定义了一种一对多的关系，让多个观察者同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察者对象。
下面这里举个简单的例子，具体的详情可自行寻找资料：
//订阅发布者模式
class EventEmitter {
constructor(){
this.listener=Object.create(null)
}
//事件订阅
on=(event,listerner)=>{
if(!event||!listerner){
return
}
if(this.listener[event]){
//如果已经存在就存入一个新的
this.listener[event].push(listerner)
}else{
//没有就创建一个新得
this.listener[event]=[listerner]
}
}
//事件发布
emit=(event,...args)=>{
if(!this.hasBind(event)){
console.log(`没有监听event}`)
return
}
this.listener[event].forEach(listener=>{
listener.call(this,...args)
})
}
//取消订阅
off=(event,listener)=>{
if(!this.hasBind(event)){
console.log(`没有订阅${event}`)
return
}
if(!listener){
delete this.listener[event]
return
}
this.listener[event]=this.listener[event].filter(item=>{
item!==listener
})
}
//事件订阅状态
hasBind=event=>{
return this.listener[event]&&
this.listener[event].length
}
}
const baseEvent = new EventEmitter()
function cb(value){
console.log("hello "+value)
}
baseEvent.on("click",cb)
baseEvent.emit("click",'2020') //打印出“hello 2020”上面的例子只是简单的做个参考，理解其中的意思就行。现在继续正文，在我们的这个实现中，我们需要在Object.defineProperty中的get中订阅我们的事情，在set中发布事件。在编译 HTML 的过程中，会为每个与数据绑定相关的节点生成一个订阅者 watcher，watcher 会将自己添加到相应属性的 dep 容器中。
我们已经实现：修改输入框内容 => 在事件回调函数中修改属性值 => 触发属性的 set 方法。接下来我们要实现的是：发出通知 dep.notify() => 触发订阅者的 update 方法 => 更新视图。这里的关键逻辑是：如何将 watcher 添加到关联属性的 dep 中。
注意： 我把直接赋值的操作改为了 添加一个 Watcher 订阅者
// 编译函数，把data数据更新给model
function compile(node,vm) {
let attr = node.attributes
if(node.nodeType===1){
for(let i=0;i<attr.length;i++){
if(attr[i].nodeName=='v-model'){
let name = attr[i].nodeValue
node.addEventListener('input',function (e) {
vm.data[name]=e.target.value
})
node.value=vm.data[name]
node.removeAttribute('v-model')
}
}
}
let reg=/\{\{(.*)\}\}/
if(node.nodeType===3){
if(reg.test(node.nodeValue)){
let name = RegExp.$1
name=name.trim()
// node.nodeValue=vm.data[name]
new Watcher(vm,node,name) //这里创建了一个订阅者
}
}
}然后就是写一个订阅者函数
function Watcher(vm,node,name) {
Dep.target=this
this.vm=vm
this.node=node
this.name=name
this.update()
}
Watcher.prototype={
get:function () {
this.value=this.vm.data[this.name]
},
update:function () {
this.get()
this.node.nodeValue=this.value
}
}首先，将自己赋给了一个全局变量Dep.target；
其次，执行了 update 方法，进而执行了 get 方法，get 的方法读取了 vm 的访问器属性，从而触发了访问器属性的 get 方法，get 方法中将该 watcher 添加到了对应访问器属性的 dep 中；
再次，获取属性的值，然后更新视图。
最后，将 Dep.target设为空。因为它是全局变量，也是 watcher 与 dep 关联的唯一桥梁，任何时刻都必须保证Dep.target只有一个值。
function defineReactive(vm,key,val) {
var dep=new Dep()
Object.defineProperty(vm,key,{
get:function () {
// 在这里进行订阅操作
if(Dep.target) {
console.log(Dep.target)
dep.on(Dep.target)
}
return val
},
set:function (newVal) {
if(newVal==val){
return
}
val=newVal
dep.emit()
console.log('新值'+newVal)
}
})
}然后写一个订阅者发布者构造函数。
function Dep() {
this.listener=[]
}
Dep.prototype={
on:function(event) {
this.listener.push(event)
},
emit:function () {
this.listener.forEach(event=>{
event.update()
})
}
}到这里基本就实现了vue的双向绑定，有点繁琐，写的也有点复杂。在这里进行记录一下，下面给上全部代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="text">{{text}}
</div>
<script>
function defineReactive(vm,key,val) {
var dep=new Dep()
Object.defineProperty(vm,key,{
get:function () {
if(Dep.target) {
console.log(Dep.target)
dep.on(Dep.target)
}
return val
},
set:function (newVal) {
if(newVal==val){
return
}
val=newVal
dep.emit()
console.log('新值'+newVal)
}
})
}
//观察者函数
function observe(obj) {
for(let key of Object.keys(obj)){
defineReactive(obj,key,obj[key])
}
}
// 编译函数，把data数据更新给model
function compile(node,vm) {
let attr = node.attributes
if(node.nodeType===1){
for(let i=0;i<attr.length;i++){
if(attr[i].nodeName=='v-model'){
let name = attr[i].nodeValue
node.addEventListener('input',function (e) {
vm.data[name]=e.target.value
})
node.value=vm.data[name]
node.removeAttribute('v-model')
}
}
}
let reg=/\{\{(.*)\}\}/
if(node.nodeType===3){
if(reg.test(node.nodeValue)){
let name = RegExp.$1
name=name.trim()
// node.nodeValue=vm.data[name]
new Watcher(vm,node,name)
}
}
}
function Dep() {
this.listener=[]
}
Dep.prototype={
on:function(event) {
this.listener.push(event)
},
emit:function () {
this.listener.forEach(event=>{
event.update()
})
}
}
function Watcher(vm,node,name) {
Dep.target=this
this.vm=vm
this.node=node
this.name=name
this.update()
}
Watcher.prototype={
get:function () {
this.value=this.vm.data[this.name]
},
update:function () {
this.get()
this.node.nodeValue=this.value
}
}
//碎片化文档，遍历app所有子元素，调用编译函数更新model
function nodeTofragment(node,vm) {
let fragment=document.createDocumentFragment()
let child
while(child=node.firstChild){
compile(child,vm)
fragment.appendChild(child)
}
return fragment
}
// vue构造函数
function Vue(options) {
let id=options.el
this.data=options.data
observe(options.data)
let dom = nodeTofragment(document.getElementById(id),this)
document.getElementById(id).appendChild(dom)
}
var vm=new Vue({
el:'app',
data:{
text:'hello world'
}
})
</script>
</body>
</html>本文到底就结束啦~
