049_生命周期_挂载流程 - vuejs从入门到精通学习笔记 ★

this
源码
生命周期图示
官网生命周期图示
禹神版图示
生命周期函数调试
beforeCreate
created

this

生命周期里的this都是vm

源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>分析生命周期</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="root" :x="n">
            <h2 v-text="n"></h2>
            <h2>当前的n值是：{{n}}</h2>
            <button @click="add">点我n+1</button>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

        new Vue({
            el:'#root',

            //如果要分行写字符串，需要根据 ES6 的规定使用 ``
            //如果用此处的配置项，那么会把上面的 <div id= "root" :x="n">...</div> 全部替换为 <div> ... </div> 。即此处的template会把整个id="root"全部替换掉。
            // template:`
            //     <div>
            //         <h2>当前的n值是：{{n}}</h2>
            //         <button @click="add">点我n+1</button>
            //     </div>
            // `,

            data:{
                n:1
            },

            methods: {
                add(){
                    console.log('add')
                    this.n++
                }
            },

            watch:{
                n(){
                    console.log('n变了')
                }
            },
            beforeCreate() {
                console.log('beforeCreate')

                console.log(this)
                //debugger //设置一个断点 这也是一个标准的调试方式。调试思想:分析到哪，就把代码停在哪。
            },
            created() {
                console.log('created')

                console.log(this)
                //debugger 
            },
            beforeMount() {
                console.log('beforeMount')

                console.log(this)
                //debugger 

                //即使在这里操作了 DOM，你也看不见此时设置给 h2 中的内容
                //document.querySelector("h2").innerText = 'softool.cn'
            },

            //挂载完毕后,执行
            mounted() {
                console.log('mounted')

                console.log(this)
                //debugger

                //虽然此时操作DOM有效，但是应该尽量避免此时操作DOM
                //document.querySelector("h2").innerText = 'softool.cn'
            }
        })
    </script>
</html>