vue3学习（认识ref全家桶）
admin
2024-03-24 16:06:27
0次
学习链接：学习Vue3 第六章（认识Ref全家桶）_小满zs的博客-CSDN博客
ref
接受一个内部值，并返回一个响应式且可变的ref对象。ref对象仅有一个 .value property ，指向该内部值。
案例
我们这样无法改变message的值，因为message不是响应式的，无法被vue跟踪，需要改成ref
{{ message }}
改为ref
Ref TS对应的接口
interface Ref{value: T
} 注意：被ref包装后，需要用.value来进行赋值
{{ message }}
isRef
判断是不是一个ref对象
shallowRef
创建一个跟踪自身 .value变化的ref, 但不会使其值也变成响应式的
例子
修改其属性是非响应式的，这样是不会改变的
{{ message }}
例子2
这样是可以被监听到的修改value
{{ message }}
triggerRef
强制更新页面DOM
这样也可以改变其值
{{ message }}
customRef
自定义ref
customRef 是工厂函数要求我们返回一个对象，并且实现 get 和 set，适合去做防抖之类的
{{ name }}
追加问题：
track: 收集依赖。track()函数的调用，等同于手动 收集依赖；然后使用return value将值返回
trigger：触发依赖。 trigger()函数的嗲用，等同于用户手动 触发依赖更新。
vue3 中Ref本质也是使用track 与trigger去收集与触发依赖
相关内容
热门资讯
AI做攻略、“双向奔赴”……国...
本文转自：人民网人民网记者 许维娜今年国庆假期，AI（人工智能）成了不少年轻人的“旅行搭子”。行前做...
合肥的这个“梗”， 翻篇了
社交平台的评论区，曾长期流传一句专属于合肥的黑色幽默。有人问合肥哪里好玩，本地网友半开玩笑地回复：合...
7万+旅游中高层都在的群，今天...
做旅游这行，资源卡位、渠道互通、项目落地——往往就差一个“对的机会”。我们的行业社群已聚集70,00...
一场帐篷音乐节，如何让井研从“...
帐篷音乐节现场封面新闻记者 周洪攀10月的研溪湿地，晚风里裹着柑橘的清甜与民谣的回响。夜幕降临，10...
白鹤翩翩落星愿，上海迪士尼度假...
10月9日，世界候鸟日前夕，上海迪士尼度假区星愿公园的湖风里多了一分白鹤的灵动。三座白鹤雕塑正式揭幕...
成都锦江边赏初秋枫叶飘飘
目前，成都锦江边国华街枫叶树红了。近年来，国华街附近的几条街都栽种了红枫树，是城区较集中看枫叶的点位...
GBTA：商务旅行正在复苏，但...
亚太正在成为全球商务旅行增长的重要引擎。在经历疫情后的快速反弹之后，全球商务旅行正在进入一个新的增长...
从景区焕新到节赛引流 邹城双节...
齐鲁网·闪电新闻10月9日讯 中秋、国庆“双节”假期，邹城市文化和旅游局提前谋划、周密部署，立足自身...
江山如此多娇 且看石楼今朝
金秋十月，黄河岸畔秋意盎然，丰收盛会喜迎国庆。本次石楼国庆文旅活动以“江山如此多娇，且看石楼今朝”为...
海南国庆假期接待游客475.4...
2026年国庆假期，海南接待游客475.40万人次，较2025年增长13.1%，较2024年增长15...