vue3学习（认识ref全家桶）

学习链接：学习Vue3 第六章（认识Ref全家桶）_小满zs的博客-CSDN博客

ref

接受一个内部值，并返回一个响应式且可变的ref对象。ref对象仅有一个 .value property ，指向该内部值。

案例

我们这样无法改变message的值，因为message不是响应式的，无法被vue跟踪，需要改成ref

<template>
  <div>{{ message }}</div>
  <button @click="changMsg">改变MSG</button>
</template>

<script setup lang="ts">
let message: string = '我是测试'
const changMsg = () => {
  message = 'change msg'
}
</script>

改为ref

Ref TS对应的接口

interface Ref<T>{
    value: T
}

注意：被ref包装后，需要用.value来进行赋值

<template>
  <div>{{ message }}</div>
  <button @click="changMsg">改变MSG</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'

let message = ref<string>('我是测试')

const changMsg = () => {
  message.value = 'change msg'
}
</script>

isRef

判断是不是一个ref对象

<script setup lang="ts">
import { ref, Ref, isRef } from 'vue'

let message: Ref <string | number> = ref<string>('我是测试')
let notRef: number = 123

const changMsg = () => {
  message.value = 'change msg'
  console.log(isRef(message));
  console.log(isRef(notRef));
}
</script>

shallowRef

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

例子

修改其属性是非响应式的，这样是不会改变的

<template>
  <div>{{ message }}</div>
  <button @click="changMsg">改变MSG</button>
</template>

<script setup lang="ts">
import { Ref, shallowRef } from 'vue'

type obj = {
  name: string
}

let message: Ref<obj> = shallowRef({
  name: '测试'
})

const changMsg = () => {
  message.value.name = 'change msg'
}
</script>

例子2

这样是可以被监听到的修改value

<template>
  <div>{{ message }}</div>
  <button @click="changMsg">改变MSG</button>
</template>

<script setup lang="ts">
import { Ref, shallowRef } from 'vue'

type obj = {
  name: string
}

let message: Ref<obj> = shallowRef({
  name: '测试'
})

const changMsg = () => {
  message.value = {
    name: 'change msg'
  }
}
</script>

triggerRef

强制更新页面DOM

这样也可以改变其值

<template>
  <div>{{ message }}</div>
  <button @click="changMsg">改变MSG</button>
</template>

<script setup lang="ts">
import { Ref, shallowRef, triggerRef } from 'vue'

type obj = {
  name: string
}

let message: Ref<obj> = shallowRef({
  name: '测试'
})

const changMsg = () => {
  message.value.name = 'change msg'
  triggerRef(message)
}
</script>

customRef

自定义ref

customRef 是工厂函数要求我们返回一个对象，并且实现 get 和 set，适合去做防抖之类的

<script setup lang="ts">
import { shallowRef, triggerRef, customRef } from 'vue'

function myRef<T = any>(value: T) {
  let timer: any;
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newVal) {
        clearTimeout(timer)
        timer = setTimeout(() => {
          console.log('触发click');
          value = newVal
          trigger()
        }, 2000)
      }
    }
  })
}
const name = myRef<string>('小满')

const changName = () => {
  name.value = 'change msg'
}
</script>

<template>
  <div>{{ name }}</div>
  <button @click="changName">改变MSG</button>
</template>

追加问题：

       track: 收集依赖。track()函数的调用，等同于手动 收集依赖；然后使用return value将值返回

        trigger：触发依赖。 trigger()函数的嗲用，等同于用户手动 触发依赖更新。

vue3 中Ref本质也是使用track 与trigger去收集与触发依赖