Vue的生命周期一起来看看

父beforeCreate ==> 父created ==> 父beforeMount ==> 子beforeCreate ==> 子created ==> 子beforeMount ==> 子mounted ==> 父mounted

父beforeUpdate ==> 子beforeUpdate ==> 子updated ==> 父updated

父beforeDestroy ==> 子beforeDestroy ==> 子destroyed ==> 父destroyed

 <div id="root">
        <!-- 让h3透明度产生过渡的效果 -->
        <h3 :style="{opacity:opacity}">欢迎学习Vue!</h3>
        <button @click="des">点击我销毁</button>
    </div>
    <script>
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#root',
            data: {
                opacity: 1
            },
            methods: {  
                des(){
                    // 触发此函数必定调用，beforeDestroy()，destroyed()
                    this.$destroy()
                }
            },
            mounted() { //挂载
                
                this.timer = setInterval(() => {
                    this.opacity -= 0.01
                    if (this.opacity <= 0)
                        this.opacity = 1
                }, 10);
            },
            beforeDestroy() {
                console.log("beforeDestroy - 清除定时器");
                clearInterval(this.timer)
            },
            destroyed() {
                console.log("destroyed - 销毁完毕")
            },
        })
    </script>

  <div id="root">
        <h3>n的值为：{{n}}</h3>
        <button @click="add">点击我n+1</button>
        <button @click="remove">点击销毁vm</button>
    </div>
    <script>
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#root',
            data: {
                n:1
            },
            methods: {
                add(){
                    this.n++
                },
                remove(){
                    this.$destroy()
                }
            },
            beforeCreate() {
                
                console.log("beforeCreate");
                //console.log(this.n);  //undefined
                // console.log(this.add()); // this.add is not a function
                // debugger
            },
            created() {
                
                console.log("created");
                // console.log(this.n);  // 1
                // console.log(this.add());  // undefined
                // debugger
            },
            beforeMount() {
                
                 console.log("beforeMount");
                //  debugger
            },
            mounted() {
                
                console.log("mounted");
                // debugger
            },
            beforeUpdate() {
                
                console.log("beforeUpdate");
            },
            updated() {
                
                 console.log("updated");
            },
            beforeDestroy() {
                
                console.log("beforeDestroy");
            },
            destroyed() {
                
                console.log("destroyed");
            },
        })
    </script>