生命周期2

2 years ago · 3961b3340b
parent 5017d5589b
commit 3961b3340b
2 changed files with 70 additions and 6 deletions
--- a/17_生命周期/1.引出生命周期.html
+++ b/17_生命周期/1.引出生命周期.html
@ -23,10 +23,10 @@
        // Vue完成模板解析，并把真实的DOM放入页面后调用mounted注意这里是方法函数，不是对象，刷新页面不会调用mounted
        mounted() {
            console.log('mounted')
-          setInterval(()=>{
+            setInterval(() => {
                this.opacity -= 0.01
                if (this.opacity <= 0) this.opacity = 1
-          },16)
+            }, 16)
        }
    })
    // setInterval(()=>{
--- a/17_生命周期/2.分析生命周期.html
+++ 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>