vue3响应式对象：ref和reactive

ref()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

针对简单对象

针对复杂对象，但是内部的value被proxy代理了

isRef()

判断是不是一个ref对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

shallowRef()

浅层响应式。创建一个跟踪自身 .value 变化的 ref，但不会使其值也变成响应式的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

shallowRef针对复杂对象，其value内部直接是值，不是一个proxy对象，无法做到深层响应

shallowRef不可以和ref同时使用，如果同时使用，shallowRef也会深层响应

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

总结：

1. ref 是深层次响应式，shallowRef 是浅层次响应式
2. ref 和 shallowRef 不能写在一块，不然会影响shallowRef 造成视图更新

tiggerRef()

强制更新页面的DOM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

customRef()

官网介绍：https://cn.vuejs.org/api/reactivity-advanced.html#customref

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

使用场景：可以自由控制响应式处理，比如在接口调用时候（官网示例）

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)
      }
    }
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

reactive()

官网：https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive

1、reactive 限定了值类型，只能用于对象类型（Object、Array、集合（Map、Set））

---

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2、不能替换整个对象：reactive是proxy对象，不能直接赋值，否则会破会其响应式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

解决方法：使用数组自带方法改变数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

shallowReactive()

reactive() 的浅层作用形式

详情见文档：https://cn.vuejs.org/api/reactivity-advanced.html#shallowreactive

ref和reactive

1. ref绑定对象类型时，通过源码知道也是调用的 reactive
2. ref 取值和赋值都需要加 .value，reactive 不需要