用法
需要导入
import {ref} from 'vue'
定义语法
如果某个变量 需要 定义为响应式，就用下面写法
let xxx = ref(值)
返回值：RefImpl的 响应对象，简称ref对象，ref对象的 value属性是响应式的
插值表达式
还是像之前的写法，没变化
{{xxx}}
修改值
通过 ref 对象的 value 改变
xxx.value = '新值'
例子
<template>
姓名：{{name}}<br>
年龄：{{age}}<br>
性别：{{sex}}<br>
身高：{{height}}<br>
<button @click="addAge">年龄加1</button>
<button @click="addHeight">身高加0.01</button>
</template>
<script lang="ts" setup name='Student'>
import {ref} from 'vue'
let name = '李雷'
let sex = '男'
let age = ref(20)
let height = ref(1.82)
console.log("age:",age)
function addAge(){
age.value++
}
function addHeight(){
height.value += 0.01
}
</script>
<style>
</style>
ref响应对象
访问页面，显示如下：
age 原本是基本数据类型，显示是 RefImpl 响应对象，能够看到有 value 属性，值是 20 （其实还有其他属性，可忽略）
插值表达式
插值表达式就写 {{age}} 即可
不能写 {{age.value}}，否则不显示数据
修改值不能再次定义 ref()
修改值时，不能再次定义 ref()，如下，页面不会更新数据：
function addHeight(){
height = ref(1.9)
}