当海风翻页时

ref 是什么#

ref 接收一个值，返回一个 Ref 对象。这个对象只有一个 .value 属性，指向内部的值。

1
const count = ref(0)
2

3
count.value      // 0
4
count.value = 1  // 触发更新

为什么需要 ref#

JavaScript 的原始类型（string、number、boolean）按值传递，没有办法跟踪读写，所以不能直接变成响应式。

ref 把这些值包进一个对象，读写都落在 .value 上，Vue 就能在 .value 的读取和写入处收集依赖、触发更新。

在 <template> 里，顶层 ref 会自动解包，不用写 .value。

1
<script setup>
2
const count = ref(0)
3
</script>
4

5
<template>
6
  <p>{{ count }}</p>
7
</template>

isRef#

判断一个值是不是 Ref 对象。

1
isRef(count)  // true
2
isRef(0)      // false

shallowRef#

创建一个浅响应式的 ref，只监听 .value 本身有没有被替换，不递归监听内部对象或数组。

1
const msg = shallowRef({ name: '小满' })
2

3
msg.value.name = '大满'      // 不触发更新
4
msg.value = { name: '大满' }  // 触发更新

改内部属性不触发，因为 shallowRef 不会把内部对象转成响应式；整体替换 .value 才触发，因为 .value 本身被换掉了。

triggerRef#

强制触发某个 shallowRef 的依赖更新，即使这次修改没有被代理到。

1
const msg = shallowRef({ name: '小满' })
2

3
const change = () => {
4
  msg.value.name = '大满'
5
  triggerRef(msg)  // 手动触发视图更新
6
}

customRef#

自定义一个 ref，由你决定 get 和 set 里做什么，适合防抖、校验这类需要拦截读写的场景。

1
function myRef(value) {
2
  return customRef((track, trigger) => {
3
    return {
4
      get() {
5
        track()  // 收集依赖
6
        return value
7
      },
8
      set(newVal) {
9
        value = newVal
10
        trigger()  // 触发更新
11
      }
12
    }
13
  })
14
}

track 和 trigger 由 Vue 传入：get 里调用 track 声明这里依赖这个值，set 里调用 trigger 通知依赖方更新。