02 vue3之ref全局桶

ref

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

<template>
  <div class="">Ref:{{ name.a }}</div>
  <button @click="change()">change</button>
</template>

<script setup lang="ts">
import {
  ref,
} from "vue";
// 分为二种情况使用 1.类型简单时使用
let name = ref({ a: "cookie" }); // ref是个函数,ref返回的是类
const change = () => {
  name.value.a = "herry"; 
};

 // 2.类型复杂的时候使用
import type { Ref } from "vue";
/* type N = { 
  a: string;
};
let name: Ref<N> = ref({ a: "cookie" }); // 定义泛型N，ref是个函数 */

</script>

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

isRef

判断是不是一个ref对象

import { ref, Ref,isRef } from 'vue'
let message: Ref<string | number> = ref("我是message")
let notRef:number = 123
const changeMsg = () => {
  message.value = "change msg"
  console.log(isRef(message)); //true
  console.log(isRef(notRef)); //false
  
}

 ref 小妙招格式化输出

我们console 输出 

shallowRef

ref深层次 shallowRef浅层次 ，二者不能再一块使用会造成视图的更新 因为是triggerRef被ref底层调用导致的

<template>
  <div class="">Ref:{{ name.a }}</div>
  <div class="">shallowRef:{{ name1.a }}</div>
  <hr />
  <button @click="change()">change</button>
</template>

<script setup lang="ts">
import {
  ref,
  shallowRef,
  triggerRef,
  customRef,
} from "vue";
import type { Ref } from "vue"; 

let name = ref({ a: "cookie" });


let name1 = shallowRef({ a: "herry" });
const change = () => {
// 一起使用会导致值都会发生改变
  // name.value.a = "herry"; // 只能使用ref和shallowRef只能使用一个
  name1.value.a = "herry1"; // 实际上只到了.value这一层 不能刷新更改视图的值
  triggerRef(name1); //加上会收集所有依赖也会更改视图的值 ref实质底层也是调用这个函数导致视图值得变化

  name1.value = {
    a: "herry2", // 这样也相当于深层次修改
  }; 
};
</script>

triggerRef 

强制更新页面DOM

这样也是可以改变值的

<template>
  <div>
    <button @click="changeMsg">change</button>
    <div>{{ message }}</div>
  </div>
</template>
 
 
 
<script setup lang="ts">
import { Ref, shallowRef,triggerRef } from 'vue'
type Obj = {
  name: string
}
let message: Ref<Obj> = shallowRef({
  name: "小"
})
 
const changeMsg = () => {
  message.value.name = '大'
 triggerRef(message)
}
</script> 
 
 
<style>
</style>

customRef

自定义ref 

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

ref也能获取dom ;定义得dom值和ref='dom'需一致

<template>
  <div>customRef :{{ obj }}</div>
  <hr />
  <div ref="dom">我是dom</div>
  <button @click="change()">change</button>
</template>

<script setup lang="ts">
import {
  ref,
  shallowRef,
  triggerRef,
  customRef,
} from "vue";
import type { Ref } from "vue"; // 2.类型复杂的时候使用

let dom = ref<HTMLDivElement>(); // <HTMLDivElement> 使用泛型类型推断为HTMLDivElement dom和ref='dom'需一致
const change = () => {
  obj.value = "customRef 被改了";

  console.log(dom.value?.innerText);
  console.log(obj);
};

// 自定义ref好处是针对请求接口防抖，减轻服务器压力
function myRef<T>(value: T) {
  //
  let timer: any;
  return customRef((track, trigger) => {
    return {
      get() {
        // 收集依赖
        track();
        return value;
      },
      set(newVal) {
        clearTimeout(timer);
        // 触发依赖更新
        timer = setTimeout(() => {
          timer = null; // 用完之后 清一下
          console.log("调用了");
          value = newVal;
          trigger();
        }, 500);
      },
    };
  });
}
const obj = myRef<string>("小曼");
</script>