Vue2 第四天學習(Vue的生命周期)
閱讀目錄
- 1.理解VUE---混合
- 2.Vue實例化選項
- 3.Vue實例化的生命周期
1.理解VUE---混合
在了解Vue生命周期之前，我們先來學習Vue中的混合吧；
為什麽需要使用混合？
假如當我們開發時候，a.js和b.js都有公用的代碼的時候，我們可以把他們抽取出來，在a.js或b.js的需要的時候可以引用進來即可，這可以簡單的理解為混合。
混合對象可以包含任意組件選項，所有混合對象的選項將被混入該組件本身的選項。什麽意思呢？可以簡單的理解為該組件引入該混合對象的時候，該組件擁有該混合對象的所有屬性和方法。
看下如下demo代碼：
<!DOCTYPE html> <html> <head> <title>演示Vue</title> </head> <body> <div id=‘app‘> </div> </body> <script src="./vue.js"></script> <script type="text/javascript"> // 定義一個混合對象 var myMixin = { template:‘<div>hello world</div>‘, methods: { hello: function() { console.log(‘hello‘); }, say: function() { console.log(‘I am longen‘); } } }; // 定義一個組件 使用上面的混合對象 var Component = Vue.extend({ mixins: [myMixin], methods: { list:function() { console.log(‘lists‘); }, say: function() { console.log(‘I am kongzhi‘); } } }); // 實例化 var Vm = new Component({ el: ‘#app‘ }); Vm.hello(); // 打印出 hello Vm.list(); // 打印 lists Vm.say(); // 打印 I am kongzhi </script> </html>
上面代碼可以看到 當實例化對象本身和混合對象有相同的函數名的時候，會先調用自身的函數，如果自身的函數不存在，才會
尋找混合對象的函數名。
2.Vue實例化選項
在實例化vue時，需要傳入一個選項對象，它可以包含數據(data), 模板(template), 掛載元素(el), 方法(methods), 生命周期構造選項等。
2-1 data
Vue實例的數據都保存在data對象中，Vue將會遞歸將data的屬性轉換為getter/setter, 讓data數據能夠響應變化。
比如如下代碼：
var data = { a: 1 }; var vm = new Vue({ data: data }); console.log(vm); console.log(vm.a === data.a); // true console.log(vm.$data === data); // true
2-2 computed
該屬性可以理解為計算屬性，getter 和 setter的this上下文自動的綁定vue的實例。如下代碼：
var vm = new Vue({ el: ‘#app‘, data: { message: ‘Hello‘ }, computed: { reversedMessage: function() { return this.message.split(‘‘).reverse().join(‘‘) } } }); console.log(vm.reversedMessage); // olleH
切記：調用屬性 只能 vm.reversedMessage, 因為不是調用方法，後面不能加小括號；且後面的function不要使用箭頭函數代替，因為this一般都指向vue的實例。
2-3 methods
從字面量理解可以認為 是vue的所有方法寫在該對象中，可以直接通過vue實例訪問這些方法。方法中this指向vue的實例。如下代碼：
var vm = new Vue({ el: ‘#app‘, data: { message: ‘Hello‘ }, methods: { reversedMessage: function () { return this.message.split(‘‘).reverse().join(‘‘) } } }); console.log(vm.reversedMessage()) // -> ‘olleH‘
從上面的 methods 和 computed看 他們兩者都可以做同樣的事情，那麽他們的區別是？computed是計算屬性的，methods是計算方法的，最主要的區別是 computed計算屬性可以對
屬性進行緩存的，計算屬性只有當該屬性發生變化的時候才會重新計算值，只要值沒有改變，它是不會重新渲染的，但是methods方法不同，每次調用該方法的時候，都會重新執行的。
2-4 watch
可以理解為 觀察某個值發生變化的回調函數。值也可以是方法名，或者包含選項的對象，Vue實例將會在實例化時調用$watch(),遍歷watch對象的每一個屬性。
如下代碼：
var vm = new Vue({ data: { a: 11, b: 22, c: 33 }, watch: { // 監控a變量變化的時候，會自動執行該函數。 a: function(newVal, oldVal) { console.log(newVal); // 打印 12 console.log(oldVal); // 打印 11 } } }); vm.a = 12; // 改變a的值，會自動調用watch對象中的a函數，返回新值 和 舊值。回到頂部
3.Vue實例化的生命周期
實例化生命周期 從開始創建，初始化數據，編譯模板，掛載Dom->渲染， 更新->重新渲染，銷毀等。
beforeCreate: function() {} // 在實例初始化之後， 數據觀測 和 event/watcher 事件配置之前被調用。 created: function() {} // 實例已經創建完成之後被調用。實例已完成如： 數據觀測，屬性和方法的計算，watch/event事件回調。 beforeMount: function() {} // 在掛載開始之前被調用， 該函數在服務器端渲染期間不會被調用。 mounted: function() {} // el被新創建的 vm.$el替換，並掛載到實例上去之後調用該函數，在該函數內可以獲取元素。 render: function() {} // 頁面被渲染時會調用該函數。該函數在mounted之前會被調用。 beforeUpdate: function(){} // 數據更新時調用，發生在虛擬Dom重新渲染之前。該函數在服務器端渲染期間不會被調用。 updated: function() {} // 由於數據更改導致虛擬DOM重新被渲染會調用。在被渲染後調用該函數。可以或許新的dom元素。該函數在服務器端渲染期間不會被調用。 activated: function() {} // keep-alive組件激活時調用 該函數在服務器端渲染期間不會被調用。 deactivated: function(){} // keep-alive 組件停用時被調用。該函數在服務器端渲染期間不會被調用。 beforeDestroy: function(){} // 實例銷毀之前被調用，實例仍然完全可用 該函數在服務器端渲染期間不會被調用。 destroyed: function() {} // Vue 實例銷毀後調用，調用後，Vue實例所有東西都會被解綁定，所有的事件監聽器會被移除，所有的實例被銷毀。
下面看看代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>演示Vue</title>
</head>
<body>
<div id=‘app‘>
<p> {{ number }} </p>
<input type=‘text‘ v-model=‘number‘ />
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: ‘#app‘,
data: {
number: 1
},
beforeCreate: function() {
console.log(‘beforeCreate‘, this.number);
},
created: function() {
console.log(‘created‘, this.number);
},
beforeMount: function() {
console.log(‘beforeMount:‘, this.number)
},
mouted: function() {
console.log(‘mouted‘, this.number);
},
beforeUpdate: function() {
console.log(‘beforeUpdate‘, this.number);
},
updated: function() {
console.log(‘updated‘, this.number);
},
beforeDestroy: function() {
console.log(‘銷毀前.....‘);
},
destroyed: function() {
console.log(‘已銷毀.....‘);
}
});
Vue.nextTick(function () {
// DOM 更新了
console.log(1111); // 打印出 1111
})
</script>
</html>
我們在瀏覽器控制臺看到，第一次頁面加載後，打印信息如下：
beforeCreate undefined
created 1
beforeMount: 1
1111
從上面可以看到，頁面第一次加載後，觸發了 beforeCreate，created，beforeMount等生命周期函數，當然 mouted 生命周期在加載完後dom操作也會被觸發的。
beforeCreate 在實例創建之前 是獲取不到值的，上面頁面加載完成後，可以看出值為undefined；
當我們在控制臺 console.log(‘mounted: ‘, document.getElementsByTagName(‘p‘)[0]) DOM 渲染在 mounted 中已經完成。
我們接著在input輸入框 在輸入一個1字，控制臺打印出如下信息：
beforeUpdate 11
updated 11
可以看到當內容被更新的時候 調用了 beforeUpdate 和 updated 等生命周期函數。
當我繼續在控制臺中 調用如下銷毀方法：vm.$destroy() 後，在控制臺會打印如下信息：
銷毀前.....
已銷毀.....
說明這時候會自動調用了 beforeDestroy 和 destroyed 等生命周期函數。為此整個生命周期過程就是這樣的。
Vue.nextTick([callback, context]): 在DOM更新循環結束之後執行的延遲回調函數，在修改數據之後立即使用這個方法，獲取更新後的DOM元素。
Vue.nextTick(function () { // DOM 更新了 console.log(1111); // 打印出 1111 })
Vue2 第四天學習(Vue的生命周期)