Vue生命週期

時間 2019-11-09

標籤 vue 生命週期简体版

原文原文鏈接

建立(create)->掛載(mount)->更新(update)->銷燬(destory)

[
鉤子在服務器端渲染期間不被調用
1.beforeCreate(初始化以後，event/watcher 事件配置建立前)
2.created(建立後，完成了數據觀測，屬性方法運算，watch/event事件回調，掛載還沒有開始，$el不可見)
3.beforeMount(載入前，掛載開始前，相關render函數首次被調用)
4.mounted(el被新的Vm.$el替換，並掛載到實例上(模板中HTML渲染到頁面中))
5.beforeUpdate(數據更新前調用，發生在虛擬DOM從新渲染和打補丁以前，能夠在鉤子中進一步更改狀態，而不會觸發渲染過程)
6.updated(組件DOM根據虛擬DOM的從新渲染和補丁進行變化)
7.beforeDestroy(銷燬前，實例依然可用)
8.destroyed(銷燬調用，指定事件解綁，子實例和監聽器被移除)
]服務器

<body>
  <div id="app">
     {{dataindex}}
  </div>
    <script>
       var app = new Vue({
        el: '#app',
        data: {
          dataindex: 1
        },
        beforeCreate: function() {
            console.log('beforeCreate');
            console.log(this.dataindex);
        },
        created: function() {
            console.log("--------------------");
            console.log('created');
            console.log(this.dataindex);
        },
        beforeMount: function() {
            console.log("--------------------");
            console.log('beforeMount');
            console.log(this.dataindex);
        },
        Mount: function() {
            console.log("--------------------");
            console.log('Mount');
            console.log(this.dataindex);
        },
        mounted: function() {
            console.log("--------------------");
            console.log('mounted');
            console.log(this.dataindex);
        },
        beforeUpdate: function() {
            console.log("--------------------");
            console.log('beforeUpdate');
            console.log(this.dataindex);
        },
        updated: function() {
            console.log("--------------------");
            console.log('updated');
            console.log(this.dataindex);
        },
        beforeDestroy: function() {
            console.log("--------------------");
            console.log('beforeDestroy');
            console.log(this.dataindex);
        },
        destroyed: function() {
            console.log("--------------------");
            console.log('destroyed');
            console.log(this.dataindex);
        }
        
     })
    </script>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。