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

最新推荐文章于 2023-07-10 12:04:32 发布

小刘先生很努力

最新推荐文章于 2023-07-10 12:04:32 发布

阅读量395

点赞数

本文链接：https://blog.csdn.net/lzfengquan/article/details/118937519

版权

目前3.0已经发布了，自己也尝试在2的基础上升级3版本项目，发现3确实变了好多，例如钩子函数就大量减少了。

那么原理也是有变化的
用过vue的人都知道 vue2.x实现双向数据绑定的原理是
利用

Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的，当数据发生改变发出通知。

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

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

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

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

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

用代码看看vue2.x的原理

	<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只能监听某个属性，不能对全对象监听

另外

1、vue-cli2.0与3.0在目录结构方面，有明显的不同
2、 vue-cli3.0移除了配置文件目录，config 和 build 文件夹
3、同时移除了 static 静态文件夹，新增了 public 文件夹，打开层级目录还会发现， index.html 移动到 public 中
4、3.0 中 config文件已经被移除，但是多了.env.production和env.development文件，除了文件位置，实际配置起来和2.0没什么不同
5、没了config文件，跨域需要配置域名时，从config/index.js 挪到了vue.config.js中，配置方法不变。
6、在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件

请多指教，谢谢

小刘先生很努力

关注

0
点赞
踩
4

收藏

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

目前3.0已经发布了，自己也尝试在2的基础上升级3版本项目，发现3确实变了好多，例如钩子函数就大量减少了。那么原理也是有变化的用过vue的人都知道 vue2.x实现双向数据绑定的原理是利用Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的，当数据发生改变发出通知。在MDN上对该方法的说明是：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。
复制链接

扫一扫