在 Vue 3 中,响应式对象的声明方式与 Vue 2 略有不同。通过使用 reactive 函数定义一个响应式对象,并使用 ref 函数定义一个包装器包裹普通 JavaScript 对象,可以使其变为响应式对象。此外,在 Vue 3 中,不再需要使用 vue-class-component 和 vue-property-decorator,只需使用新的 Composition API 即可。
下面是一些示例代码:
通过 reactive 函数定义响应式对象:
import { reactive } from 'vue';
interface Person {
name: string;
age: number;
gender: string;
}
const person: Person = reactive({
name: "Tom",
age: 18,
gender: "male"
});
通过 ref 函数定义响应式包装器:
import { ref } from 'vue';
interface Person {
name: string;
age: number;
gender: string;
}
const person = ref<Person>({
name: "Tom",
age: 18,
gender: "male"
});
在以上两个例子中,将对象声明为响应式对象后,当其属性发生变化时,组件将自动重新渲染并更新视图。
请注意,Composition API 与 options API 不兼容,因此您需要先学习 Composition API,才能在 Vue 3 中声明响应式对象。