本文主要讲述toRef、toRefs和toRaw的功能和使用方法。
toRef
功能是将对象的某一个属性变成ref,如果原始对象是响应式的是会更新视图并且改变数据的,如果原始对象是非响应式的就不会更新视图数据是会变的。
<template>
<div>
<button @click="change">按钮</button>
{{state}}
</div>
</template>
<script setup lang="ts">
import { reactive, toRef } from 'vue'
const obj = {
foo: 1,
bar: 1
}
const state = toRef(obj, 'bar')
// bar 转化为响应式对象
const change = () => {
state.value++
console.log(obj, state);
}
</script>
结果:视图上的数据不变,控制台console的结果是obj={
“foo”: 1,
“bar”: 2
}
state=2
toRefs
将对象中属性逐个解构出来,变成响应式。如果原始对象是响应式的是会更新视图并且改变数据的,如果原始对象是非响应式的就不会更新视图数据是会变的。
import { reactive, toRefs } from 'vue'
const obj = reactive({
foo: 1,
bar: 1
})
let { foo, bar } = toRefs(obj)
foo.value++
console.log(foo, bar);
结果:2,1
如果obj没有使用reactive包裹,则视图不会更新结果。
toRaw
import { reactive, toRaw } from 'vue'
const obj = reactive({
foo: 1,
bar: 1
})
const state = toRaw(obj)
// 响应式对象转化为普通对象
const change = () => {
//state=2;赋值或者操作会报错
console.log(obj, state);
}
结果:{foo: 1, bar: 1}