• 【双向数据绑定原理 vue2.0 与 vue3.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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    在这里插入图片描述

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


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    相比于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实现的差异）

  • 相关阅读:
    Ubuntu 手动配置DNS
    罗丹明 800，CAS号：101027-54-7
    公众号点击原文下载文件怎么设置
    APP个人信息检查监管部门要求
    高速电路设计笔记----第二章
    C# TCP通讯大族激光打标机
    2.06_python+Django+mysql实现pdf转word项目_项目开发-创建模型
    大数据之数据质量检查
    【CTF】Crypto Writeup【思路已经告诉你了】
    (计算机组成原理)第五章中央处理器-第七节1：多处理器的基本概念
  • 原文地址：https://blog.csdn.net/m0_46839072/article/details/126393900