vue3中reactive定义的引用类型直接赋值导致数据失去响应式

最新推荐文章于 2025-06-20 19:34:50 发布

原创最新推荐文章于 2025-06-20 19:34:50 发布 · 1w 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

vue 同时被 2 个专栏收录

13 篇文章

订阅专栏

5 篇文章

订阅专栏

本文探讨了Vue3中使用reactive定义的引用类型数据直接赋值会导致失去响应式的问题。通过示例代码说明，当尝试直接修改reactive数组时，页面不会更新。正确做法是修改对象的属性，如`userMenu.arr=[1,2,3]`，以保持响应性。总结指出，修改对象属性而非直接赋值是确保Vue3响应式的关键。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3中reactive定义的引用类型直接赋值导致数据失去响应式

<script setup>
import {reactive,onMounted} from 'vue'
const userMenu=reactive([])
onMounted(()=>{
	userMenu=[1,2,3]
})
</script>

<template>
	<div>示例：{{userMenu}}</div>
</template>

<style>

</style>

如上代码，我们定义了一个userMenu的reactive数组，我们在onMounted生命周期直接给userMenu重新赋值为【1,2,3】，但是我们打开页面显示的仍然是之前的空数组

这是因为，reactive定义的数组或者对象，不能直接赋值修改，否则定义的数据userMenu将失去响应性。

我们可以按照如下代码：

<script setup>
import {reactive,onMounted} from 'vue'
const userMenu=reactive({
	arr:[]
})
onMounted(()=>{
	userMenu.arr=[1,2,3]
})
</script>

<template>
	<div>示例：{{userMenu.arr}}</div>
</template>

<style>

</style>

将空数组作为对象的一个属性，我们直接修改arr属性为【1,2,3】，此时userMenu不会失去响应性，页面内容也就跟着变化成【1,2,3】