Vue2使用 Object.defineProperty 来进行数据劫持 实现响应式

 Vue 3 使用Proxy对象来 实现响应式

Vue2使用 Object.defineProperty来进行数据劫持

•  Object.defineProperty在初始化实例时就会使用对数据进行响应式处理，且只会针对单个已定义的属性进行处理。

后添加的属性无法走到Object.defineProperty 这一步，所有无法更新视图

var vm = new Vue({
    el: '#app',
    data: {
        user: {
            name: 'John'
        }
    }
});

直接添加新属性，添加age属性后，视图不会自动更新。
vm.user.age = 30

必须使用$set(target,index,val)来改变数据和视图，但是在vue3中不存在$set 。

 
当你直接通过索引修改数组元素时，Vue 2 无法检测到这种变化。

var vm = new Vue({
    el: '#app',
    data: {
        items: ['a', 'b', 'c']
    }
});

通过索引修改数组元素
vm.items[1] = 'd';
视图也不会更新，因为 Vue 2 没有对这种操作进行响应式跟踪，

 使用push、pop、splice $set(target,index,val)来改变数据和视图

  
 Vue 3 使用Proxy对象来实现响应式。

Proxy可以代理整个对象，

•  它是对整个对象进行代理。
• Proxy的handler对象中的拦截器方法（如get和set）会在访问或修改目标对象的任何属性时被触发，不管这个属性是在代理之前就存在还是后来添加的。

添加新属性或修改属性时，只要被Proxy代理的，那么这些变化都能被检测到。

import { reactive } from 'vue';
const state = reactive({
    user: {
        name: 'John'
    }
});

新增属性
state.user.age = 30;
视图会自动更新，

因为reactive函数利用Proxy创建了响应式对象，能够捕获对象属性的新增、删除和修改等操作。

Vue 3 对数组的变更检测也进行了优化

 在 Vue 2 中推荐使用特定的数组变异方法（如push、pop、splice等）来触发视图更新，

但在 Vue 3 中，通过Proxy的特性，即使是直接修改数组元素（例如通过索引修改）也能被正确检测到，从而更新视图。