$set在vue3中的使用
时间: 2024-05-16 19:18:45 浏览: 60
在Vue 3中,`$set`方法用于在响应式对象上添加一个新的响应式属性。它的使用方式如下:
```vue
<template>
<div>
<button @click="addProperty">添加属性</button>
<p>{{ obj }}</p>
</div>
</template>
<script>
import { ref, reactive } from 'vue';
export default {
setup() {
const obj = reactive({});
const addProperty = () => {
// 使用$set添加新的属性
// 第一个参数是目标对象
// 第二个参数是要添加的属性名
// 第三个参数是新属性的初始值
// 这个新属性将成为响应式的
$set(obj, 'newProperty', '新属性的初始值');
};
return {
obj,
addProperty,
};
},
};
</script>
```
在上面的示例中,我们先通过`reactive`创建了一个响应式对象`obj`。然后,在`addProperty`方法中,我们使用`$set`方法添加了一个名为`newProperty`的新属性,并赋予它初始值。这样,`obj`对象就会自动更新并保持响应式。
需要注意的是,在Vue 3中,`$set`方法不再是Vue实例的方法,而是全局函数,因此可以在任何地方使用。