vue3 响应式 API 之 reactive

在Vue 3中，reactive API用于创建响应式对象。响应式对象的状态在组件外部被改变时，也能触发视图的更新。

下面是一个使用reactive的基本示例：




import { reactive } from 'vue';
 
// 创建响应式状态
const state = reactive({
  count: 0
});
 
// 更改响应式状态
function increment() {
  state.count++;
}
 
// 在组件的setup函数中返回响应式状态，以便其他选项可以访问它
export default {
  setup() {
    return {
      state,
      increment
    };
  }
};

在模板中，你可以直接绑定响应式对象的属性：




<template>
  <div>{{ state.count }}</div>
  <button @click="increment">Increment</button>
</div>

每当点击按钮时，state.count的值会增加，并且由于state是响应式的，视图也会自动更新。

vue3 响应式 API 之 reactive

评论已关闭

推荐阅读