ts+vue3.0 如何声明响应式对象

2023-07-12 00:03| 来源: 网络整理| 查看: 265

在 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({ name: "Tom", age: 18, gender: "male" });

在以上两个例子中，将对象声明为响应式对象后，当其属性发生变化时，组件将自动重新渲染并更新视图。

请注意，Composition API 与 options API 不兼容，因此您需要先学习 Composition API，才能在 Vue 3 中声明响应式对象。

【本文地址】

公司简介

联系我们