Vue3 ref全家桶

1.无ref

<template>
  <div>
    {{ Fly.name }}
  </div>
  <button @click="change">修改</button>
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'
//  所有被ref()或者是reactive()包裹的变量才是响应式的
const Fly = { name : 'Fly' }
const change = () => {
  Fly.name = 'Fly2'
  console.log(Fly.name)
  // 这里的Fly.name的值变了 但是视图中的Fly.name没有变
  // 这是因为Fly是一个普通对象, 不是响应式的
  
}
</script>
<style scoped>

</style>

2.ref

<template>
  <div>
    {{ Fly.name }}
  </div>
  <button @click="change">修改</button>
  
  <div ref='dom'>hello world</div>
</template>

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

//可以通过ref获取dom元素
const dom = ref<HTMLDivElement>()


type FlyType = {
  name: string
}

const Fly = ref<Fly>({
  name: 'Fly'
})
// 或者是  (推荐类型比较复杂的时候使用)
// const Fly:Ref<FlyType> = ref({
//   name: 'Fly'
// })
const change = () => {
  Fly.value.name = 'Fly2'
  console.log(Fly)
  
  console.log(dom.value?.innerText)
  
}
</script>
<style scoped>

</style>

3.isRef

<template>
  <div>
    {{ Fly.name }}
  </div>
  <button @click="change">修改</button>
</template>

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

//isRef判断 是不是ref对象 源码中使用较多 工作中使用少
const Fly = ref({
  name: 'Fly'
})
const Fly2 = {
  name: 'Fly'
}

const change = () => {
  console.log(isRef(Fly))//返回为true
  console.log(isRef(Fly2))//返回为false
}
</script>
<style scoped>

</style>

4. shallowRef

<template>
  <div>
    Ref:{{ Fly.name }}
    <hr>
    ShallowRef:{{ Fly2.name }}
  </div>
  <button @click="change">修改</button>
</template>

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

// ref 是做 深层次 可以相应的数据变化
// shallowRef 是做 浅层次的相应数据变化
// ref和shallowRef 不能协写一起 会影响shallowRef 造成视图层的更新
//
const Fly = ref({
  name: 'Fly'
})
const Fly2 = shallowRef({
  name: 'Fly2'
})

const change = () => {
  //Fly.value.name = 'Fly--'//如果将 ref加入后 会影响 shallowRef 的改变
  Fly2.value.name = 'Fly2=='
  console.log(Fly2);// 输出 已变 但视图没变
  // Fly2.value = {
  //   name: 'Fly2=='
  // }
  // console.log(Fly2);// 输出 已变 视图也变了
  
}
</script>
<style scoped>

</style>

5. triggerRef

<template>
  <div>
    Ref:{{ Fly.name }}
    <hr>
    ShallowRef:{{ Fly2.name }}
  </div>
  <button @click="change">修改</button>
</template>

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

// ref 是做 深层次 可以相应的数据变化
// shallowRef 是做 浅层次的相应数据变化
// ref和shallowRef 不能协写一起 会影响shallowRef 造成视图层的更新

const Fly = ref({
  name: 'Fly'
})
const Fly2 = shallowRef({
  name: 'Fly2'
})

const change = () => {
  //Fly.value.name = 'Fly--'//如果将 ref加入后 会影响 shallowRef 的改变
  Fly2.value.name = 'Fly2=='
  console.log(Fly2);// 输出 已变 但视图没变
  // Fly2.value = {
  //   name: 'Fly2=='
  // }
  // console.log(Fly2);// 输出 已变 视图也变了
  
  triggerRef(Fly2)// 触发视图更新
  console.log(Fly2);// 输出 已变 视图也变了
  //triggerRef 是ref底层调用的方法 因为ref在底层已经调用过了 所以和shallowRef不能一起使用
}
</script>
<style scoped>

</style>

6. customRef

<template>
  <div>
    customRef:{{ obj }}
  </div>
  <button @click="change">修改</button>
</template>

<script setup lang='ts'>
import { ref,isRef,shallowRef,triggerRef,customRef } from 'vue'
//customRef 是让我们自定义一个ref 
function MyRef<T>(value:T) {
  let timer:any
  return customRef((track, trigger) => {
    return {
      get() {
        track()// 依赖收集 
        return value
      },
      set(newValue) {
        //触发依赖 更新
        // console.log('customRef set');//可以在这里调用接口 点击多少次 调用多少次
        // value = newValue
        // trigger()

        // 可以添加防抖 效果很好
        clearTimeout(timer)
        timer = setTimeout(() => {
          //触发依赖 更新
          console.log('customRef set')
          value = newValue
          timer = null
          trigger()
        }, 500)
      }
    }
  })
}
const obj = MyRef<string>('customRef Fly')
const change = () => {
  obj.value = 'customRef Fly--'
  console.log(obj.value)
}

</script>
<style scoped>

</style>