vue3：直接修改reative的值，页面却不响应，这是什么情况？

目录

前言

错误示范：

解决办法：

1.使用ref

2.reative多套一层

3.使用Object.assign

---

前言：

        今天看到有人在提问，问题是这样的，我修改了reative的值，数据居然失去了响应性，页面毫无变化，这是什么情况？本着好奇心害死猫的原则，我就看了下，我直呼好家伙！

错误示范：

请看以下代码，大概是这个样子的：

<template>
	<view>
		<view class="">{
   
   { user }}</view>
		<button @click="setUser">修改user</button>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';

	let user = reactive({
		name: 'jay'
	});

	const setUser = () => {
		user = {
			name: 'qianjue',
			age: 20
		}
	};
</script>

此时我无论如何点击改变user按钮，页面岿然不动 

 本着严谨的原则，我们在setUser内打印下user的值，观察观察

	const setUser = () => {
		console.log(user);
		user = {
			name: 'qianjue',
			age: 20
		}
	};

 红色框是我们第一次点击按钮的打印值，绿色框是我们之后点击的打印值，我们都很清楚这两个值所代表的意义，当我们第一次点击之后，我们的user对象变成了一个普通的对象，并不是由proxy的代理对象，所以根本不具有响应性。

这个时候，就会有人想点子了，不是说我是个普通对象，不是代理的吗？我给他重新赋值一个reative，这不就完美解决？

	const setUser = () => {
		console.log(user);
		user = reactive({
			name: 'qianjue',
			age: 20
		})
	};

然后点击按钮发现，页面还是毫无变化，user的打印值如下，嗯？感觉没毛病啊，莫非是vue3的bug？

 原因：Vue 的响应式系统是通过属性访问进行追踪的，因此我们必须始终保持对该响应式对象的相同引用。这意味着我们不可以随意地“替换”一个响应式对象，因为这将导致对初始引用的响应性连接丢失

这可不是我说的，是vue官网说的---- vue响应式文档

解决办法：

1.使用ref

	let user = ref({
		name: 'jay'
	});

	const setUser = () => {
		console.log(user.value);
		user.value = {
			name: 'qianjue',
			age: 20
		}
	};

2.reative多套一层

<template>
	<view>
		<view class="">{
   
   { state.user }}</view>
		<button @click="setUser">修改user</button>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	const state = reactive({
		user: {
			name: 'jay'
		}
	})
	const setUser = () => {
		console.log(state.user);
		state.user = {
			name: 'qianjue',
			age: 20
		}
	};
</script>

3.使用Object.assign

	const user = reactive({
		name: 'jay'
	})

	const setUser = () => {
		console.log(user);
		Object.assign(user, {
			name: 'qianjue',
			age: 20
		})
	};

小声bb：我从未使用过此方法。。。