lifecycle.png

---

vm.destroy()

vm销毁了.PNG

<div class="root" :n="n">
    <h1>让n加1:   {{n}}</h1>
    <button @click="add">点击加1</button>
    <button @click="quit">销毁了</button>
  </div>
  <script>
  Vue.config.devtools = true;
  const vm = new Vue({
    el:'.root',
    data:{
      n:1
    },
    methods:{
      add(){
        this.n++
      },
      quit(){
        this.$destroy()//销毁了，但是页面之前更新的数据不会被销毁，有残留
      }
    },
    beforeCreate(){
      console.log('beforeCreate')
      console.log(this)
      // debugger
    },
    created(){
      console.log('created')
      console.log(this)
      //debugger
    },
    beforMount(){
      console.log('beforeMount')
      console.log(this)
      // debugger
    },
    mounted(){
      console.log('mounted')
      console.log(this)
      // debugger
    },
    beforeUpdate(){
      console.log('beforeUpdate')
      console.log(this.n)
      // debugger
    },
    updated(){
      console.log('updated')
      console.log(this.n)
      // debugger
    }
  })
  // vm.$mount('.root')
  </script>

• 一般用来销毁组件
• vm销毁，事件还是被响应着，系统事件不会被销毁，只有自定义事件被销毁，点击还是会触发回调，但是数据没有变化

---

beforeDestroy、destroyed

• beforeDestroy 方法数据都可用，马上就要被销毁了
• 还能访问到数据，但是不能修改数据了
• 一般做收尾的事：关闭定时器，取消订阅，解绑自定义事件
• destroyed 数据方法定时器什么都没有了

  <div class="root" :n="n">
    <h1>让n加1:   {{n}}</h1>
    <button @click="add">点击加1</button>
    <button @click="quit">销毁了</button>
  </div>
  <script>
  Vue.config.devtools = true;
  const vm = new Vue({
    el:'.root',
    data:{
      n:1
    },
    methods:{
      add(){
        this.n++
      },
      quit(){
        this.$destroy()
      }
    },
    beforeCreate(){
      console.log('beforeCreate')
      console.log(this)
      // debugger
    },
    created(){
      console.log('created')
      console.log(this)
      //debugger
    },
    beforMount(){
      console.log('beforeMount')
      console.log(this)
      // debugger
    },
    mounted(){
      console.log('mounted')
      console.log(this)
      // debugger
    },
    beforeUpdate(){
      console.log('beforeUpdate')
      console.log(this.n)
      // debugger
    },
    updated(){
      console.log('updated')
      console.log(this.n)
      // debugger
    },
    beforeDestroy(){
      console.log('beforeDestroy')//点击销毁按钮
      console.log(this.n)// 不会触发数据更新
      // debugger
    },
    destroyed(){
      console.log('destroyed')//点击销毁按钮
      console.log(this.n)
      // debugger
    }
  })
  // vm.$mount('.root')
  </script>

• 点击销毁按钮

  
  点击销毁按钮后.PNG

---

• vm.destroy() 自己销毁（自杀行为，一般都不用）>>>beforeDestroy 销毁就调用 >>>destroyed 数据方法都没有了