vue3 ref使用(三)

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内容
}