响应式ref
Ref()
接受一个内部值,返回一个响应式的、可更改的 ref 对象,此对象只有一个指向其内部值的属性 .value。
如果将一个对象赋值给 ref,那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref,它们将被深层地解包
import { ref, Ref } from "vue";
const count:Ref<number> = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
const count:Ref<any> = ref({}) // 会自动调用toReactive()
shallowRef()
浅层次响应式
import { ref, Ref, shallowRef, triggerRef } from "vue";
const job:string = ref('web开发')
const person:Ref<string> = shallowRef({name: 'lisi'})
person.value.name = 'wangwu' // 视图不会更新,但值已经 改变
person.value = {name: 'wangwu'} // 视图更新
// 注意: 别和ref一起使用
const change = () => {
job.value = 'java开发'
person.value.name = 'wangwu' // 和ref数据一起使用的时候,会更新依赖,是shallowRef强制更新,ref底层调用triggerRef
}
const change1 = ()=> {
person.value.name = 'wangwu'
triggerRef(person) // 强制更新依赖,使视图更新
}
customRef 自定义ref
import { customRef } from "vue";
function MyRef<T>(value: T) {
return customRef((track, trigger) => {
return {
get() {
track(); // 收集依赖
return value;
},
set(newValue) {
value = newValue;
trigger(); // 触发依赖更新
},
};
});
}
const age = MyRef(18);
const change = () => {
age.value = 30;
};
isRef
判断是不是一个ref对象
import { ref, Ref,isRef } from 'vue'
let message: Ref<string | number> = ref("我是message")
let notRef:number = 123
const changeMsg = () => {3
message.value = "change msg"
console.log(isRef(message)); //true
console.log(isRef(notRef)); //false
}
toRef
基于响应式对象上的一个属性,创建一个对应的 ref。这样创建的 ref 与其源属性保持同步:改变源属性的值将更新 ref 的值
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性