Vue 3 响应式原理与组合式 API

Vue 3 响应式原理与组合式 API

Vue 3 使用 Proxy 重构响应式，并引入组合式 API 提升逻辑复用。

1. Proxy 与 Reflect

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;

        }

    });

}

2. ref 与 reactive

import { ref, reactive } from 'vue';

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

const state = reactive({    // 对象

    name: 'test',

    list: []

});

3. 组合式 API

<script setup>

import { ref, onMounted } from 'vue';

const count = ref(0);

const increment = () => count.value++;



onMounted(() => console.log('组件挂载'));

</script>

4. 自定义组合函数

function useCounter(initial = 0) {

    const count = ref(initial);

    const increment = () => count.value++;

    return { count, increment };

}

Vue 3 的组合式 API 让逻辑复用更优雅。