vue3响应式数据验证

1.app.vue  代码

<template>
  <h1>{{ read.msg }} </h1>
</template>

<script setup>
  import { ref,reactive,readonly,isReadonly,isReactive,isRef,unref,isProxy } from 'vue';

  let rd=reactive({
    msg:'daw eg ruk'
  })

let read = readonly(rd)
console.log(read);

setTimeout(()=>{
  //为了证明readonly创建的是只读类型 不可修改
  read.msg='45641e2a3'
},2000)

let re=ref(0)
console.log(isReadonly(read));
console.log(isReadonly(rd));
console.log(isReactive(rd));
console.log(isRef(re));
console.log(unref(re));
console.log(unref(rd));
console.log(isProxy(rd));

</script>

<style scoped>

</style>                   

2. Child.vue 代码

<template>
    <h1>{{ msg }}</h1>

    <h3>provide/inject --------------->{{ minges.title }}</h3>
</template>

<script setup >
import { ref,inject, defineProps} from 'vue';

let msg=ref('child')

defineProps(['msg'])

let minges=inject('ge')  //接受 隔代传入的  依赖注入
</script>

<style >

</style>