1:ref,shallowRef
ref 深层次转写
isRef 判断某个值是否为Ref
shallowRef 浅层次的响应
ref和shallowRef 两者不能一起使用,shallowRef会被ref影响
import { ref, reactive, shallowRef,triggerRef } from 'vue'
const test = ref({ name: '姓名' })
const test1 = shallowRef({ name: '姓名1' })
单独使用时:
// ref 改变时
const onChange = () => {
test.value.name = 1 // 可以改变
}
// shallowRef 改变时
const onChange = () => {
test1.value = {
name: '姓名2'
}
// 浅层次 可以改变
}
同时使用时:
const onChange = () => {
test.value.name = 1 // 可以改变
test1.value.name = '222' // 这时shallowRef 底层会被ref所影响,也会发生改变
}
通过triggerRef修改shallowRef
const onChange = () => {
test1.value.name = '222'
triggerRef(test1) // 通过 triggerRef 修改shallowRef
}
2:ref的获取dom
const dom1 = ref<HTMLDivElement>() // 通过HTMLDivElement类型声明
const onChange = () => {
console.log(dom1.value?.innerText) //在页面没有创建的时候,是拿不到值得,必须放在dom生成之后,再通过链式访问拿到dom内容
}