## hookEvent,原來可以這樣監聽元件生命週期 #### 1. 內部監聽生命週期函式 ```vue ``` 這樣寫不是很好，應該將監聽`resize`事件與銷燬`resize`事件放到一起，現在兩段程式碼分開而且相隔幾百行程式碼，可讀性比較差 ```vue export default { mounted() { this.chart = echarts.init(this.$el) // 請求資料，賦值資料 等等一系列操作... // 監聽視窗發生變化，resize元件 window.addEventListener('resize', this.$_handleResizeChart) // 通過hook監聽元件銷燬鉤子函式，並取消監聽事件 this.$once('hook:beforeDestroy', () => { window.removeEventListener('resize', this.$_handleResizeChart) }) }, updated() {}, created() {}, methods: { $_handleResizeChart() { // this.chart.resize() } } } ``` *在`Vue`元件中，可以用過`$on`,`$once`去監聽所有的生命週期鉤子函式，如監聽元件的`updated`鉤子函式可以寫成 `this.$on('hook:updated', () => {})`* #### 2. 外部監聽生命週期函式 ```vue ``` ## 小專案還用Vuex`?用`Vue.observable手寫一個狀態管理吧 在前端專案中，有許多資料需要在各個元件之間進行傳遞共享，這時候就需要有一個狀態管理工具，一般情況下，我們都會使用`Vuex`，但對於小型專案來說，就像`Vuex`官網所說：“如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗餘的。確實是如此——如果您的應用夠簡單，您最好不要使用 Vuex”。這時候我們就可以使用`Vue2.6`提供的新API `Vue.observable`手動打造一個`Vuex` #### 建立 store ```vue import Vue from 'vue' // 通過Vue.observable建立一個可響應的物件 export const store = Vue.observable({ userInfo: {}, roleIds: [] }) // 定義 mutations, 修改屬性 export const mutations = { setUserInfo(userInfo) { store.userInfo = userInfo }, setRoleIds(roleIds) { store.roleIds = roleIds } } ``` #### 在元件中引用 ```vue ``` ## 深度watch`與`watch立即觸發回撥,我可以監聽到你的一舉一動 `Vue.extend`是一個全域性Api,平時我們在開發業務的時候很少會用到它，但有時候我們希望可以開發一些全域性元件比如`Loading`,`Notify`,`Message`等元件時，這時候就可以使用`Vue.extend`。 #### 基礎用法 比如一個列表頁，我們希望使用者在搜尋框輸入搜尋關鍵字的時候，可以自動觸發搜尋,此時除了監聽搜尋框的`change`事件之外，我們也可以通過`watch`監聽搜尋關鍵字的變化 ```vue ``` #### 立即觸發 通過上面的程式碼，現在已經可以在值發生變化的時候觸發載入資料了，但是如果要在頁面初始化時候載入資料，我們還需要在`created`或者`mounted`生命週期鉤子裡面再次呼叫`$_loadData`方法。不過，現在可以不用這樣寫了，通過配置`watch`的立即觸發屬性，就可以滿足需求了 ```vue // 改造watch export default { watch: { // 在值發生變化之後，重新載入資料 searchValue: { // 通過handler來監聽屬性變化, 初次呼叫 newValue為""空字串， oldValue為 undefined handler(newValue, oldValue) { if (newValue !== oldValue) { this.$_loadData() } }, // 配置立即執行屬性 immediate: true } } } ``` #### 深度監聽（我可以看到你內心的一舉一動） 一個表單頁面，需求希望使用者在修改表單的任意一項之後，表單頁面就需要變更為被修改狀態。如果按照上例中`watch`的寫法，那麼我們就需要去監聽表單每一個屬性，太麻煩了，這時候就需要用到`watch`的深度監聽`deep` ```vue export default { data() { return { formData: { name: '', sex: '', age: 0, deptId: '' } } }, watch: { // 在值發生變化之後，重新載入資料 formData: { // 需要注意，因為物件引用的原因， newValue和oldValue的值一直相等 handler(newValue, oldValue) { // 在這裡標記頁面編輯狀態 }, // 通過指定deep屬性為true, watch會監聽物件裡面每一個值的變化 deep: true } } } ``` #### 隨時監聽，隨時取消，瞭解一下$watch 有這樣一個需求，有一個表單，在編輯的時候需要監聽表單的變化，如果發生變化則儲存按鈕啟用，否則儲存按鈕禁用。這時候對於新增表單來說，可以直接通過`watch`去監聽表單資料(假設是`formData`),如上例所述，但對於編輯表單來說，表單需要回填資料，這時候會修改`formData`的值，會觸發`watch`,無法準確的判斷是否啟用儲存按鈕。現在你就需要了解一下`$watch` ```vue export default { data() { return { formData: { name: '', age: 0 } } }, created() { this.$_loadData() }, methods: { // 模擬非同步請求資料 $_loadData() { setTimeout(() => { // 先賦值 this.formData = { name: '子君', age: 18 } // 等表單資料回填之後，監聽資料是否發生變化 const unwatch = this.$watch( 'formData', () => { console.log('資料發生了變化') }, { deep: true } ) // 模擬資料發生了變化 setTimeout(() => { this.formData.name = '張三' }, 1000) }, 1000) } } } ``` 根據上例可以看到，我們可以在需要的時候通過`this.$watch`來監聽資料變化。那麼如何取消監聽呢，上例中`this.$watch`返回了一個值`unwatch`,是一個函式，在需要取消的時候，執行 `unwatch()`即