vue3 setup（）ref中响应式数据

setup中不能响应式改变数据

<template>
 名字：{{name}}
 <br>
 年龄：{{age}}
 <br>
 性别：{{obj.sex}}
 <br>
身高：{{obj.long}}
<br>
<button @click="growup()">
  点击成长
</button>
</template>

<script>
export default {
 setup(){
   let name="张三"
   let age=18
   let obj={
     sex:"男",
     long:"160"
   }
  function growup(){
     age=20
     obj.long="180"
     console.log(age);
     console.log(obj.long);
   }
return{
  name,
  age,
  obj,
  growup
}
 }
}
</script>

<style>

</style>

输出的name和obj.long已将改变了但是页面不渲染
这时需要 ref

<template>
 名字：{{name}}
 <br>
 年龄：{{age}}
 <br>
 性别：{{obj.sex}}
 <br>
身高：{{obj.long}}
<br>
<button @click="growup()">
  点击成长
</button>
</template>

<script>
import {ref} from "vue"
export default {
 setup(){
   let name=ref("张三")
   let age=ref(18)
   let obj=ref({
     sex:"男",
     long:"160"
   })
  function growup(){
     age.value=20
     obj.value.long="180"
     console.log(age);
     console.log(obj.long);
   }
return{
  name,
  age,
  obj,
  growup
}
 }
}
</script>

<style>

</style>