vue3 reactive

作者：若此生已赞。发布日期:2025-08-16 浏览:38

// 使用 Vue 3 的 reactive 函数创建响应式对象

// 首先，确保你已经安装了 Vue 3 并正确引入
import { reactive } from 'vue';

// 创建一个响应式对象
const state = reactive({
  count: 0,
  message: 'Hello Vue 3!'
});

// 修改 state 中的属性会触发视图更新
function increment() {
  state.count++;
}

// 解释：
// 1. `reactive` 函数接收一个普通对象作为参数，并返回一个响应式对象。
// 2. 对这个响应式对象的任何修改都会触发依赖它的视图更新。
// 3. 在 Vue 组件中，你可以将 `state` 绑定到模板中，当 `state` 发生变化时，视图会自动更新。

// 示例：在 Vue 组件中使用 reactive
export default {
  setup() {
    // 定义响应式数据
    const state = reactive({
      count: 0,
      message: 'Hello Vue 3!'
    });

    // 返回响应式数据和方法给模板
    return {
      state,
      increment
    };
  }
};

上一篇：vue i18n

下一篇：vue :style