SOURCE

console 命令行工具 X clear

                    
>
console
Vue.component('test-3',{
  template: `<div>3</div>`,
  beforeCreate:()=>console.log('beforeCreate','孙'),
  created:()=>console.log('created','孙'),
  beforeMount:()=>console.log('beforeMount','孙'),
  mounted:()=>console.log('mounted','孙'),
  beforeUpdate:()=>console.log('beforeUpdate','孙'),
  updated:()=>console.log('updated','孙'),
  activated:()=>console.log('activated','孙'),
  deactivated:()=>console.log('deactivated','孙'),
  beforeDestroy:()=>console.log('beforeDestroy','孙'),
  destroyed:()=>console.log('destroyed','孙'),
  errorCaptured:()=>console.log('errorCaptured','孙')
})
Vue.component('test-2',{
  template: `<div>2<test-3 /></div>`,
  beforeCreate:()=>console.log('beforeCreate','子'),
  created:()=>console.log('created','子'),
  beforeMount:()=>console.log('beforeMount','子'),
  mounted:()=>console.log('mounted','子'),
  beforeUpdate:()=>console.log('beforeUpdate','子'),
  updated:()=>console.log('updated','子'),
  activated:()=>console.log('activated','子'),
  deactivated:()=>console.log('deactivated','子'),
  beforeDestroy:()=>console.log('beforeDestroy','子'),
  destroyed:()=>console.log('destroyed','子'),
  errorCaptured:()=>console.log('errorCaptured','子')
})
top.vm1 = vm1 = new Vue({
  el: '#app',
  beforeCreate:()=>console.log('beforeCreate','1'),
  created:()=>console.log('created','1'),
  beforeMount:()=>console.log('beforeMount','1'),
  mounted:()=>console.log('mounted','1'),
  beforeUpdate:()=>console.log('beforeUpdate','1'),
  updated:()=>console.log('updated','1'),
  activated:()=>console.log('activated','1'),
  deactivated:()=>console.log('deactivated','1'),
  beforeDestroy:()=>console.log('beforeDestroy','1'),
  destroyed:()=>console.log('destroyed','1'),
  errorCaptured:()=>console.log('errorCaptured','1')
})
<div id="app">
  123
  <div>
    <test-2 />
  </div>
</div>
<button onclick="vm1.$destroy()">vm1.$destroy()</button>