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