Vue 3 响应式原理：Proxy 与 Reflect

时间：2026年08月12日 04:50:02 浏览：0

Vue 2 vs Vue 3 响应式

Vue 2：Object.defineProperty，只能劫持已有属性

Vue 3：Proxy，可代理整个对象，支持动态增删属性

简单实现

function reactive(target) {

    return new Proxy(target, {

        get(obj, key, receiver) {

            track(obj, key); // 依赖收集

            return Reflect.get(obj, key, receiver);

        },

        set(obj, key, value, receiver) {

            const result = Reflect.set(obj, key, value, receiver);

            trigger(obj, key); // 派发更新

            return result;

        }

    });

}



const state = reactive({ count: 0 });

state.count++; // 触发 set

ref 与 reactive 区别

import { ref, reactive } from 'vue';



const count = ref(0);       // 基本类型用 ref

const state = reactive({    // 对象用 reactive

    name: 'test',

    list: []

});



// 访问值需 .value

console.log(count.value);

Proxy 让 Vue 3 的响应式更强大、更高效。