Vue双向数据绑定的原理与实践

时间 2021-08-13

标签 html vue json 数组异步 this 编码双向绑定 code htm 栏目 HTML 繁體版

原文原文链接

一、Vue双向数据绑定的原理

说到Vue的双向数据绑定，就得提到一种方法，就是数据劫持；Vue就是经过数据劫持，结合发布者-订阅者模式实现的，而此方法实现的核心离不开js中对象的一个方法，即：html

Object.defineProperty(data,'name',{})
//data为要操做的对象
//name对应监听的具体属性名称
//第三个参数未对应属性的描述，及具体怎么样操做对象数据

Object.defineProperty方法用来监听对象中数据的变化，该方法有三个参数，第一个参数为要操做的对象，第二个为要监听对象属性的名称，第三个为属性描述，对应的是个json对象，在里边能够设置get和set方法，当调用属性值或者改变属性值会被get和set方法捕获到，以此进行相关操做。在Vue中，当给Vue对象设置data后，Vue会遍历data对象中的全部属性值，使用Object.defineProperty()方法设置get和set方法，以此实现数据的双向绑定。vue

二、写一段程序模拟Vue的双向数据绑定

<html>
    <body>
        <input id='enterEl' type='text'>
        <div id='showEl'></div>
        <script>
            let data = {inputValue:'hh'}
            Object.defineProperty(data,'inputValue',{
                get: function(){
                    return data;
                },
                set: function(newData){
                    document.getElementById('enterEl').value = newData;
                    document.getElementById('showEl').innerHTML = newData;
                }
            })
            document.getElementById('enterEl').addEventListener('keyup',function(){
                data.inputValue = this.value;
            })
        </script>
    </body>
</html>

三、Vue中不会进行视图刷新的三种状况

3.1 由于Vue进行响应式变化的是对象，不能是数组，可是某个对象是数值这样也是能够的，这也说明了Vue中data最外层必须是一个对象的缘由，另外若是对象中的属性又是对象，则Vue会一层层的递归解析出来，进行相应式处理。当数组中的数据经过push、contact等js指令中进行处理会出现一个新的数组，所以这样处理后，会进行视图刷新的。可是若是进行list[i]=newValue这样的处理时，Vue并不会进行数据的刷新与视图渲染，这根本质上Object.defineProperty()方法接收的就是对象有关系，一样的当改变list.length=newValue也不会进行处理。
3.2 再就是原先data中没有的属性，也就是本身添加的属性并无在data中，这样的状况也不能进行响应式操做的，能够利用Vue.set方法进行添加，这个能够自行调研一下。
3.3 由于Vue中UI的渲染是经过异步进行的，因此有些操做直接进行，DOM中尚未新数据，致使调用代码时尚未数据，所以没有进行刷新，这样的状况时，能够在调用数据更新以后的代码，等待Vue完成DOM的更新后再获取此节点，代码中用Vue.nextTick(callback)包裹起来，在callback中进行编码，例如

<script>
    //...
	this.message = 'new Data'
        console.log(this.$el.textContent) //    仍是原来的消息
        this.$nextTick(function(){
		console.log(this.$el.textContent) // UI刷新了最新的消息
     })
    //...
</script>