ref

vue官方文档 接受一个内部值并返回一个响应式且可变的ref对象,该对象仅有一个.value property,指向该内部值
理解:ref把一个JS基本类型数据变为一个响应式的对象,并且如果我们访问该值,只能通过.value形式,比如
在这里插入图片描述可以看出使用ref定义的对象已经变成响应式的对象

unref

把ref定义的响应式对象转变为基本类型的数据

toRef

vue官方文档 可以用来为源响应式对象上的某个property新创建一个ref,然后,ref可以被传递,他会保持对源property的响应式链接
理解:对于reactive定义的响应式对象,如果要进行解构的话,对象的属性就会丢失响应式,如果用toRef来搞一下,就会和reactive定义的对象产生链接,就是说解构某个属性不会丢失它的响应式
不管toRef的对象有没有这个属性都可以,如果没有则.value的值为undefined
备注:ref定义的对象再使用toRef则不改变原数据源的数据
在这里插入图片描述

toRef的格式为 const toName=toRef(响应式对象,对象名)

toRefs

和toRef很像,只不过是把转换整个对象toRefs(响应式对象)
vue官网:将响应式对象转换为普通对象,其中结果对象的每个property都是指向原始对象响应的property的ref
以下是官网的例子:

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型:

{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// ref 和原始 property 已经“链接”起来了
state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })

  // 操作 state 的逻辑

  // 返回时转换为ref
  return toRefs(state)
}

export default {
  setup() {
    // 可以在不失去响应性的情况下解构
    const { foo, bar } = useFeatureX()

    return {
      foo,
      bar
    }
  }
}
理解了toRef,toRefs就没什么好说的了,道理差不多
isRef

检查值是否为一个ref对象

自定义Ref customRef

customRef我觉得就和compute属性差不多,不过写法也有很大差别,但是都是执行数据的set函数和get函数,只不过在这个customRef中vue官方让使用track和trigger函数,不然无法实现数据变化的监听
理解:如果一个数据在变化的时候需要执行异步或者是其他的操作,可以使用cutomeRef,其实如果我们在watch中监听一个数据的变化也可以做到这种效果,而且watch的写法更加简单,不太明白vue官方出这个自定义Ref的真正意图,目前还没有发现,如果有理解的朋友情留言,谢谢。
官方代码如下:

<input v-model="text" />
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)
      }
    }
  })
}

export default {
  setup() {
    return {
      text: useDebouncedRef('hello')
    }
  }
}

在这里插入图片描述上面的打印的自定义Ref,和ref其实差不多,只是改了个名字

shallowRef 和 triggerRef

使用shallowRef定义的数据,在正常情况下改变后,在watchEffect函数中时监听不到的,必须使用triggerRef再执行一下shallowRef对象
官网文档:

const shallow = shallowRef({
  greet: 'Hello, world'
})

// 第一次运行时记录一次 "Hello, world"
watchEffect(() => {
  console.log(shallow.value.greet)
})

// 这不会触发作用 (effect),因为 ref 是浅层的
shallow.value.greet = 'Hello, universe'

// 记录 "Hello, universe"
triggerRef(shallow)

仅记录平常学习

Logo

前往低代码交流专区

更多推荐