vue3 ref，shallowRef, triggerRef, customRef

ref深层次响应

变成响应式

const name = ref('refName')
name.value = 'newName'

shallowRef浅层次响应

const obj = shallowRef({ name: 'shallowRefName' })
obj.value = { name: 'newName' } // 响应式
obj.value.name = 'newName' // 非响应式，视图不刷新

triggerRef主动触发一次更新

const obj = shallowRef({ name: 'shallowRefName' })
obj.value = { name: 'newName' } // 响应式
obj.value.name = 'newName' // 非响应式，视图不刷新
triggerRef(obj) // 重新触发一次视图刷新

customRef自定义ref

function custom(value) {
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newVal) {
        value = newVal
        trigger()
      }
    }
  })
}
// 返回一个ref对象
const name = custom('customRefName')
name.value = 'customNewRefName' // 触发了set方法，视图更新