【双向数据绑定原理 vue2.0 与 vue3.0】

꒰ঌsnail໒꒱

已于 2022-08-18 17:43:01 修改

阅读量133

点赞数

分类专栏： Vue框架文章标签： javascript 前端 vue.js

于 2022-08-18 09:08:45 首次发布

本文链接：https://blog.csdn.net/m0_46839072/article/details/126393900

版权

Vue框架专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、什么是双向数据绑定？

vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是vue的精髓之处了。

二、双向数据绑定原理 vue2.0

vue的人都知道 vue2.x实现双向数据绑定的原理是利用Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的，当数据发生改变发出通知。

在MDN上对该方法的说明是：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。

它接收三个参数，要操作的对象，要定义或修改的对象属性名，属性描述符。重点就是最后的属性描述符。

属性描述符是一个对象，主要有两种形式：数据描述符和存取描述符。

这两种对象只能选择一种使用，不能混合两种描述符的属性同时使用。上面说的 get 和 set 就是属于存取描述符对象的属性。

然后我们可以通过在存取描述符中的get和set方法内写入自定义的逻辑来实现对象获取属性和设置属性时的行为。

<body>
	    <div>
	        <input type="text" id="input">
	        <span id="text"></span>
	     </div>
	</body>
	 <script>
		   var obj = {};
	     Object.defineProperty(obj, 'prop', {
          get: function () {
	           return val;
	        },
        set: function (newVal) {
		       val = newVal;
	          document.getElementById('text').innerHTML = val;
	      }
	   });
     document.addEventListener('keyup', function (e) { 
     	obj.prop = e.target.value;
     });
</script>

在这里插入图片描述

三、Vue 3.0使用ES6的新特性porxy

原理：通过ES6的新特性proxy来劫持数据，当数据改变时发出通知

来看看代码的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <input type="text" id="input">
        <span id="text"></span>
    </div>
</body>
</html>
<script>
    var obj = {};
    var newObj= new Proxy(obj, {
        // target就是第一个参数obj, receive就是返回的obj(返回的proxy对象)
        get: function (target, key, receive) {
            // 返回该属性值
            return target[key];
        },
        set: function (target, key, newVal, receive) {
            // 执行赋值操作
            target[key] = newVal;
            document.getElementById('text').innerHTML = target[key];
        }
    })
    document.addEventListener('keyup', function (e) {
        newObj[0] = e.target.value;
    });
</script>

相比于vue2.x，使用proxy的优势如下区别：

1、可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
2、 vue3.x可以监听到数组内部数据的变化，不用再去单独的对数组做特异性操作
3、 proxy可以劫持整个对象，并返回一个新对象
4、 Vue2.x版本中的双向绑定不能检测到下标的变化
5、 defineProperty只能监听某个属性，不能对全对象监听

四、思考

在其他博客发现的一个问题，它说既然proxy作为ES6的语法并且还有这么多的优点为啥不在之前2.X版本中就用Proxy?(ES6可比vue2.0版本出现的早)

其实还是兼容性的问题，毕竟作为es6的新语法兼容性不好，最主要就是proxy不能用polyfill来兼容（polyfill主要抚平不同浏览器之间对js实现的差异）

꒰ঌsnail໒꒱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【双向数据绑定原理 vue2.0 与 vue3.0】

vue的人都知道 vue2.x实现双向数据绑定的原理是利用Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的，当数据发生改变发出通知。在MDN上对该方法的说明是：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。它接收三个参数，要操作的对象，要定义或修改的对象属性名，属性描述符。属性描述符是一个对象，主要有两种形式：数据描述符和存取描述符。......
复制链接

扫一扫

专栏目录