其他 API

shallowRef 与 shallowReactive

shallowRef

作用: 创建一个响应式数据, 但只对顶层属性进行响应式处理

特点: 只跟踪引用值的变化, 不关心值内部的属性变化

使用:

let myVar = shallowRef(initialValue)

shallowReactive

作用: 创建一个浅层响应式对象, 只会使对象的最顶层属性变成响应式的, 对象内部的嵌套属性则不会变成响应式的

特点: 对象的顶层属性是响应式的, 但嵌套对象的属性不是

使用:

const myObj = shallowReactive({
  a: {
    b: {
      c: 1
    }
  }
})

总结

通过使用 shallowRef() 和 shallowReactive() 来绕开深度响应

浅层式 API 创建的状态只在其顶层是响应式的, 对所有深层的对象不会做任何处理, 避免了对每一个内部属性做响应式所带来的性能成本, 这使得属性的访问变得更快, 提升性能

readonly 与 shallowReadonly

readonly

作用: 用于创建一个对象的深层次只读副本

特点:

对象的所有嵌套属性都将变为只读
任何尝试修改这个对象的操作都会被阻止, 在开发模式下会在控制台中发出警告

应用场景:

创建不可变的状态快照
保护全局状态或配置不被修改

使用:

const original = reactive({
  a: {
    b: {
      c: 1
    }
  }
})

const readOnlyCopy = readonly(original)

shallowReadonly

作用: 与readonly类似, 但只作用于对象的顶层属性

特点:

只将对象的顶层属性设置为只读, 对象内部的嵌套属性仍然是可变的
适用于只需保护对象顶层属性的场景

使用:

const original = reactive({
  a: {
    b: {
      c: 1
    }
  }
})

const readOnlyCopy = shallowReadonly(original)

toRaw 与 markRaw

toRaw

作用: 用于获取一个响应式对象的原始对象, toRaw返回的对象不再是响应式的, 不会触发视图更新

官网描述: 这是一个可以用于临时读取而不引起代理访问/跟踪开销, 或是写入而不触发更改的特殊方法, 不建议保存对原始对象的持久引用, 请谨慎使用

应用场景: 在需要将响应式对象传递给非Vue的库或外部系统时, 使用 toRaw 可以确保它们收到的是普通对象

使用:

import { reactive, toRaw, isReactive } from "vue";
   
// toRaw
// 响应式对象
let person = reactive({ name: 'tony', age: 18 })
// 原始对象
let rawPerson = toRaw(person)

// 查看是否是响应式数据
console.log(isReactive(person))
console.log(isReactive(rawPerson))

markRaw

作用: 标记一个对象, 使其永远不会变成响应式的

应用场景: 例如使用mockjs时, 为了防止误把mockjs变为响应式对象, 可以使用markRaw去标记mockjs

使用:

import { reactive, markRaw, isReactive } from "vue";
   
// markRaw
let citys = markRaw([
  { id: 'asdda01', name: '北京' },
  { id: 'asdda02', name: '上海' },
  { id: 'asdda03', name: '天津' },
  { id: 'asdda04', name: '重庆' }
])

// 根据原始对象 citys 去创建响应式对象 citys2 —— 创建失败, 因为 citys 被 markRaw 标记了
let citys2 = reactive(citys)

// 查看是否是响应式数据
console.log(isReactive(citys))
console.log(isReactive(citys2))

customRef

作用: 创建一个自定义的ref, 并对其依赖项跟踪和更新触发进行逻辑控制

src/hooks/useSumRef.ts, 实现防抖效果

import { customRef } from "vue";

export default function(initValue: string, delay: number){
  let msg = customRef((track, trigger)=>{
    let timer: number
    return {
      get(){
        track() // 告诉 Vue 数据 msg 很重要, 要对 msg 持续关注, 一旦变化就更新
        return initValue
      },
      set(value){
        clearTimeout(timer)
        timer = setTimeout(() => {
          initValue = value
          trigger() //通知 Vue 数据 msg 变化了
        }, delay)
      }
    }
  }) 
  return { msg }
}

其他 API ​

shallowRef 与 shallowReactive ​

shallowRef ​

shallowReactive ​

总结 ​

readonly 与 shallowReadonly ​

readonly ​

shallowReadonly ​

toRaw 与 markRaw ​

toRaw ​

markRaw ​

customRef ​