定义数据是通过ref或reactive来定义的，刚开始使用数据时，可以确定数据的类型，但是在经过方法处理过后，你还能确定吗？

肯定有同学对自己很自信，感觉自己能判断，如果是多个方法呢？ 如果数据是从其他组件传递过来呢？你还能确定吗

所以知道常用的判断响应式数据的方法，还是很重要的（有剑不用，和根本没有剑是不一样的）

老规矩：使用这些方法，都是要先引入的

import { isRef,isReactive,isReadonly,isProxy } from 'vue'

isRef

检查一个值是否为ref对象

<script setup lang="ts">
import { ref,reactive,isRef,readonly,isReactive,isReadonly,isProxy} from 'vue'

const dataRef = ref(0)
const data = reactive({
  name: '大哥',
  age: 20
})
const dataReadonly = readonly(data)

检测结果：
console.log(isRef(dataRef)) // true
console.log(isRef(data)) // false
</script>

isReactive

检查一个对象是否是由reactive创建的响应式对象做代理

<script setup lang="ts">
import { ref,reactive,isRef,readonly,isReactive,isReadonly,isProxy} from 'vue'

const dataRef = ref(0)
const data = reactive({
  name: '大哥',
  age: 20
})
const dataReadonly = readonly(data)

检测结果：
console.log(isReactive(data)) // true
console.log(isReactive(dataRef)) // false
</script>

isReadonly

检查一个对象是否是由readonly创建的只读对象做代理

<script setup lang="ts">
import { ref,reactive,isRef,readonly,isReactive,isReadonly,isProxy} from 'vue'

const dataRef = ref(0)
const data = reactive({
  name: '大哥',
  age: 20
})
const dataReadonly = readonly(data)

检测结果：
console.log(isReadonly(dataReadonly))  // true
console.log(isReadonly(data)) // false
</script>

isProxy

检查一个对象是否是由readonly或reactive方法创建的代理

有些同学有疑惑，为什么isProxy不能判断ref定义的数据呢？

因为ref对基本数据类型还是按照Object.defineProperty里面的get和set进行数据劫持然后进行响应的，如果是对象类型的话，是用到的Proxy，vue3把它封装在reactive函数里，就相当于ref中定义的是对象，会自动调用reactive来处理函数。

<script setup lang="ts">
import { ref,reactive,isRef,readonly,isReactive,isReadonly,isProxy} from 'vue'

const dataRef = ref(0)
const data = reactive({
  name: '大哥',
  age: 20
})
const dataReadonly = readonly(data)

检测结果：
console.log(isProxy(dataRef)) // false
console.log(isProxy(data)) // true
console.log(isProxy(dataReadonly)) // true
</script>

router

vue2是用this.$router.push来进行跳转

在vue3中，是定义了一个vue-router然后引入的useRoute,useRouter 相当于vue2的 this.$route,然后其他之前vue2的操作都可以进行

<script setup lang="ts">
import {useRouter,useRoute} from "vue-router";
  const router= useRouter()
  const route= useRoute()
  // vue2方法
  onMounted(()=>{
    this.$router.push('/about') // 跳转页面
  })
   // vue3方法
  onMounted(()=>{
    console.log(route.query.code)
  })
</script>