Vue3中,常用的响应式数据判断方法有以下几个:
isRef
,是否是由ref
定义的响应式数据isReactive
,是否是由reactive
定义的响应式数据isReadonly
,是否是由readonly
定义的数据isProxy
,是否是由reactive
或readonly
定义的数据
看个简单的例子吧。
- main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
- App.vue
<template>
<h2>当前和值为{{sum}}</h2>
<h2>这台{{brand}}的售价是{{price}}</h2>
</template>
<script>
import { ref,reactive,readonly,toRefs, isRef,isReactive, isReadonly, isProxy} from 'vue';
export default {
name:"App",
setup(){
let sum = ref(0);
let car = reactive({
brand:"BYD",
price:"30W"
})
let car2 = readonly(car);
console.log("isRef(sum)=",isRef(sum));
console.log("isReactive(car)=",isReactive(car));
console.log("isReadonly(car2)=",isReadonly(car2));
console.log("isProxy(car)=",isProxy(car));
console.log("isProxy(car2)=",isProxy(car2));
console.log("isRef(car)=",isRef(car));
return {
sum,
...toRefs(car)
}
}
}
</script>
- 启动应用,测试效果