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

最新推荐文章于 2023-07-28 15:24:35 发布

冰sir2021

最新推荐文章于 2023-07-28 15:24:35 发布

阅读量207

点赞数 1

分类专栏：前端随笔文章标签： javascript 前端 html5 vue

本文链接：https://blog.csdn.net/libingxit/article/details/119451287

版权

前端随笔专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

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

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

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

2、写一段程序模拟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>

3、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>

冰sir2021

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue双向数据绑定的原理与实践

1、Vue双向数据绑定的原理说到Vue的双向数据绑定，就得提到一种方法，就是数据劫持；Vue就是通过数据劫持，结合发布者-订阅者模式实现的，而此方法实现的核心离不开js中对象的一个方法，即：Object.defineProperty(data,'name',{})//data为要操作的对象//name对应监听的具体属性名称//第三个参数未对应属性的描述，及具体怎么样操作对象数据Object.defineProperty方法用来监听对象中数据的变化，该方法有三个参数，第一个参数为要操作的对象，第
复制链接

扫一扫