《vue3》reactivity API（vue3的$set呢?）

### Vue3 中使用 TypeScript 的 `this.$set` 方法及其替代方案 在 Vue 3 和 TypeScript 结合使用的场景下，官方推荐不再直接使用 `this.$set()` 来更新响应式数据。取而代之的是利用 Composition API 或者通过定义类型的 reactive 对象来处理状态管理。 #### 使用 Reactive 函数创建响应式对象并修改其属性 当需要添加新的响应式属性时，可以借助于 `reactive` 创建的对象，并配合 `Vue.set` 或 ES6 的方式实现相同效果： ```typescript import { defineComponent, reactive } from &#39;vue&#39;; export default defineComponent({ setup() { const state = reactive({ message: "Hello" }); function updateMessage(newMsg: string) { // 正确的方式：使用 Vue 提供的方法设置新属性 Object.assign(state, { extraInfo: newMsg }); // 另一种方式：如果确实要动态增加属性，则可考虑如下做法 // import { set } from &#39;@vue/reactivity&#39;; // set(state, &#39;extraInfo&#39;, newMsg); } return { state, updateMessage }; } }); ``` 对于已经存在的属性而言，可以直接赋值操作即可保持响应性[^1]。 #### 利用 Setup Script 方式简化类型声明 为了更好地支持 TypeScript 类型推断，在组件选项中采用 `<script setup>` 语法糖能够更方便地编写带有强类型提示的代码片段: ```html <template> <div>{{ counter }}</div> </template> <script lang="ts" setup> import { ref } from &#39;vue&#39;; const counter = ref<number>(0); function incrementCounter(value: number): void { counter.value += value; } </script> ``` 这种方式不仅提高了开发效率还增强了编译期错误检测能力[^2]。