vue reactive

作者：鱼宝宝睡觉觉发布日期:2025-06-11 浏览:31

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

// 首先，确保你已经安装了 Vue 3
// 可以通过 npm 安装：npm install vue@next

import { reactive } from 'vue';

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

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

function updateMessage(newMessage) {
  state.message = newMessage;
}

// 解释说明：
// 1. `reactive` 函数将普通对象转换为响应式对象。
// 2. 当 `state` 对象中的属性发生变化时，依赖这些属性的视图会自动更新。
// 3. 在 Vue 组件中，你可以将 `state` 绑定到模板中，从而实现双向数据绑定。

// 示例代码展示如何使用 `reactive` 创建响应式对象，并通过函数修改其属性。

上一篇：vue3watch监听

下一篇：vue 组件