ref全家桶

vue3通过ref将view中的数据绑定为响应式数据

1、Ref,ref

被ref包装之后需要.value 来进行赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
import { ref, Ref } from 'vue'
写法1
let msg = ref<string>('红色')
const change = () => {
   msg.value = '绿色'
   console.log(msg);
}
写法2 Ref范型
let msg: Ref<string> = ref('大红色')
const change = () => {
  msg.value = '大绿色'
  console.log(msg);
}

2、isRef

判断是不是一个ref对象

1
2
3
4
5
6
7
let msg: Ref<string | number> = ref('大红色')
let num: number = 123
const change = () => {
  msg.value = '大绿色'
  console.log(isRef(msg)); // true
  console.log(isRef(num)); // false
}

3、shallowRef和triggerRef

创建一个跟踪自身.value变化的ref，但不会使其指也变成响应式的,可以和triggerRef配合使用，节省性能

triggerRef强制更新页面DOM

1
2
3
4
5
6
7
8
let msg = shallowRef({
  name: '红色'
})

const change = () => {
  msg.value.name = '绿色'
  triggerRef(msg)
}

4、customRef

customRef 是个工厂函数要求我们返回一个对象 并且实现 get 和 set

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function myRef<T>(value: T) {
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newVal: T) {
        console.log('set');
        value = newVal
        trigger()
      }
    }
  })
}
let msg = myRef('红色')
const change = () => {
  msg.value = '绿色'
}