From 2bcd05f8a72d68f073a4bdbc1c05d9ef752ec125 Mon Sep 17 00:00:00 2001
From: roger <roger_sun@outlook.com>
Date: Mon, 9 Jan 2023 13:54:29 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=94=9F=E5=91=BD=E5=91=A8?=
 =?UTF-8?q?=E6=9C=9F=E5=AD=A6=E4=B9=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 17_生命周期/2.分析生命周期.html | 37 ++++++++++++++++
 17_生命周期/3.总结生命周期.html | 52 +++++++++++++++++++++++
 2 files changed, 89 insertions(+)
 create mode 100644 17_生命周期/3.总结生命周期.html
diff --git a/17_生命周期/2.分析生命周期.html b/17_生命周期/2.分析生命周期.html
index d329348..bd2b492 100644
--- a/17_生命周期/2.分析生命周期.html
+++ b/17_生命周期/2.分析生命周期.html
@@ -9,6 +9,7 @@
 <div id="root" x="1">
     <h2>当前的n值是：{{n}}</h2>
     <button @click="add">n+1</button>
+    <button @click="bye">销毁vm</button>
 </div>
 <script type="text/javascript">
     Vue.config.productionTip = false  // 组织开发环境提示
@@ -27,9 +28,22 @@
         },
         methods: {
             add() {
+                console.log("add")
                 this.n++
+            },
+            bye() {
+                console.log("bye")
+                this.$destroy()
             }
         },
+        watch: {
+            n() {
+                console.log("n变了")
+            }
+        },
+        // 常用的生命周期包含 mounted和beforeDestroy
+        // mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等（初始化操作）
+        // beforeDestroy： 清除定时器、解绑自定义事件、取消订阅消息等（收尾工作）
         // 初始化步骤1， 初始化了生命周期和事件，但是没有开始数据代理
         beforeCreate(){
             console.log("beforeCreate")
@@ -53,8 +67,31 @@
         mounted() {
             console.log("mounted")
             console.log(this)
+            // debugger
+        },
+        // 当数据更新后触发更新流程，此时data数据已更新，并步骤之后会生成新的虚拟DOM并与老的虚拟DOM做对比，执行updated来将差异重新渲染
+        beforeUpdate() {
+            console.log("beforeUpdate")
+            console.log(this.n)
+            console.log(this.$el)
+            // debugger
+        },
+        // 完成重新渲染
+        updated() {
+            console.log("updated")
+            console.log(this.n)
+            // debugger
+        },
+        // 完全销毁一个vm实例，清理它与实例的连接，解绑全部指令和自定义监听事件
+        beforeDestroy() {
+            console.log("beforeDestroy")
+            this.add()
             debugger
         },
+        // 完成销毁
+        destroyed() {
+            console.log("destroyed")
+        }
 
     })
 
diff --git a/17_生命周期/3.总结生命周期.html b/17_生命周期/3.总结生命周期.html
new file mode 100644
index 0000000..a490886
--- /dev/null
+++ b/17_生命周期/3.总结生命周期.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>总结生命周期</title>
+    <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+<div id="root">
+    <h2 v-if="isShowHello">你好</h2>
+    <h2 :style="{opacity}">欢迎学习Vue</h2>
+    <button @click="opacity = 1">透明度设置为1</button>
+    <button @click="stop">停止变换</button>
+</div>
+<script type="text/javascript">
+    Vue.config.productionTip = false  // 组织开发环境提示
+
+    // 创建Vue实例
+    const vm = new Vue({
+        el: '#root',
+        data: {
+            isShowHello: true,
+            opacity: 1
+        },
+        methods: {
+            stop() {
+                this.$destroy()
+            }
+        },
+
+        // Vue完成模板解析，并把真实的DOM放入页面后调用mounted注意这里是方法函数，不是对象，刷新页面不会调用mounted
+        mounted() {
+            console.log('mounted')
+            this.timer = setInterval(() => {
+                console.log("setInterval")
+                this.opacity -= 0.01
+                if (this.opacity <= 0) this.opacity = 1
+            }, 16)
+        },
+        beforeDestroy() {
+            console.log("beforeDestroy-清除定时器")
+            clearInterval(this.timer)
+        }
+    })
+    // setInterval(()=>{
+    //   vm.opacity -= 0.01
+    //   if (vm.opacity <= 0) vm.opacity = 1
+    // },16)
+</script>
+
+</body>
+</html>
\ No newline at end of file
