Vue學習筆記3.2-生命週期函式（順帶記錄Vue的例項的生命週期）
阿新 • • 發佈：2019-01-02
Vue生命週期函式有beforeCreate、created、beforeMount、Mounted、beforeUpdate、updated、beforeDestroy、destroyed、activated、deactivated、errorCaptured。共11個。本文直說前8個，另外3個以後再說
首先要說明下 什麼是生命週期函式：
生命週期函式就是指在某一個特定時間節點會自動執行的函式。
1. beforeCreate:
beforeCreate是在Vue例項初始化事件後執行的。
<!DOCTYPE html> <html> <head> <title>生命週期函式</title> <script src="vue.js"></script> </head> <body> <div id="app">Hello World</div> </body> <script type="text/javascript"> var vm = new Vue({ el: "#app", beforeCreate: function() { console.log('beforeCreate'); } }) </script> </html>
2.created: 在Vue例項完成了內部程式碼和外部程式碼的初始化之後執行
<script type="text/javascript">
var vm = new Vue({
el: "#app",
beforeCreate: function() {
console.log('beforeCreate');
},
created: function() {
console.log('created');
}
})
</script>
3.當例項初始化事件程式碼後開始檢測是否有‘el’引數。如果有則繼續檢測是否有'template'引數，如果沒有‘el’引數。就坐等vm.$mount(el）執行。
4.檢測是否有“template”引數 如果有就使用template中的模板。如果沒有，就把掛載點作為模板使用，也就是上面例項的<div id="app">HelloWorld</div>
<!DOCTYPE html> <html> <head> <title>生命週期函式</title> <script src="vue.js"></script> </head> <body> <div id="app"></div> </body> <script type="text/javascript"> var vm = new Vue({ el: "#app", template: "<div>HelloWorld</div>", beforeCreate: function() { console.log('beforeCreate'); }, created: function() { console.log('created'); } }) </script> </html>
5.在將模板渲染到顯示頁面上之前會執行beforeMount:
<script type="text/javascript">
var vm = new Vue({
el: "#app",
template: "<div>HelloWorld</div>",
beforeCreate: function() {
console.log('beforeCreate');
},
created: function() {
console.log('created');
},
beforeMount: function() {
console.log('beforeMount');
}
})
</script>
6.mounted:
在模板渲染到前端頁面之後執行mounted
可以來做一個試驗
<body>
<div id="app"></div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
template: "<div>HelloWorld</div>",
beforeCreate: function() {
console.log('beforeCreate');
},
created: function() {
console.log('created');
},
beforeMount: function() {
console.log(this.$el);
},
mounted: function(){
console.log(this.$el);
}
})
</script>
7.beforeDestroy和destroyed
beforeDestroy在Vue例項的生命週期結束前執行
destroyed在Vue例項的生命週期結束後執行。
這兩個函式一般不會自動執行。需要通過執行vm.$destroy()時才會執行（類似C++ 的釋放堆空間操作）
<script type="text/javascript">
var vm = new Vue({
el: "#app",
template: "<div>HelloWorld</div>",
beforeCreate: function() {
console.log('beforeCreate');
},
created: function() {
console.log('created');
},
beforeMount: function() {
console.log(this.$el);
},
mounted: function(){
console.log(this.$el);
},
beforeDestroy: function() {
console.log('beforeDestroy');
},
destroyed: function() {
console.log('destroyed');
}
})
</script>
8.beforeUpdate和updated：
beforeUpdate是在資料改變之前執行。
updated實在資料改變後執行。
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
content: 'helloworld'
},
template: "<div>{{content}}</div>",
beforeCreate: function() {
console.log('beforeCreate');
},
created: function() {
console.log('created');
},
beforeMount: function() {
console.log(this.$el);
},
mounted: function(){
console.log(this.$el);
},
beforeDestroy: function() {
console.log('beforeDestroy');
},
destroyed: function() {
console.log('destroyed');
},
beforeUpdate: function() {
console.log('beforeUpdate');
},
updated: function() {
console.log('updated');
}
})
</script>