vue3

20.vue3/project1/src/App.vue

@@ -3,7 +3,7 @@
     <h1>App</h1>
     <hr>
     <hr>
-    <Demo14></Demo14>
+    <Demo16 v-if="isShow"></Demo16>
     <!-- <hr>
     <hr>
     <Demo8></Demo8>
@@ -41,7 +41,9 @@
 // import Demo7 from './components/Demo7.vue'
 // import Demo8 from './components/Demo8.vue'
 // import Demo9 from './components/Demo9.vue'
-import Demo14 from './components/Demo14.vue'
+import Demo16 from './components/Demo16.vue';
+import { ref } from 'vue';
+let isShow = ref(true);
 </script>
 
 <style lang="scss" scoped>

20.vue3/project1/src/components/Demo15.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <h1>watch:ref/reactive引用数据类型中的多个属性</h1>
+    <h2>我有{{ flower.num }}朵{{flower.type}}花--新的:{{ flower.aaa.b }}-- {{ flower.aaa.c }}</h2>
+    <button @click="changeNum">减少数量</button>
+    <button @click="changeFlower">修改全部</button>
+    <button @click="changeType">修改品类</button>
+    <button @click="changeC">修改C</button>
+    <button @click="changeA">修改AAA</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref, watch} from "vue" 
+let flower = ref({
+  type:"牡丹",
+  num: 10,
+  aaa:{
+    b:12,
+    c: 90
+  }
+});
+function changeA() {
+  flower.value.aaa = {
+    b: 1,
+    c: 2
+  }
+}
+function changeFlower() {
+    Object.assign(flower.value,{
+      type:'康乃馨',
+      num: 20,
+      aaa:{
+        b:3,
+        c:4
+      }
+    })
+}
+const changeNum = () => {
+  flower.value.num--;
+}
+const changeC = () => {
+  flower.value.aaa.c--;
+}
+const changeType = () => {
+  flower.value.type = '丁香'
+}
+watch([()=>flower.value.aaa.b,() => flower.value.num],(newValue)=>{
+    console.log(newValue)
+},{
+  deep: true,
+  immediate: true
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

20.vue3/project1/src/components/Demo16.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <h1>生命周期</h1>
+    {{ news }}
+    <button @click="changeMain">修改</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref, onMounted, onBeforeMount, onUpdated, onBeforeUpdate, onBeforeUnmount, onUnmounted} from "vue" 
+/**
+ * vue2:
+ * 创建:beforeCreate created  => setup
+ * 挂载:beforeMount mounted
+ * 更新:beforeUpdate updated
+ * 销毁:beforeDestory destoryed
+ * 
+ * keep-alive 组件缓存
+ * activated 被激活/进入组件时
+ * deactivated 失活/离开组件时
+ * 
+ * vue3:
+ * 创建：setup
+ * 挂载:onBeforeMount onMounted
+ * 更新:onBeforeUpdate onUpdated
+ * 卸载:onBeforeUnmount onUnmounted
+ */
+let news = ref("新的");
+console.log(news.value)
+onMounted(()=>{
+    console.log("挂载后")
+})
+onBeforeMount(()=>{
+    console.log("挂载前")
+})
+onUpdated(()=>{
+    console.log("更新后")
+})
+onBeforeUpdate(()=>{
+    console.log("更新前")
+})
+const changeMain = () => {
+    news.value = '哈哈哈'
+}
+onBeforeUnmount(() => {
+    console.log("卸载前")
+})
+onUnmounted(()=>{
+    console.log("卸载后")
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

9_vue/1_hellworld.html

@@ -19,6 +19,12 @@
             // 定义数据
             data:{
                 str:"hello world"
+            },
+            beforeCreate() {
+                console.log(this.str,'111')
+            },
+            created() {
+                console.log(this.str,'222')
             }
         })
     </script>