其他分享
首页 > 其他分享> > vue3 setup reactive响应数据

vue3 setup reactive响应数据

作者:互联网

在这里插入图片描述

reactive不能修饰基本数据类型只能修饰对像和数组

改变对象(可以该变更深层次的对象)

<template>
 名字:{{name}}
 <br>
 年龄:{{age}}
 <br>
 性别:{{obj.sex}}
 <br>
身高:{{obj.long}}
<br>
发行:{{obj.hair.color}}和{{obj.hair.type}}
<br>
<button @click="growup()">
  点击成长
</button>
</template>
<script>
import {reactive, ref} from "vue"
export default {
 setup(){
   let name=ref("张三")
   let age=ref(18)
   let obj=reactive({
     sex:"男",
     long:"160",
     hair:{
       color:"黑",
       type:"短"
     }
   })
  function growup(){
     age.value=20
     obj.long="180"
     obj.hair.color="黄"
     obj.hair.type="长"
     console.log(age);
     console.log(obj.long);
   }
return{
  name,
  age,
  obj,
  growup
}
 }
}
</script>

<style>

</style>

在这里插入图片描述
改变数组

<template>
 名字:{{name}}
 <br>
 年龄:{{age}}
 <br>
 性别:{{obj.sex}}
 <br>
身高:{{obj.long}}
<br>
发行:{{obj.hair.color}}和{{obj.hair.type}}
<br>
爱好:{{hobbits}}
<br>
<button @click="growup()">
  点击成长
</button>
</template>
<script>
import {reactive, ref} from "vue"
export default {
 setup(){
   let name=ref("张三")
   let age=ref(18)
   let obj=reactive({
     sex:"男",
     long:"160",
     hair:{
       color:"黑",
       type:"短"
     }
   })
   let hobbits=reactive(["吃饭","打游戏"])
  function growup(){
     age.value=20
     obj.long="180"
     obj.hair.color="黄"
     obj.hair.type="长"
     hobbits[0]="打代码",
     hobbits[1]="运动"
   }
return{
  name,
  age,
  obj,
  hobbits,
  growup
}
 }
}
</script>

<style>

</style>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

标签:obj,setup,long,hair,reactive,let,vue3,age
来源: https://blog.csdn.net/weixin_50736511/article/details/121752316