-
ref 把对象转化为响应式的;
-
shallowRef是浅层响应式数据,即:只有对value整体修改,才能更新到视图层。而修改具体属性值时,不会更新视图。(shallowReactive和shallowRef一样的效果);
-
shallowRef() 存在的意义:将最终的结果输出到视图,节省一些不必要的输出;
-
shallowRef() 对属性值的修改是可以的,只是不更新到视图层;
-
shallowRef()对属性值修改之后,我们可以通过triggerRef()函数手动更新到视图;
-
shallowRef()在某些情况下执行属性值修改时,同步更新到视图层。ref 和 shallowRef 不能同时使用,会影响shallowRef造成视图更新,ref底层更新逻辑的时候,会调用triggerRef函数;
-
triggerRef 函数做强制更新;
-
小妙招:控制台设置,启用自定义格式化程序,试一试呦;
-
ref 获取dom元素
<div ref="dom">
<button @click="clickFn">改变</button>
</div>
const dom = ref<HTMLDivElement>()
const clickFn = () => {
console.log(dom.value?.innerHTML)
}
- shallowRef使用例子
<script lang="ts" setup>
import { ref, shallowRef } from 'vue'
type M = {
name: string
}
const message1 = ref<M>({
name: '小龙1'
})
const message2 = shallowRef<M>({
name: '小龙1'
})
const clickFn = () => {
// 不会更新视图
message2.value.name = '修改具体name值,不更新'
triggerRef(message2)
}
const clickFn = () => {
// 更新视图
message2.value = {
name: 'value 视图更新'
}
}
const clickFn = () => {
// 不会更新视图
message2.value.name = '修改具体name值,不更新'
// 调用 triggerRef 函数更新
triggerRef(message2)
}
const clickFn = () => {
// 原本不会更新视图,但是ref底层逻辑更新的时候,调用triggerRef函数,更新视图
message1.value.name = '带动更新'
message2.value.name = '修改具体name值,不更新'
}
</script>
- 自定义customRef
import { customRef } from 'vue'
// 自己实现的一个customRef,加简单的防抖
function myRef<T>(value: T) {
return customRef((track, trigger) => {
let timer: any
return {
get() {
// 收集依赖
track()
return value
},
set(newVal) {
// 出发依赖
clearTimeout(timer)
timer = setTimeout(() => {
timer = null
value = newVal
trigger()
}, 500)
}
}
})
}
// 使用 自定义的customRef
const obj = myRef<object>({
name: '小龙1'
})
原文地址:http://www.cnblogs.com/DL-CODER/p/16907612.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性