vue2与vue3 响应式的区别

Vue2响应式

vue2 的响应式原理是利⽤es5 的⼀个 API ，Object.defineProperty()对数据进⾏劫持结合发布订阅模式的⽅式来实现的。

• 优点：
  兼容性好，支持 IE9。
• 缺点：

1. 只能劫持对象的属性（key值.Object.key()）,因此需要对每个对象的每个属性进行遍历。
2. 无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。是通过重写数据的操作方法（push、unshift…）来对数组进行监听的。
3. 不能对 es6 新产生的 Map,Set 这些数据结构做出监听。

Vue3响应式

vue3 中使⽤了 es6 的 proxy API 对数据代理，通过 reactive() 函数给每⼀个对象都包⼀层 Proxy，通过 Proxy 监听属性的变化，从⽽ 实现对数据的监控。
简而言之，Proxy 可以劫持整个对象，并返回一个新的对象。

• 优点：

1. 可以直接监听对象而非属性；
2. 可以直接监听数组的变化；
3. 有多种拦截方法，不限于 apply、ownKeys、deleteProperty、has 等是Object.defineProperty 不具备的；
   返回的是一个新对象，我们可以只操作新的对象达到目的，而 Object.defineProperty 只能遍历对象属性直接修改。

Proxy的优势

1.defineProperty只能监听某个属性，不能对全对象监听
2.可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
3.可以监听数组，不⽤再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作，完美⽀持对数组的监听。 （vue3.x可以检测到数组内部数据的变化）

defineProperty

对象

复制// 简单实现
// 假设app为vue实例
const app = {}
const data = {
    name: 'zs',
    age: 18
}
// 遍历data,将data属性绑定到app上,对属性的读取和修改进行拦截
Object.entries(data).forEach(([prop, value]) => {
    let initValue = value;
    Object.defineProperty(app, prop, {
        get() {
            console.log('defineProperty内部监视  执行get')
            return initValue
        },
        set(newValue) {
            console.log('defineProperty内部监视  执行set');
            initValue = newValue
        }
    })
})

console.log(app.name); // defineProperty内部监视  执行get zs
app.name = 'ls'; // defineProperty内部监视  执行set
app.sex = '男'; // 不会执行set方法
console.log(app.sex); // 不会执行get方法

数组

复制// 简单实现
const obj = {
    push() {},
    pop() {},
    shift() {},
    unshift() {},
    splice() {},
    sort() {},
    reverse() {}
}
Object.keys(obj).forEach(key => {
    Object.defineProperty(obj, key, {
        value(...args) {
            console.log('args', args);
            return Array.prototype[key].call(this, ...args)
        }
    })
})

const arr = [];
arr.__proto__ = obj;
arr.push(1, 2); // args[1,2]
console.log(arr[0]); // 1

Proxy

复制// 简单实现:
const user = {
    name: 'zs',
    age: 18
}
const proxy = new Proxy(user, {
    get(target, prop) {
        console.log('劫持get操作', prop)
        return Reflect.get(target, prop)
    },
    set(target, prop, val) {
        console.log('劫持set()', prop, val);
        return Reflect.set(target, prop, val)
    },
    deleteProperty(target, prop) {
        console.log('劫持delete', prop);
        return Reflect.deleteProperty(target, prop)
    },
})

// 读取属性值
console.log(proxy === user);
console.log(proxy.name); // 劫持get() name zs
// 设置属性值
proxy.name = 'ls'; // 劫持set() name ls
proxy.age = 19; // 劫持set() age 19
console.log(user); // { name: 'ls', age: 19 }
// 添加属性
proxy.sex = '男'; // 劫持set() sex 男
console.log(user); //{ name: 'ls', age: 19, sex: '男' }
// 删除属性
delete proxy.sex; // 劫持delete sex
console.log(user); // { name: 'ls', age: 19 }