diff --git a/17_生命周期/1.引出生命周期.html b/17_生命周期/1.引出生命周期.html
index b31f040..4ed2553 100644
--- a/17_生命周期/1.引出生命周期.html
+++ b/17_生命周期/1.引出生命周期.html
@@ -17,16 +17,16 @@
     const vm = new Vue({
         el: '#root',
         data: {
-          isShowHello: true,
+            isShowHello: true,
             opacity: 1
         },
         // Vue完成模板解析，并把真实的DOM放入页面后调用mounted注意这里是方法函数，不是对象，刷新页面不会调用mounted
         mounted() {
-          console.log('mounted')
-          setInterval(()=>{
-            this.opacity -= 0.01
-            if (this.opacity <= 0) this.opacity = 1
-          },16)
+            console.log('mounted')
+            setInterval(() => {
+                this.opacity -= 0.01
+                if (this.opacity <= 0) this.opacity = 1
+            }, 16)
         }
     })
     // setInterval(()=>{
diff --git a/17_生命周期/2.分析生命周期.html b/17_生命周期/2.分析生命周期.html
new file mode 100644
index 0000000..d329348
--- /dev/null
+++ b/17_生命周期/2.分析生命周期.html
@@ -0,0 +1,64 @@
+<!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" x="1">
+    <h2>当前的n值是：{{n}}</h2>
+    <button @click="add">n+1</button>
+</div>
+<script type="text/javascript">
+    Vue.config.productionTip = false  // 组织开发环境提示
+
+    // 创建Vue实例
+    const vm = new Vue({
+        el: '#root',
+        // template: `
+        //     <div>
+        //         <h2>当前的n值是：{{n}}</h2>
+        //         <button @click="add">n+1</button>
+        //     </div>
+        // `,
+        data: {
+          n: 1,
+        },
+        methods: {
+            add() {
+                this.n++
+            }
+        },
+        // 初始化步骤1， 初始化了生命周期和事件，但是没有开始数据代理
+        beforeCreate(){
+            console.log("beforeCreate")
+            console.log(this)
+            // debugger
+        },
+        // 初始化步骤2，完成数据监测，数据代理
+        created() {
+            console.log("created")
+            console.log(this)
+            // debugger
+        },
+        // Vue开始解析模板，在内存中生成虚拟DOM，但未渲染页面，此时对DOM的操作都会在渲染真实DOM时失效
+        beforeMount() {
+            console.log("beforeMount")
+            console.log(this)
+            document.querySelector('h2').innerText = "Test"
+            // debugger
+        },
+        // 将虚拟DOM渲染成真实DOM, 完成渲染后所有DOM操作都会生效，此时完成初始化操作
+        mounted() {
+            console.log("mounted")
+            console.log(this)
+            debugger
+        },
+
+    })
+
+</script>
+
+</body>
+</html>
\ No newline at end of file
