当前位置:首页 > 编程笔记 > 正文
已解决

vue3 ref使用(三)

来自网友在路上 170870提问 提问时间:2023-09-21 09:26:06阅读次数: 70

最佳答案 问答题库708位专家为你答疑解惑

1:ref,shallowRef

ref 深层次转写

isRef 判断某个值是否为Ref

shallowRef 浅层次的响应

ref和shallowRef 两者不能一起使用,shallowRef会被ref影响

import { ref, reactive, shallowRef,triggerRef } from 'vue'
const test = ref({ name: '姓名' })
const test1 = shallowRef({ name: '姓名1' })

单独使用时:

// ref 改变时
const onChange = () => {test.value.name = 1 // 可以改变
}// shallowRef 改变时
const onChange = () => {test1.value = {name: '姓名2'}
// 浅层次 可以改变
}

同时使用时:

const onChange = () => {test.value.name = 1 // 可以改变test1.value.name = '222' // 这时shallowRef 底层会被ref所影响,也会发生改变
}

通过triggerRef修改shallowRef

const onChange = () => {test1.value.name = '222'triggerRef(test1) // 通过 triggerRef 修改shallowRef
}

2:ref的获取dom

const dom1 = ref<HTMLDivElement>() // 通过HTMLDivElement类型声明
const onChange = () => {console.log(dom1.value?.innerText) //在页面没有创建的时候,是拿不到值得,必须放在dom生成之后,再通过链式访问拿到dom内容
}

查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"vue3 ref使用(三)":http://eshow365.cn/6-10592-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!