完全瞭解vue的生命週期函數，代碼+註釋全解

時間 2019-11-22

標籤完全瞭解 vue 生命周期函數代碼註釋简体版

原文原文鏈接

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

//建立vue實例獲得 view model

var vm = new Vue({

el: '#app',

data: {

ok: 'ok'

methods: {

show() {

console.log('show執行了');

}

//第一個生命週期函數，表示實例被徹底建立以前運行出來

//再data和methods都尚未被初始化

beforeCreate() {

console.log(this.show());

//第二個生命週期函數 data and methods 已經初始化好了

created() { //重要

console.log(this.show);

//第三個生命週期函數，模板已經再內存中編譯完成，可是還沒有把模板渲染到頁面中去

beforeMount() {

console.log(document.getElementById("h3").innerText);

//第四個周期函數內存中的模板已經真實掛在到了頁面中，能夠看到渲染好的頁面了，當執行完這個，實例已經徹底建立好了

mounted() { //重要

console.log(document.getElementById("h3").innerText);

//以上mouted（）實例完畢，立刻進入到運行階段

//第五個周期函數這倆事件會根據data數據的/*改變*/，有選擇性的出發0-n次

beforeUpdate() {//這時候表示咱們的界面尚未被更新，可是數據已經被更新了

console.log(document.getElementById("h3").innerText);

//第六個周期函數執行的手頁面和data的數據已經保持同步了都是最新的

updated() {

console.log(document.getElementById("h3").innerText);

//第七個周期函數當執行這裏的時候

//就已經從運行階段進入到了銷燬階段了

//實例身上全部的data和全部的methods以及過濾器指令等等，都處於可用狀態，尚未真正執行銷燬的過程

beforeDestroy() {

//第八個周期函數

//執行到這裏的時候組件已經被徹底銷燬，組件中全部的數據方法指令過濾器都已經不可用了

destroyed() {

}

})

</script>

</body>

</html>

相關標籤/搜索

每日一句

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