响应式数据的判断
判断方式
| API | 含义 |
|---|---|
isProxy |
判断某个数据是否是由 reactive 或 readonly创建的 |
isReactive |
判断某个数据是否是通过 reactive 创建的 |
isReadonly |
判断某个数据是否是通过 readonly 创建的 |
isRef |
判断某个数据是否是一个 ref 对象 |
示例代码
<template>
<h2>响应式数据的判断</h2>
</template>
<script lang="ts">
import {
defineComponent,
isProxy,
isReactive,
isReadonly,
isRef,
reactive,
readonly,
ref,
} from "vue";
export default defineComponent({
name: "App",
setup() {
// isRef: 检查一个值是否为一个 ref 对象
console.log(isRef(ref({}))); //true
// isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
console.log(isReactive(reactive({}))); //true
// isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
console.log(isReadonly(readonly({}))); //true
// isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理
console.log(isProxy(readonly({}))); //true
console.log(isProxy(reactive({}))); //true
return {};
},
});
</script>
转换
unref
等同于：
isRef(val) ? val.value : val
function useNewTodo(todos){
todos = unref(todos);
// ...
}
toRef
得到一个响应式对象某个属性的 ref 格式
const state = reactive({
foo: 1,
bar: 2
})
const fooRef = toRef(state, 'foo'); // fooRef: {value: ...}
fooRef.value++
console.log(state.foo) // 2
state.foo++
console.log(fooRef.value) // 3
toRefs
把一个响应式对象的所有属性转换为 ref 格式，然后包装到一个
plain-object中返回
const state = reactive({
foo: 1,
bar: 2
})
const stateAsRefs = toRefs(state)
/*
stateAsRefs: not a proxy
{
foo: { value: ... },
bar: { value: ... }
}
*/
打赏作者
您的打赏是我前进的动力
微信
支付宝
vue3🛫 ReactivityApi：watch 和 watchEffect
上一篇
评论
