上手 Vue3 核心特性：Vue3 响应式函数的使用

在Vue3的众多核心特性中，响应式函数的运用极大地提升了开发效率与数据处理的灵活性。理解并掌握这些响应式函数，能让开发者更高效地构建动态、交互式的用户界面。

Vue3 响应式函数的基础是 reactive 与 ref。reactive 用于创建一个响应式的对象或数组。例如，在一个简单的计数器应用中，我们可以使用 reactive 创建一个包含计数变量的对象：

import { reactive } from 'vue';
const state = reactive({
    count: 0
});

这样，当 count 的值发生变化时，Vue 会自动检测到并更新与之绑定的 DOM 元素。

ref 则更灵活，它可以创建一个响应式的基本数据类型或对象。当我们需要在模板中使用一个简单的响应式变量时，ref 就非常实用：

import { ref } from 'vue';
const message = ref('Hello, Vue3!');

在模板中，我们可以直接使用 message.value 来显示其值。

除了基础的响应式创建函数，Vue3 还提供了 computed 与 watch 这两个强大的响应式函数。computed 用于创建计算属性，它会根据依赖项的变化自动更新计算结果。例如，我们有一个购物车应用，需要计算商品总价：

import { reactive, computed } from 'vue';
const cart = reactive({
    items: [
        { price: 10, quantity: 2 },
        { price: 15, quantity: 1 }
    ]
});
const totalPrice = computed(() => {
    let sum = 0;
    cart.items.forEach(item => {
        sum += item.price * item.quantity;
    });
    return sum;
});

watch 则用于监听一个或多个响应式数据的变化，并在变化时执行相应的回调函数。比如，我们要监听购物车中商品数量的变化，并在变化时打印日志：

import { reactive, watch } from 'vue';
const cart = reactive({
    items: [
        { price: 10, quantity: 2 },
        { price: 15, quantity: 1 }
    ]
});
watch(() => cart.items, (newValue, oldValue) => {
    console.log('商品数量发生变化');
}, { deep: true });

Vue3 的这些响应式函数，无论是 reactive、ref 的基本创建，还是 computed、watch 的高级运用，都为开发者提供了丰富且强大的数据处理手段。通过合理使用这些响应式函数，开发者能够轻松构建出数据驱动、高效响应的应用程序。