vue3定义的值都不是响应式的，所以需要申明定义的值为响应式
ref 接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。
例如：
<template>
<div>
{{name}}
<button @click=”changeName”>改变</button>
</div>
</template>
<!– setup语法糖 –>
<script setup lang=”ts”>
import {ref} from ‘vue’
//通过变量名称.value改变值 注意：没有this
const name =ref<string>(‘这是一个名字’)
const changeName = () => {
name.value = ‘改变了名字’
}
</script>
isRef 判断是不是一个ref对象 console.log(isRef(name)) //true
shallowRef ref为深层次的响应 shallowRef 为浅层次的响应
type Obj = {
name:string
}
const obj = shallowRef<Obj>({name:”小名”})
const changeValue = () => {
obj.value.name = ‘小姜’ //视图不会变化
obj.value = { //视图会更新 只对value进行响应
name:’小姜’
}
}
注意：ref和shallowRef不能一块写，不然shallowRef会被影响，造成视图的更新
triggerRef 强制更新页面DOM
const aa = shallowRef(‘强制更新’)
const changed = () => {
aa.value = ‘强制更新了’
triggerRef(aa)
}