Vue3.0中常用的组合API有哪些？

最新推荐文章于 2025-10-17 21:16:08 发布

原创

最新推荐文章于 2025-10-17 21:16:08 发布 · 974 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

本文介绍了Vue3.0中的关键组合API，包括ref、toRefs、toRef、isRef、shallowRef、triggerRef、reactive、readonly、customRef、toRaw、markRaw、computed、watch和watchEffect等。详细讲解了它们的使用方法和应用场景，帮助开发者深入理解Vue3.0响应式系统。

（1）ref、toRefs、toRef、isRef

ref 用于定义响应式变量、快捷DOM访问。
基本语法：const a = ref(1) // {value:1}
基础使用：一般用于定义 String、Number、Boolean 这种基于数据类型，外在表现统一使用 .value 访问。
补充：ref 还可以访问 DOM对象或者组件实例对象，可做DOM操作。
toRef、toRefs 用于把一个object的变量，变成响应式的变量。
基本语法：const msg = toRef(obj, key) // 把obj[key]变成响应式的
基本语法：const { msg } = toRefs(obj) // 把整个obj都变成响应式的
unref 返回一个变量的值
基本语法：const x = unref(x) // 如果x是ref变量则返回x.value，如果x不是ref变量则直接返回x。
isRef 用于判断一个变量是不是ref响应式变量
基本语法：const bol = isRef(x)

function useUpdBoxStyle() {
   
   
  const el = ref(null)
  const updateStyle = color => {
   
   
    el.value.style.color = color
  }
  return [el, updateStyle]
}

（2）shallowRef、triggerRef

shallowRef 用于性能优化，只对对象的第一层进行proxy
基本语法：const obj = shallowRef({a:1,b:{c:{d:{e:2}}}})
triggerRef 用于手动触发那些shallowRef的变量进行更新视图
基本语法：triggerRef(obj) // 当obj.value.b.c.d发生变化，triggerRef(obj) 强制更新视图。
customRef 自定义ref，把ref变量拆成get/set的写法
基本语法：customRef((track, trigger) =>({get,set})

function useObj() {
   
   
  const obj = {
   
    a: 1, b: {
   
    c: {
   
    d: 2 }}}
  const obj1 = ref(obj)
  const obj2 = shallowRef(obj)
  // console.log('obj1', obj1)
  // console.log('obj2', obj2)

  const changeObj = (obj, newD