Vue3的ref和reactive你必须了解的6个问题（入门）

Vue3为开发者提供了ref和reactive两种API来实现响应式数据。这是我们在Vue3开发项目中经常用到的两个API。本文从入门的角度来介绍这两个API。如有错误，欢迎大家一起讨论学习~本文demo代码基于Vue3设置语法。在入门阶段，我们需要掌握的是“什么”、“怎么用”、“要注意什么”，基本都是一样的。1.如何使用响应式API？反应式方法用于创建响应式对象。它接收对象/数组参数并返回对象的响应副本。当对象的属性值发生变化时，会自动更新使用对象的地方。下面演示了使用对象和数组作为参数：}letreactiveArr=reactive(['a','b','c','d']);letsetReactiveArr=()=>{reactiveArr[1]='HelloChris1993';}模板内容为如下：此时页面显示如下：当我们分别点击Update按钮时，我们可以看到数据变化后，视图上的内容也更新了：2.如何使用refAPI？ref的作用是将原始数据类型（primitivedatatype）转换为具有响应式特性的数据类型。原始数据类型有7种，分别是：String/Number/BigInt/Boolean/Symbol/Null/Undefined。在JS/TS中读取和修改ref的值时，需要使用.value来获取。当你在模板中读取它时，你不需要使用.value。下面演示了使用字符串和对象作为参数：({name:'Chris1993'});letsetRefObj=()=>{refObj.value.name='HelloChris1993';}模板内容如下：此时页面显示如下：当我们分别点击更新按钮时，可以看到数据发生变化后，视图内容也一起更新了:3.reactive可以用在深层对象或数组中吗？答案是肯定的，reactive是基于ES2015ProxyAPI实现的，其响应性是整个对象的所有嵌套层级。下面演示了使用对象和数组作为参数：'HelloChris1993';}letreactiveDeepArr=reactive(['a',['a1','a2','a3'],'c','d']);letsetReactiveDeepArr=()=>{reactiveDeepArr[1][1]='HelloChris1993';}模板内容如下：此时页面显示如下：当我们分别点击更新按钮时，可以看到数据发生变化后，视图上的内容也一起更新了：4.反应式返回值是否等于源对象？答案不等于，因为reactive是基于ES2015ProxyAPI实现的，返回的结果是一个代理对象。测试代码：letreactiveSource={name:'Chris1993'};让reactiveData=reactive(reactiveSource);console.log(reactiveSource===reactiveData);//falseconsole.log(reactiveSource);//{name:'Chris1993'}console.log(reactiveData);//Reactive<{name:'Chris1993'}>5.TypeScript是怎么写ref和reactive参数类型的？使用TypeScript编写ref/reactive参数类型时，可以根据ref/reactive接口类型实现具体类型：functionref(value:T):Reffunctionreactive(target:T):UnwrapNestedRefs修改之前的示例代码：import{ref}from'vue'letrefValue=ref('Chris1993');//refValuetypeis:RefletsetRefValue=()=>{refValue.value='你好Chris1993';//好的！refValue.value=1993;//error!}//reactive也类似letreactiveValue=reactive<{name:string}>({name:'Chris1993'});6.当ref值用作反应参数时会发生什么？当我们已经有一个ref对象并需要在反应对象中使用它时会发生什么？假设：letname=ref('Chris1993');letnameReactive=reactive({name})我们可以这样做：letname=ref('Chris1993');让nameReactive=reactive({name})console.log(name.value===nameReactive.name);//truename.value='HelloChris1993';console.log(name.value);//你好Chris1993console.log(nameReactive.name);//HelloChris1993nameReactive.name='HiChris1993';console.log(name.value);//你好Chris1993console.log(nameReactive.name);//你好Chris1993这是因为反应式将解压所有深度引用并保持引用响应。当通过赋值方式将ref赋值给reactive属性时，ref也会自动解包：letname=ref('Chris1993');letnameReactive=reactive({})nameReactive.name=name;console.log(name.value);//Chris1993console.log(nameReactive.name);//Chris1993console.log(name.value===nameReactive.name);//真7。小结本文主要从入门的角度介绍了react/refAPI的使用方式的区别，以及使用过程中遇到的几个问题。简单总结一下：reactive一般用于object/array类型的数据，不需要使用.value；ref一般用于基本数据类型的数据。在JS中读取和修改时需要使用.value，在模板中使用Reactive可以修改deep属性值并保持响应；reactive的返回值与源对象不同；reactive的属性值可以是ref值；ref在本质上也是反应式的，ref(obj)等价于reactive({value:obj})。下篇文章将熟练度分享给大家，欢迎大家期待。