new

v3_project/15_provide和inject/App.vue

@@ -0,0 +1,30 @@
+<template>
+  <h2>provide 和 inject</h2>
+  <p>当前的颜色: {{ color }}</p>
+  <button @click="color='red'">红色</button>
+  <button @click="color='yellow'">黄色</button>
+  <button @click="color='green'">绿色</button>
+  <hr>
+  <Child></Child>
+</template>
+
+<script lang="ts">
+import { defineComponent, provide, ref } from "vue";
+import Child from "./components/Child.vue"
+export default defineComponent({
+  //实现跨层级组件(祖孙)之间通信
+  setup() {
+    const color = ref("red");
+    provide('color',color)
+    return {
+      color,
+    };
+  },
+  components: {
+    Child
+  }
+});
+</script>
+
+<style scoped>
+</style>

v3_project/15_provide和inject/components/Child.vue

@@ -0,0 +1,25 @@
+<template>
+  <h2>子级组件</h2>
+  <hr>
+  <Son></Son>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Son from './Son.vue'
+export default defineComponent({
+  name: "Child",
+  setup () {
+    
+
+    return {}
+  },
+  components: {
+    Son
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

v3_project/15_provide和inject/components/Son.vue

@@ -0,0 +1,22 @@
+<template>
+  <h2 :style="{color}">son级组件</h2>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject } from 'vue'
+
+export default defineComponent({
+  name: 'Son',
+  setup () {
+    const color = inject('color')
+
+    return {
+      color
+    }
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

v3_project/16_响应式数据的判断/App.vue

@@ -0,0 +1,30 @@
+<template>
+  <h2>响应式数据的判断</h2>
+</template>
+
+<script lang="ts">
+import { defineComponent ,ref,isRef, isReactive, reactive, isReadonly, readonly, isProxy} from 'vue'
+
+export default defineComponent({
+  //isRef
+  //isReactive
+  //isReadonly
+  //isProxy
+  setup () {
+    //isRef: 检查一个值是否为ref对象
+    console.log(isRef(ref({})))
+    //isReactive检查一个对象是否是reactive创建的响应式代理
+    console.log(isReactive(reactive({})))
+    //isReadonly 检查一个对象是否是由readonly创建的只读代理
+    console.log(isReadonly(readonly({})))
+    //isProxy 检查一个对象是否是由reactive或者readonly方法创建的代理
+    console.log(isProxy(readonly({})))
+    console.log(isProxy(reactive({})))
+    return {}
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

v3_project/src/App.vue

@@ -1,50 +1,26 @@
 <template>
-  <h2> toRaw 与 markRaw</h2>
-  <h3>state: {{ state }}</h3>
-  <hr>
-  <button @click="testToRaw">测试toRaw</button>
-  <button @click="testMarkRow">测试markRaw</button>
+  <h2>响应式数据的判断</h2>
 </template>
 
 <script lang="ts">
-import { defineComponent, markRaw, reactive, toRaw } from 'vue'
-interface userInfo{
-  name: string,
-  age: number,
-  likes?: string[]
-}
+import { defineComponent ,ref,isRef, isReactive, reactive, isReadonly, readonly, isProxy} from 'vue'
+
 export default defineComponent({
+  //isRef
+  //isReactive
+  //isReadonly
+  //isProxy
   setup () {
-    const state = reactive<userInfo>({
-      name:'zs',
-      age: 18
-    })
-    const testToRaw = ()=>{
-      //把代理对象编程普通对象 数据变化 页面不变化
-      const user = toRaw(state)
-      user.name += '=='
-      console.log(111)
-    }
-    const testMarkRow = ()=>{
-      // state.likes = ['吃','喝']
-      // state.likes[0] += '='
-      // console.log(state)
-      const likes = ['吃','喝']
-      state.likes = markRaw(likes)
-      //markRaw标记独享的数据，从此以后都不能成为代理对象了
-      setInterval(()=>{
-        if(state.likes){
-          state.likes[0] += '='
-          console.log('定时器启动')
-        }
-      },1000)
-    }
-
-    return {
-      state,
-      testToRaw,
-      testMarkRow
-    }
+    //isRef: 检查一个值是否为ref对象
+    console.log(isRef(ref({})))
+    //isReactive检查一个对象是否是reactive创建的响应式代理
+    console.log(isReactive(reactive({})))
+    //isReadonly 检查一个对象是否是由readonly创建的只读代理
+    console.log(isReadonly(readonly({})))
+    //isProxy 检查一个对象是否是由reactive或者readonly方法创建的代理
+    console.log(isProxy(readonly({})))
+    console.log(isProxy(reactive({})))
+    return {}
   }
 })
 </script>

v3_project/src/components/Child.vue

@@ -1,87 +0,0 @@
-<template>
-  <h2>子组件</h2>
-  <h3>msg: {{ msg }}</h3>
-  <button @click="update">更新</button>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  ref,
-  onBeforeMount,
-  onBeforeUnmount,
-  onBeforeUpdate,
-  onMounted,
-  onUnmounted,
-  onUpdated,
-} from "vue";
-
-export default defineComponent({
-  name: "Child",
-  //vue2生命周期 钩子函数
-  beforeCreate() {
-    console.log("2.0 beforeCreate");
-  },
-  created() {
-    console.log("2.0 created");
-  },
-  beforeMount() {
-    console.log("2.0 beforeMount");
-  },
-  mounted() {
-    console.log("2.0 mounted");
-  },
-  beforeUpdate() {
-    console.log("2.0 beforeUpdate");
-  },
-  updated() {
-    console.log("2.0 updated");
-  },
-  // beforeDestroy(){
-  //   console.log('2.0 beforeDestroy')
-  // },
-  // destroyed(){
-  //   console.log('2.0 destroyed')
-  // },
-  beforeUnmount() {
-    console.log("2.0 beforeUnmount");
-  },
-  unmounted() {
-    console.log("2.0 unmounted");
-  },
-  setup() {
-    //vue3生命周期函数
-    console.log("3.0 setup");
-
-    const msg = ref("abc");
-    const update = () => {
-      msg.value += "!";
-    };
-    onBeforeMount(() => {
-      console.log("3.0 onBeforeMount");
-    });
-    onMounted(() => {
-      console.log("3.0 onMounted");
-    });
-    onBeforeUpdate(() => {
-      console.log("3.0 onBeforeUpdate");
-    });
-    onUpdated(() => {
-      console.log("3.0 onUpdated");
-    });
-    onBeforeUnmount(() => {
-      console.log("3.0 onBeforeUnmount");
-    });
-    onUnmounted(() => {
-      console.log("3.0 onUnmounted");
-    });
-    return {
-      msg,
-      update,
-    };
-  },
-});
-</script>
-
-<style scoped>
-</style>