vue2.x-理解双向绑定

126 阅读5分钟

1.前言

每当被问到Vue数据双向绑定原理的时候,大家可能都会脱口而出:Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更新。虽然一句话把大概原理概括了,但是其内部的实现方式还是值得深究的,本文就以通俗易懂的方式剖析Vue内部双向绑定原理的实现过程。

2.思路分析

所谓MVVM数据双向绑定,即主要是:数据变化更新视图,视图变化更新数据。如下图: image.png

也就是说:

  • 输入框内容变化时,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中的数据绑定到节点中。

CUZTOID(R5)~1$9%0DTG0DU.png

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>

本文到底就结束啦~