继续添加注释

051_生命周期_销毁流程 - 图1

源码

<!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>

            <button @click="bye">点我销毁vm</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++
                },
                bye(){
                    console.log('bye')

                    //销毁vm。 但是需要注意：虽然此处虽然销毁了vm，但是vm之前的工作成果还在。
                    //功能： 完全销毁一个实例vm。 清理vm与vm的连接，解绑vm的全部指令及自定义事件监听器（并不会解绑已绑定的原生DOM事件）
                    this.$destroy()
                }
            },

            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'

                //下面我们看看 this.$el 中内容： this.$el 实际上记录着 真实DOM 的旧版本内容。
                console.log('mounted', this.$el instanceof HTMLElement) //true
            },

            //更新之前
            beforeUpdate() {
                console.log('beforeUpdate')

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

                console.log(this)
                //debugger 
            },

            //销毁之前
            beforeDestroy() {
                console.log('beforeDestroy')

                console.log(this.n) //此时还是可以的
                //this.add()             //虽然此时也可以调用，但是已经不会更新界面了(这点很重要 ★★★)。 因为点击 销毁按钮，才会来到这里。
                //debugger 
            },
            //销毁完毕
            destroyed() {
                console.log('destroyed')

                console.log(this.n) //
                //debugger 
            },
        })
    </script>
</html>