Vue的生命周期

<div id="app">
    {{count}}
    <p><button @click="add">ADD</button></p>
</div>

<p><button onclick="app.$destroy()">销毁</button></p>
var app = new Vue({
      el: '#app',
      data: {
          count: 1
      },
      methods: {
          add: function(){
              this.count++;
          }
      },
      beforeCreate: function(){
          console.log('1-beforeCreate 初始化之后');
      },
      created: function(){
          console.log('2-created 创建完成')
      },
      beforeMount: function(){
          console.log('3-beforeMount 挂载之前');
      },
      mounted: function(){
          console.log('4-mounted 被挂载之后');
      },
      beforeUpdate: function(){
          console.log('5-beforeUpdate 数据更新前');
      },
      updated: function(){
          console.log('6-updated 被更新后');
      },
      activated: function(){
          console.log('7-activated');
      },
      deactivated: function(){
          console.log('8-deactivated');
      },
      beforeDestroy: function(){
          console.log('9-beforeDestroy 销毁之前');
      },
      destroyed: function(){
          console.log('10-destroyed 销毁之后');
      }
  })
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章