vue3-(响应式属性ref相关)
1.ref:接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value
property,指向该内部值。
注意:被ref包装之后需要.value 来进行赋值,因为使用ref包装,返回的是一个对象,Ref TS对应的接口
<template> <button @click="onChangeMsg">修改数据</button> <div>{{ message }}</div> </template> <script setup lang="ts"> import { ref, Ref } from 'vue'; const message: Ref<string> = ref('ref响应式数据'); const onChangeMsg = () => { message.value = '修改后的数据'; }; </script>
ts的另外一种方式:
<template> <button @click="onChangeMsg">修改数据</button> <div>{{ message }}</div> </template> <script setup lang="ts"> import { ref } from 'vue'; const message = ref<string | number>('ref响应式数据'); const onChangeMsg = () => { message.value = '修改后的数据'; }; </script>
2.isRef:判断是否是ref对象,返回值为布尔值:
<template> <button @click="onChangeMsg">修改数据</button> <div>{{ message }}</div> </template> <script setup lang="ts"> import { ref, isRef } from 'vue'; const message = ref<string | number>('isRef判断是不是ref对象'); const hello: string = '我不是ref对象'; const onChangeMsg = () => { message.value = '修改后的数据'; console.log(isRef(message), '是ref对象,返回true'); console.log(isRef(hello), '不是ref对象,返回false'); }; </script>
3.shallowRef创建一个跟踪自身 .value
变化的 ref,但不会使其值也变成响应式的。<template>
<button @click="onChangeMsg">修改数据</button> <div>{{ message }}</div> </template> <script setup lang="ts"> import { ref, shallowRef } from 'vue'; type Obj = { name: string; num: number; }; const message = shallowRef<Obj>({ name: 'vue3', num: 100 }); const onChangeMsg = () => { //修改的值无法显示在页面上 message.value.name = '修改了name'; //修改的值可以显示在页面上 //message.value = { name: '修改了name', num: 123 };
//triggerRef强制修改,修改的值可以在页面显示
triggerRef(message);
console.log(message, 'message'); }; </script>
4.customRef 是个工厂函数要求我们返回一个对象 并且实现 get 和 set:
应用场景:实现防抖函数
<template> <button @click="onChangeMsg">修改数据</button> <div>{{ message }}</div> </template> <script setup lang="ts"> import { ref, shallowRef, triggerRef, customRef } from 'vue'; let message = MycustomRef('我是原始数据'); const onChangeMsg = () => { message.value = '修改了数据'; }; function MycustomRef<T>(value: T) { return customRef((track, trigger) => { return { get: () => { track();//通知vue,跟踪数据的变化 return value; }, set: (newVal: T) => { value = newVal; trigger();//通知vue重新解析模版,挂载数据 } }; }); } </script>