Vue3问题:为什么有时候数据变了，但视图没有变?经常有人忽略!

笔者 | 大澈

大家好，我是大澈！

今天的问题很简单很基础，大家一看就懂。

但是在繁忙的工作中，却常常不经意的被我们所忽略，此文仅作为提醒，让大家有个印象。

欢迎大家在周末的问题留言推文中，积极进行问题留言，把这周工作日遇到的问题，分享给大家瞧瞧，或者直接进问答群，一起交流唠唠。

遇到难题，遇到有共鸣的问题，一起讨论，一起沉淀，一起成长。

ONE

需求分析，问题描述

一、需求

切换多语言时，让展示的变量重新赋值，并更新视图。

说明：此处需求仅为一个组件做多语言功能，所以为了偷懒方便，就直接写了个简易的i18n效果。

二、问题

1、如何正确定义响应式数据？

2、为什么有时候响应式数据变化了，但是视图没有变？

TWO

解决问题，答案速览

实现代码如下，复制粘贴即可直接使用。

如果你有时间，具体问题梳理、代码分析、知识总结，可见第三部分。

import { reactive, ref } from 'vue';
const reactiveData = reactive({ count: 0 });
const refData = ref(0);
// 修改数据
reactiveData.count++; // 视图会更新
refData.value++; // 视图会更新
// 直接修改对象本身
reactiveData = { count: 10 }; // 视图不会更新
refData = 10; // 视图不会更新

THREE

问题解析，知识总结

一、如何正确定义响应式数据？

不知道大家在平常项目中，ref用的多，还是reactive用的多。

虽然说两者用哪个都可以，并没有什么明确规定，但是有时候用ref来定义响应式对象数据，会产生一些莫名奇妙的问题。

所以，参考官方说明，总结一下。

reactive适用于定义复杂的响应式对象，可对其属性进行修改；而ref适用于定义简单的响应式数据，需要通过value属性来修改。确保在修改数据时使用正确的方式，以确保视图能够正确更新。

简单来说，对于数组、对象，我们就优先用reactive，对于数字、字符串、布尔，我们就优先用ref。

二、为什么有时候响应式数据变化了，但是视图没有变？

在Vue3中，reactive和ref是用于定义响应式数据的两种不同的函数。

reactive函数用于创建一个响应式的对象。

当使用reactive定义一个对象时，对象的属性会被转换为响应式的，即当属性的值发生变化时，相关的视图会进行更新。

但是，如果直接修改对象本身的引用，而不是其中的属性，视图不会更新。

ref函数用于创建一个包装器对象，将普通的数据包装成响应式数据。

当使用ref定义一个数据时，会创建一个包含value属性的响应式对象。当value发生变化时，相关的视图会进行更新。

但是，如果直接修改包装器对象本身，而不是其中的value属性，视图不会更新。

关于reactive和ref的底层响应式原理，这里不再赘述了，个人感觉没啥太大的意义，如有需要后续会做补充。

插一嘴，学技术嘛，要轻松点，无非知道是什么，然后会用它，这就足够了，至于底层实现的为什么，掌握了只是锦上添花罢了。当然这仅代表个人想法，感谢！

- END -