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)); //trueconsole.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>