爲什麼vue.js執行不會在更新，更新和激活事件之前觸發？

Question

這是什麼vue.js代碼執行：

• beforeCreate
• 創建
• 安裝

但不是：

• 更新前
• 更新
• 激活

https://jsfiddle.net/edwardtanguay/3hkdbuke

var vm = new Vue({ 
    el: '#app', 
    data: function() { 
    return { 
     message: 'This is a test.' 
    } 
    }, 
    methods: { 
    changeText: function() { 
     this.message = 'changed'; 
    } 
    }, 
    beforeCreate: function() { 
    this.$nextTick(() => { 
     console.log('in beforeCreate'); // gets here 
    }); 
    }, 
    created: function() { 
    this.$nextTick(() => { 
     console.log('in created'); // gets here 
    }); 
    }, 
    mounted: function() { 
    this.$nextTick(() => { 
     console.log('in mounted'); // gets here 
    }); 
    }, 
    beforeUpdate: function() { 
    this.$nextTick(() => { 
     console.log('in beforeUpdate'); //DOESN'T GET HERE 
    }); 
    }, 
    updated: function() { 
    this.$nextTick(() => { 
     console.log('in updated'); //DOESN'T GET HERE 
    }); 
    }, 
    activated: function() { 
    this.$nextTick(() => { 
     console.log('in activated'); //DOESN'T GET HERE 
    }); 
    } 
}); 

Answer 1

組件已更新完畢後，beforeUpdate和updated事件將觸發，但不是在初始化。

如果組件嵌套在keep-alive tag內部，則activated事件將觸發。

See the lifecycle diagram.

下面是一個例子：

Vue.component('child', { 
 
    template: '<div>I am a child</div>', 
 
    activated: function() { 
 
    this.$nextTick(() => { 
 
    \t console.log('in activated'); 
 
    }); 
 
    } 
 
}) 
 

 
var vm = new Vue({ 
 
    el: '#app', 
 
    data: function() { 
 
    return { 
 
     message: 'This is a test.' 
 
    } 
 
    }, 
 
    methods: { 
 
    changeText: function() { 
 
     this.message = 'changed'; 
 
    } 
 
    }, 
 
    beforeCreate: function() { 
 
    this.$nextTick(() => { 
 
     console.log('in beforeCreate'); 
 
    }); 
 
    }, 
 
    created: function() { 
 
    this.$nextTick(() => { 
 
     console.log('in created'); 
 
    }); 
 
    }, 
 
    mounted: function() { 
 
    this.$nextTick(() => { 
 
     console.log('in mounted'); 
 
    }); 
 
    }, 
 
    beforeUpdate: function() { 
 
    this.$nextTick(() => { 
 
     console.log('in beforeUpdate'); 
 
    }); 
 
    }, 
 
    updated: function() { 
 
    this.$nextTick(() => { 
 
     console.log('in updated'); 
 
    }); 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div id="app"> 
 
    <keep-alive> 
 
    <child></child> 
 
    </keep-alive> 
 
    
 
    <div> 
 
    Message: <i>{{message}}</i> 
 
    </div>  
 

 
    <button @click="message = 'updated'"> 
 
    Update 
 
    </button> 
 
</div>

Answer 2

事件updated()和beforeUpdated()將執行只有當組件進行重新渲染

生命週期我已經介紹了新的變量counter i n你的例子

data: function() { 
    return { 
     message: 'This is a test.', 
     counter : 0 
    } 
    } 

引入了一個按鈕來更新counter變量。當點擊該按鈕counter變量被更新，後者又將會重新呈現組件從而觸發beforeUpdate()和updated()生命週期事件

<div id="app"> 
    <div> 
     Message: <i>{{message}}</i> 
    </div> 
    <div> 
     counter is {{counter}} 
    </div> 
    <div> 
     <button @click="counter = counter+1">increase</button> 
    </div> 
</div> 

我還沒有碰到過activated()事件來。可能有人可以幫助