reactive vue3
时间: 2023-09-18 21:10:46 浏览: 57
在Vue3中,reactive是一种实现响应式数据的方法。它使用ES6的Proxy来实现数据的响应式。与Vue2中使用defineProperty不同,Vue3中的reactive可以直接将普通对象或数组转化为响应式数据。但需要注意的是,如果想要更新界面上的数据绑定,需要对数据进行重新赋值,而不是直接修改原数据。这是因为reactive不允许直接操作数据,需要使用新的数据来替代原数据。使用reactive的示例代码如下:
```vue
<template>
<div>
<p>{{ msg.num }}</p>
<button @click="c">button</button>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
name: 'App',
setup() {
let msg = reactive({ num: 0 });
function c() {
console.log(msg);
msg.num++;
}
return { msg, c };
}
}
</script>
```
在上述示例中,我们使用reactive将一个对象{ num: 0 }转化为响应式数据,并在模板中使用msg.num进行数据绑定。当点击按钮时,会触发c函数,将msg.num的值加1。这样,界面上的数据会得到更新。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [Vue3.0中的reactive](https://blog.csdn.net/weixin_44283432/article/details/111190176)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [深入聊一聊vue3中的reactive()](https://blog.csdn.net/lwf3115841/article/details/128599479)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]