記錄Vue中常用鈎子，友善回頭溫故複習。
所有的鈎子都在export default{}中
export default {
} name：聲明元件名稱
name: "Template", data：存儲、傳遞資料
data(){
return{
intro:'huankai',
baidu:'http://www.baidu.com'
}
}, 元件中使用資料的幾種方式：
① 雙括号表達式
{{}}
——直接擷取資料
② 強制資料綁定
v-bind:
或者
:
——将資料綁定在标簽上，比如于a标簽href等
③ 強制事件綁定
v-on:click
或者
@click
——将方法綁定在标簽上
methods：聲明所有的方法函數
methods:{
study(name){
// name如果沒有接收到值的話，預設是一個事件對象。類型為object
alert(`${typeof name==="string"?name:""}祝你學有所成`)
}
} computed：定義計算屬性.
Ⅰ、作用：
① 減少模闆中的計算邏輯
② 進行資料緩存
③ 依賴固定的資料類型（響應式資料）
Ⅱ、使用：
① 在computed屬性對象中定義計算屬性的方法
② 在頁面中使用{{方法名}}來顯示計算的結果
③ 通過getter和setter實作對屬性資料的顯示和監視
Ⅲ、get()和set()
① 通過get()可以傳回計算屬性的值
② 通過set(value)可以觸發修改計算屬性時事件，其中value為更改後的計算屬性的值。
computed: { // 配置計算屬性
// 計算屬性 姓名
fullNameOne: { // 單向
get() {
return this.firstName + '·' + this.lastName;
}
},
fullNameTwo: { // 雙向
get() {
return this.firstName + '·' + this.lastName;
},
set(value) {
let name = value.split('·');
this.firstName = name[0];
this.lastName = name[1];
}
}
} watch：偵聽器
Ⅰ、作用：
① 比computed更加靈活
② watch中可以執行任何邏輯，比如：函數節流、Ajax異步擷取、甚至操作DOM
③ 依賴固定的資料類型（響應式資料）
Ⅱ、使用：
① 通過vm對象的$watch()或者watch配置來監視指定的屬性
② 當屬性變化時，回調函數自動調用，在函數内部進行計算
watch: {// 配置監聽watch
// 監聽firstName
firstName(value) {
//console.log(`watch監視到firstName發生改變：${value}`);
this.fullNameThree = value + '·' + this.lastName;
},
lastName(value) {
//console.log(`watch監視到lastName發生改變：${value}`);
this.fullNameThree = this.firstName + '·' + value;
}
} computed和watch總結
-
- computed能做的，watch都能做，反之則不行
- 能用computed的地方，盡可能使用computed
- computed是計算一個新的屬性，并将該屬性挂載到vm(Vue執行個體)上，而watch是監聽已經存在并且已經挂載到vm上的資料，是以用watch同樣可以監聽computed計算屬性的變化（其他還有data、props）
- computed本質是一個惰性求值的觀察者，具有緩存性，隻有當依賴發生變化後，第一次通路computed屬性，才會計算新的值，而watch則是當資料發生變化便會調用執行函數
- 從使用場景上說，computed适用于一個資料被多個資料影響，而watch适用于一個資料影響多個資料
directives：自定義局部指令
vue自定義指令
filters：自定義局部過濾器
vue自定義局部過濾器
beforeCreate：在執行個體初始化之後，資料觀測(data observer) 和 event/watcher 事件配置之前被調用。
在建立初始化之前進行的操作，在整個元件尚未初始化的時候進行的操作。這是第一個生命周期函數；元件的data和methods以及頁面DOM結構，都還沒有初始化；是以在這個階段階段，什麼都做不了。
created：：執行個體已經建立完成之後被調用。在這一步，執行個體已完成以下的配置：資料觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，挂載階段還沒開始，$el 屬性目前不可見。
這個元件建立階段第二個生命周期函數，此時，元件的data和methods已經可以用了；但是頁面還沒有渲染出來；在這個生命周期函數中，我們經常會發起Ajax請求；
created後，data和methods已經存在了，一般在這個階段發起Ajax網絡請求，請求網絡資料。
-
-
beforeMount ：在挂載開始之前被調用：相關的 render 函數首次被調用。
當模闆在記憶體中編譯完成，會立即執行執行個體建立階段的第三個生命周期函數，這個函數就是beforeMount，此時記憶體中的模闆結構，還沒有真正渲染到頁面上；此時，頁面上看不到真實的資料，使用者看到的隻是一個模闆頁面而已；
-
mounted ：el 被新建立的 vm.$ el 替換，并挂載到執行個體上去之後調用該鈎子。如果 root 執行個體挂載了一個文檔内元素，當 mounted 被調用時 vm.$el 也在文檔内。
mounted是元件建立階段最後的一個生命周期函數；此時，頁面已經真正的渲染好了，使用者可以看到真實的頁面資料了；當這個生命周期函數執行完，元件就離開了建立階段，進入到了運作中的階段；如果大家使用到一些第三方的UI插件，而且這個插件還需要被初始化，那麼，必須在mounted中來初始化插件；
mounted後，初始化已經全部完成。除了在created中發起網絡請求，在mounted中發起網絡請求也是可以的。
-
-
beforeUpdate ：資料更新時調用，發生在虛拟 DOM 重新渲染和打更新檔之前。你可以在這個鈎子中進一步地更改狀态，這不會觸發附加的重渲染過程。
在執行beforeUpdate運作中的生命周期函數的時候，資料肯定是最新的；但是頁面上呈現的資料還是舊的。
-
updated ：由于資料更改導緻的虛拟 DOM 重新渲染和打更新檔，在這之後會調用該鈎子。當這個鈎子被調用時，元件 DOM 已經更新，是以你現在可以執行依賴于 DOM 的操作。
頁面也完成了更新，此時，data資料是最新的，同時，頁面上呈現的資料也隻最新的。
-
beforeDestroy ：執行個體銷毀之前調用。在這一步，執行個體仍然完全可用。
當執行beforeDestroy的時候，元件即将被銷毀，但是還沒有真正開始銷毀，此時元件還是正常可用的；data、methods等資料或方法，依舊可以被正常通路
-
destroyed ：vue 執行個體銷毀後調用。調用後，Vue 執行個體訓示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子執行個體也會被銷毀。
元件已完成了銷毀，元件無法使用，data和methods都不可使用。