</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="修改msg" @click="msg='No'">
<h3 id="h3">{{ msg }}</h3>
</div>
<script>
//創建Vue實例，得到ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: 'ok'
},
methods: {
show(){
console.log('執行了show方法')
}
},
beforeCreate(){ //這是第一個生命週期函數，表示實例完全被創建出來之前會執行它
//console.log(this.msg)
//this.show()
//在beforeCreate生命週期函數執行的時候，data和methods中的數據都還沒有被初始化
},
created(){ //這是第二個生命週期函數
//console.log(this.msg)
//this.show()
//在created中，data和methods都已經被初始化好了
//如果要調用methods中的方法，或者操作data中的數據，最早只能在created中操作
},
beforeMount(){ //這是第3個生命週期函數，表示模板已經在內存中編輯完成了，但尚未把模板渲染到頁面中
//console.log(document.getElementById('h3').innerText)
//在beforeMount執行的時候，頁面中的元素，還沒有被真正替換過來，只是之前寫的一些模板字符串
//此函數執行的時候，模板已經在內存中編譯好了
},
mounted(){
//這是第4個生命週期函數，表示內存中的模板已經真實的掛載到了頁面中，用戶已經可以看到渲染好的頁面了
//console.log(document.getElementById('h3').innerText)
//mounted是實例創建期間最後一個生命週期函數，當執行完mounted就表示實例已經被完全創建好了
//此時如果沒有其他操作，這個實例就在內存中一動不動
//如果要通過某些插件操作頁面上的DOM節點，最早要在mounted中進行。
//只要執行完了mounted，就表示整個Vue實例已經初始化完畢。
//此時組件已經脫離了創建階段，進入到了運行階段
},
//組件運行階段的生命週期函數：beforeUpdate和updated，會根據data數據的改變，有選擇性的觸發0次到多次
beforeUpdate(){ //表示界面還沒有被更新
console.log('界面上元素的內容:' + document.getElementById('h3').innerText)
console.log('data中的msg數據是: ' + this.msg)
//當執行beforeUpdate時，頁面中顯示的數據還是舊的，此時data數據最新的，頁面尚未和data保持同步
}
//updated事件執行的時候，頁面和data數據已經保持同步了，都是最新的
//當執行beforeDestroy鉤子函數的時候，Vue實例就已經從運行階段進入到了銷燬階段；
//當執行beforeDestroy的時候，實例身上所有的data和methods，以及過濾器、指令……都處於可用狀態，還沒有真正執行銷燬過程
});
</script>
</body>
</html>
VUE——生命週期函數組建運行和銷燬
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
element-ui中的el-table-column加v-if不生效，表頭錯亂
項目中需要按照不同的媒體類型，展示不同的表頭且數據字段也不同。可以增加不同key值解決v-if不生效問題。 <el-table-column prop="author" align="center"
Html Webpack Plugin: ReferenceError: process is not defined
修改ejs文件 將<% if (!process.browser) {%> 改成： <% if (!require(‘process’).browser) { %>