Vue响应式进阶常用API学习

shallowRef

ref 的浅层作用形式。shallowRef是浅层引用,只会跟踪原始对象的引用,不会跟踪原始对象的属性

​

triggerRef

强制触发依赖于一个浅层 ref 的副作用，这通常在对浅引用的内部值进行深度变更后使用。

​

强制更新视图

import { shallowRef, watchEffect, triggerRef} from 'vue'
const shallow = shallowRef({
  greet: 'Hello, world'
})
// 触发该副作用第一次应该会打印 "Hello, world"
watchEffect(() => {
  console.log('=====>', shallow.value.greet)
})
setTimeout(() => {
  shallow.value.greet = 'Hello, universe'
  // 更新视图
  triggerRef(shallow)
}, 2000);

customRef

创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。

customRef() 预期接收一个工厂函数作为参数，这个工厂函数接受 track 和 trigger 两个函数作为参数，并返回一个带有 get 和 set 方法的对象。

一般来说，track() 应该在 get() 方法中调用，而 trigger() 应该在 set() 中调用。然而事实上，你对何时调用、是否应该调用他们有完全的控制权。

示例

创建一个防抖 ref，即只在最近一次 set 调用后的一段固定间隔后再调用：

import { customRef } from 'vue'
​
export function useDebouncedRef(value, delay = 200) {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}

在组件中使用：

​

shallowReactive

reactive()的浅层浅层响应式，和reactive()不同，这里没有深层级的转换：一个浅层响应式对象里只有根级别的属性是响应式的。

​

shallowReadonly

readonly()的浅层作用形式,只有根级别是只读不可更改的，根级别以下的可更改，只是视图不会更新，但值改变了

​

​

​

toRaw

根据一个 Vue 创建的代理返回其原始对象。这是一个可以用于临时读取而不引起代理访问/跟踪开销，或是写入而不触发更改的特殊方法。(toRaw是Vue 3 Composition API中的一个函数，它接收一个由reactive或readonly方法创建的响应式代理对象，并返回该代理对象对应的原始对象。)

​

markRaw

markRaw会将一个对象标记为不可转化为响应式代理对象，并且返回对象本身

​