vue2与vue3双向数据绑定的区别

墨蓝 2022-10-11 00:45 202阅读 0赞

### 前言： ###

> 新的响应式机制采用了ES6的ProxyApi，抛弃了Object.defineProperty()

### Vue2双向数据绑定存在的问题： ###

**关于对象：** Vue 无法检测 `property` 的添加或移除。由于 Vue 会在初始化实例时对`property`执行 `getter/setter`转化，所以`property`必须在 `data`对象上存在才能让 Vue 将它转换为响应式的。

**关于数组：** Vue 不能检测以下数组的变动：

当你利用索引直接设置一个数组项时，例如：`vm.items[indexOfItem] = newValue`  
当你修改数组的长度时，例如：`vm.items.length = newLength`

> 在官网深入响应式原理一章有较详细阐述，针对以上两种情况解决方法，官网也有给出答案，那就是使用`set`方法。

### 原理： ###

Vue2.0使用`Object.defineProperty`对象以及对象属性的劫持+发布订阅模式，只要数据发生变化直接通知变化 并驱动视图更新。

<input type="text" id="in"/> 输入的值为：<span id="out"></span>

### vue3.0双向数据绑定Proxy ###

Vue3.0中的响应式采用了ES6中的Proxy方法。

Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）

**语法：**

const p = new Proxy(target, handler)

参数`target`表示要使用`Proxy`包装的对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）

参数`handler`是一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理`p` 的行为

let obj = { 
        a: 1,
        b: 2
    }
    const proxy = new Proxy(obj, { 
        get: function(target, prop, receiver) { 
            return prop in target ? target[prop] : 0
        },
        set: function(target, prop, value, receiver) { 
            target[prop] = 666
        }
    })
    console.log(proxy.a) // 1
    console.log(proxy.c) // 0
    proxy.a = 10
    console.log(proxy.a) // 666
    obj.b = 10
    console.log(proxy.b) // 不是666 而是10

以上代码中`obj`是我们要代理的目标对象，`get`，`set`方法是参数`handler`的两个属性，具体如下：

`handler.get()`接收三个参数，第一个参数`target`为代理的目标对象，第二个参数`prop`是代理的目标对象的属性，第三个参数是`Proxy`或者继承`Proxy`的对象，通常是`proxy`本身。

`handler.set()`接收四个参数，其中三个参数都与`get`方法相同，唯独多出来一个`value`表示新的属性值。

上述代码表示当访问`proxy`的属性时，进行拦截判断，该属性是否是目标对象的属性，如果是那么就将其值返回出来，否则就返回`0`。

当对`proxy`上的属性进行重写时，将重写的该属性赋值为`666`。

**注意：** 此时对数据的劫持，只是劫持了代理对象`proxy`，而跟原对象`obj`没有任何关系，对`obj`进行操作，也不会监听到。

用`proxy`实现一个简易版的数据响应：

let app = document.getElementById('app')
    let input = document.getElementById('input')
    
    let obj = {  // 源数据
      text:'hello world'
    }
    
    let proxy = new Proxy(obj, { 
      set: function(target, prop, value){  // input事件触发进行劫持，触发update方法
        target[prop] = value
        update(value)
      }
    })
    
    function update(value){  // update方法用于同步dom更新
        app.innerHTML = value
        input.value = value
    }
    
    input.addEventListener('input',function(e){  // 监听input数据变化，并修改proxy的值
      proxy.text = e.target.value
    })
    
    proxy.text = obj.text // 初始化源数据