响应式的数据判断isReactive, isRef, isReadonly, isProxy

20_脚手架/vue3_test/19.src_响应式的判断/App.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="app">
+    <h3>我是app组件（祖）</h3>
+  </div>
+</template>
+
+<script>
+import {reactive, ref, toRefs, provide, readonly, isReactive, isRef, isReadonly, isProxy} from "vue";
+
+export default {
+  name: 'App',
+  setup() {
+    let car = reactive({
+      name:'奔驰',
+      price: '40W'
+    })
+    let car2 = readonly(car)
+    let sum = ref(0)
+
+    console.log(isRef(sum))
+    console.log(isReactive(car))
+    console.log(isReadonly(car2))
+    console.log(isProxy(car))
+
+    return {...toRefs(car)}
+  }
+}
+</script>
+
+<style>
+  .app{
+    background-color: gray;
+    padding: 10px;
+  }
+</style>

20_脚手架/vue3_test/19.src_响应式的判断/main.js

@@ -0,0 +1,10 @@
+// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
+import { createApp } from 'vue'
+import App from './App.vue'
+
+// createApp(App).mount('#app')
+
+// 创建应用实例对象
+const app = createApp(App)
+console.log('@@@',app)
+app.mount('#app')

20_脚手架/vue3_test/src/App.vue

@@ -1,23 +1,27 @@
 <template>
   <div class="app">
-    <h3>我是app组件（祖）{{name}}-{{price}}</h3>
-    <child/>
+    <h3>我是app组件（祖）</h3>
   </div>
 </template>
 
 <script>
-import child from "@/components/Child.vue";
-import {reactive, toRefs, provide} from "vue";
+import {reactive, ref, toRefs, provide, readonly, isReactive, isRef, isReadonly, isProxy} from "vue";
 
 export default {
   name: 'App',
-  components:{child},
   setup() {
     let car = reactive({
       name:'奔驰',
       price: '40W'
     })
-    provide('car', car)  //给自己的后代组件传递数据
+    let car2 = readonly(car)
+    let sum = ref(0)
+
+    console.log(isRef(sum))
+    console.log(isReactive(car))
+    console.log(isReadonly(car2))
+    console.log(isProxy(car))
+
     return {...toRefs(car)}
   }
 }

20_脚手架/vue3_test/src/components/Child.vue

@@ -1,21 +0,0 @@
-<template>
-  <div class="child">
-    <h3>我是child组件（子）</h3>
-    <son/>
-  </div>
-</template>
-
-<script>
-import son from "@/components/Son.vue";
-export default {
-  name: "Child",
-  components:{son}
-}
-</script>
-
-<style>
-  .child{
-    background-color: skyblue;
-    padding: 10px;
-  }
-</style>

20_脚手架/vue3_test/src/components/Son.vue

@@ -1,26 +0,0 @@
-<template>
-  <div class="son">
-    <h3>我是son组件（孙）{{car.name}}-{{car.price}}</h3>
-  </div>
-</template>
-
-<script>
-import {inject} from "vue";
-
-export default {
-  name: "Son",
-  setup() {
-    let car = inject('car')
-    console.log('---son---', car)
-
-    return {car}
-  }
-}
-</script>
-
-<style scoped>
-  .son{
-    background-color: orange;
-    padding: 10px;
-  }
-</style>