vue3?ref和reactive的区别有哪些

本文小编为大家详细介绍“vue3ref和reactive的区别有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue3ref和reactive的区别有哪些”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

Ref

ref数据响应式监听。ref 函数传入一个值作为参数，一般传入基本数据类型，返回一个基于该值的响应式Ref对象，该对象中的值一旦被改变和访问，都会被跟踪到，就像我们改写后的示例代码一样，通过修改 count.value 的值，可以触发模板的重新渲染，显示最新的值

<template><h2>{{name}}</h2><h2>{{age}}</h2><button@click="sayName">按钮</button></template><scriptlang="ts">import{refputed}from'vue'exportdefault{name:'App',setup(){constname=ref('zhangsan')constbirthYear=ref(2000)constnow=ref(2023)constage=&nbspputed(()=>{returnnow.value-birthYear.value})constsayName=()=>{name.value='Iam'+name.value}return{name,sayName,age}}}</script>

reactive

reactive是用来定义更加复杂的数据类型，但是定义后里面的变量取出来就不在是响应式Ref对象数据了

所以需要用toRefs函数转化为响应式数据对象

将上面用ref写的代码转化成reactive型的代码

<template><!--<imgalt="Vuelogo"src="./assets/logo.png">--><div><h2>{{name}}</h2><h2>{{age}}</h2><button@click="sayName">按钮</button></div></template><scriptlang="ts">import{&nbspputed,reactive,toRefs}from"vue";interfaceDataProps{name:string;now:number;birthYear:number;age:number;sayName:()=>void;}exportdefault{name:"App",setup(){constdata:DataProps=reactive({name:"zhangsan",birthYear:2000,now:2023,sayName:()=>{console.log(1111);console.log(data.name);data.name="Iam"+data.name;console.log(data.name);},age:&nbspputed(()=>{returndata.now-data.birthYear;}),});constrefData=toRefs(data)refData.agereturn{...refData,};},};</script><style>#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px;}</style>

读到这里，这篇“vue3ref和reactive的区别有哪些”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注主机评测网行业资讯频道。

上一篇：golang中package?is?not?in?GOROOT报错如何解决

下一篇：SpringBoot部署到外部Tomcat无法注册到Nacos服务端如何解决

---