Vue3中响应式数据的判断

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>

• 启动应用，测试效果