vue3中的ref、shallowRef
# vue3中的ref、shallowRef
# ref()
在 Vue3 中我们是没有 this
的,所以当然也没有 this.$refs
。想要获取 ref,我们只能通过声明变量的方式。
官方说明:接受一个内部值,返回一个响应式的、可更改的
ref
对象,此对象只有一个指向其内部值的属性.value
。
function ref<T>(value: T): Ref<UnwrapRef<T>>
interface Ref<T> {
value: T
}
1
2
3
4
5
2
3
4
5
ref
对象是可更改的,也就是说你可以为 .value
赋予新的值。它也是响应式的,即所有对 .value
的操作都将被追踪,并且写操作会触发与之相关的副作用。
如果将一个对象赋值给 ref
,那么这个对象将通过 reactive()
转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref
,它们将被深层地解包。
示例:
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
1
2
3
4
5
2
3
4
5
# shallowRef()
ref()
的浅层作用形式。
function shallowRef<T>(value: T): ShallowRef<T>
interface ShallowRef<T> {
value: T
}
1
2
3
4
5
2
3
4
5
和 ref()
不同,浅层 ref
的内部值将会原样存储和暴露,并且不会被深层递归地转为响应式。只有对 .value
的访问是响应式的。
shallowRef()
常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成。
示例:
const state = shallowRef({ count: 1 })
// 不会触发更改
state.value.count = 2
// 会触发更改
state.value = { count: 2 }
1
2
3
4
5
6
7
2
3
4
5
6
7
上次更新: 2023/05/09, 17:54:37