vue3动态添加属性

在Vue 3中，可以通过使用`reactive`函数和`ref`函数来动态添加属性。

1. 使用`reactive`函数动态添加属性：
`reactive`函数可以将一个普通的JavaScript对象转换为响应式对象。通过给这个对象添加新的属性，可以实现动态添加属性的效果。例如：

   import { reactive } from 'vue';

   const data = reactive({ name: 'Alice' });

   // 动态添加属性
   data.age = 20;

在上述代码中，我们使用`reactive`函数将`data`对象转换为响应式对象，并通过给`data`对象添加新的属性`age`来实现动态添加属性。

2. 使用`ref`函数动态添加属性：
`ref`函数可以将一个普通的JavaScript值转换为响应式对象。通过给这个响应式对象的`.value`属性赋值，可以实现动态添加属性的效果。例如：

   import { ref } from 'vue';

   const age = ref(20);

   // 动态添加属性
   age.value = 20;

在上述代码中，我们使用`ref`函数将`age`值转换为响应式对象，并通过给`age.value`赋值来实现动态添加属性。