Vue3 核心语法：Setup、Ref、Reactive 和 Watch 深度解析

Vue3 核心语法解析

Vue3 中引入了 Composition API，为开发人员提供了更灵活、更具表达力的方式来构建组件和应用程序。Composition API 中的四个核心语法特性是 Setup、Ref、Reactive 和 Watch。

1. Setup 函数

Setup 函数是 Composition API 的核心，它允许我们在组件中定义响应式数据、计算属性和方法。Setup 函数接收两个参数：props 和 context。props 是组件的属性对象，context 是组件的上下文对象，提供对组件生命周期、插槽和其他功能的访问。

2. Ref

Ref 是一个函数，用于创建响应式引用。响应式引用是指一个可以被 Vue 跟踪和更新的 JavaScript 变量。Ref 函数接收一个初始值作为参数，并返回一个包含该值的对象。Ref 对象具有一个 value 属性，用于访问和更新引用值。

3. Reactive

Reactive 函数用于创建一个响应式对象。响应式对象是指一个可以被 Vue 跟踪和更新的 JavaScript 对象。Reactive 函数接收一个对象作为参数，并返回一个新的响应式对象。新的响应式对象与原始对象具有相同的数据结构，但是当响应式对象的属性发生改变时，Vue 会自动更新视图。

4. Watch

Watch 函数用于监听响应式对象的属性值的变化。Watch 函数接收两个参数：要监听的响应式对象和一个回调函数。当监听的响应式对象的属性值发生改变时，回调函数会被触发。

实例演示

为了更好地理解这些核心语法的用法，我们通过一个简单的示例来说明。假设我们有一个组件，其中包含一个计数器，我们可以通过点击按钮来增加或减少计数器。

1. 导入必要的库

import { createApp, ref, reactive, watch } from 'vue';

2. 定义组件

const App = {
  setup() {
    // 创建一个响应式引用，用于存储计数器值
    const count = ref(0);

    // 创建一个响应式对象，用于存储按钮是否被点击过
    const isButtonClicked = reactive({ value: false });

    // 监听 isButtonClicked 对象中 value 属性的变化
    watch(isButtonClicked, (newValue, oldValue) => {
      if (newValue) {
        // 当按钮被点击时，增加计数器值
        count.value++;
      }
    });

    // 返回 setup 函数的返回值
    return {
      count,
      isButtonClicked,
    };
  },

  template: `
    <div>
      <button @click="isButtonClicked.value = true">+</button>
      <span>{{ count }}</span>
    </div>
  `,
};

3. 创建 Vue 实例

const app = createApp(App);
app.mount('#app');

总结

通过这个简单的示例，我们演示了 Vue3 中 Setup、Ref、Reactive 和 Watch 语法的用法。这些核心语法特性使得 Vue3 更加灵活和强大，可以帮助我们轻松构建高效、灵活的单页面应用程序。