vue3 this.$set();
时间: 2023-08-27 07:22:41 浏览: 91
vue中 this.$set的用法详解
5星 · 资源好评率100%
Vue.js 3 中已经不再使用 `this.$set()` 方法来响应式地添加或修改对象的属性。相反,Vue 3 推荐使用新的 `reactive` API 或 `ref` API 来实现响应式数据。
如果你想要响应式地添加或修改对象的属性,可以使用 `reactive` API。首先,需要导入 `reactive` 函数:
```javascript
import { reactive } from 'vue'
```
然后,可以使用 `reactive` 函数创建一个响应式对象:
```javascript
const obj = reactive({ foo: 'bar' })
```
现在,你可以直接添加或修改 `obj` 对象的属性,而不需要使用 `this.$set()`:
```javascript
obj.baz = 'qux'
```
如果你需要响应式地添加或修改数组的元素,可以使用 `ref` API。首先,需要导入 `ref` 函数:
```javascript
import { ref } from 'vue'
```
然后,可以使用 `ref` 函数创建一个响应式数组:
```javascript
const arr = ref([1, 2, 3])
```
现在,你可以直接添加或修改 `arr` 数组的元素,而不需要使用 `this.$set()`:
```javascript
arr.value.push(4)
```
总结起来,Vue 3 引入了新的响应式 API,使得操作数据更加直观和简洁,不再需要使用 `this.$set()` 方法。
阅读全文