笔者 | 大澈
大家好,我是大澈!
今天的问题很简单很基础,大家一看就懂。
但是在繁忙的工作中,却常常不经意的被我们所忽略,此文仅作为提醒,让大家有个印象。
欢迎大家在周末的问题留言推文中,积极进行问题留言,把这周工作日遇到的问题,分享给大家瞧瞧,或者直接进问答群,一起交流唠唠。
遇到难题,遇到有共鸣的问题,一起讨论,一起沉淀,一起成长。
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 -