最新的一波Vue實戰技巧，不用則已，一用驚人

在Vue中，不同的選項有不同的合並策略，比如 data,props,methods是同名屬性覆蓋合並，其他直接合並，而生命周期鈎子函數則是將同名的函數放到一個數組中，在調用的時候依次調用

在Vue中，提供了一個api, Vue.config.optionMergeStrategies,可以通過這個api去自定義選項的合並策略。

在代碼中打印

console.log(Vue.config.optionMergeStrategies)

　　

 通過合並策略自定義生命周期函數

背景

發現頁面有許多定時器，ajax輪詢還有動畫，打開一個瀏覽器頁簽沒法問題，打開多了，瀏覽器就變得卡了,這時候我就想如果能在用戶切換頁簽時候將這些都停掉，不久解決了。百度里面上下檢索，找到了一個事件visibilitychange,可以用來判斷瀏覽器頁簽是否顯示。

有方法了，就寫唄

export default {
  created() {
    window.addEventListener('visibilitychange', this.$_hanldeVisiblityChange)
    // 此處用了hookEvent，可以參考小編前一篇文章
    this.$on('hook:beforeDestroy', () => {
      window.removeEventListener(
        'visibilitychange',
        this.$_hanldeVisiblityChange
      )
    })
  },
  methods: {
    $_hanldeVisiblityChange() {
      if (document.visibilityState === 'hidden') {
        // 停掉那一堆東西
      }
      if (document.visibilityState === 'visible') {
        // 開啟那一堆東西
      }
    }
  }
}

通過上面的代碼，可以看到在每一個需要監聽處理的文件都要寫一堆事件監聽，判斷頁面是否顯示的代碼，一處兩處還可以，文件多了就頭疼了，這時候小編突發奇想，定義一個頁面顯示隱藏的生命周期鈎子,把這些判斷都封裝起來

自定義生命周期鈎子函數

定義生命周期函數 pageHidden 與 pageVisible

import Vue from 'vue'

// 通知所有組件頁面狀態發生了變化
const notifyVisibilityChange = (lifeCycleName, vm) => {
  // 生命周期函數會存在$options中，通過$options[lifeCycleName]獲取生命周期
  const lifeCycles = vm.$options[lifeCycleName]
  // 因為使用了created的合並策略，所以是一個數組
  if (lifeCycles && lifeCycles.length) {
    // 遍歷 lifeCycleName對應的生命周期函數列表，依次執行
    lifeCycles.forEach(lifecycle => {
      lifecycle.call(vm)
    })
  }
  // 遍歷所有的子組件，然后依次遞歸執行
  if (vm.$children && vm.$children.length) {
    vm.$children.forEach(child => {
      notifyVisibilityChange(lifeCycleName, child)
    })
  }
}

// 添加生命周期函數
export function init() {
  const optionMergeStrategies = Vue.config.optionMergeStrategies
  // 定義了兩個生命周期函數 pageVisible, pageHidden
  // 為什么要賦值為 optionMergeStrategies.created呢
  // 這個相當於指定 pageVisible, pageHidden 的合並策略與 created的相同（其他生命周期函數都一樣）
  optionMergeStrategies.pageVisible = optionMergeStrategies.beforeCreate
  optionMergeStrategies.pageHidden = optionMergeStrategies.created
}


// 將事件變化綁定到根節點上面
// rootVm vue根節點實例
export function bind(rootVm) {
  window.addEventListener('visibilitychange', () => {
    // 判斷調用哪個生命周期函數
    let lifeCycleName = undefined
    if (document.visibilityState === 'hidden') {
      lifeCycleName = 'pageHidden'
    } else if (document.visibilityState === 'visible') {
      lifeCycleName = 'pageVisible'
    }
    if (lifeCycleName) {
      // 通過所有組件生命周期發生變化了
      notifyVisibilityChange(lifeCycleName, rootVm)
    }
  })
}

應用

1. 在main.js主入口文件引入

import { init, bind } from './utils/custom-life-cycle'

// 初始化生命周期函數, 必須在Vue實例化之前確定合並策略
init()

const vm = new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

// 將rootVm 綁定到生命周期函數監聽里面
bind(vm)

　　2. 在需要的地方監聽生命周期函數

export default {
  pageVisible() {
    console.log('頁面顯示出來了')
  },
  pageHidden() {
    console.log('頁面隱藏了')
  }
}

　　

provide與inject，不止父子傳值，祖宗傳值也可以

Vue相關的面試經常會被面試官問道，Vue父子之間傳值的方式有哪些，通常我們會回答，props傳值，$emit事件傳值，vuex傳值，還有eventbus傳值等等，今天再加一種provide與inject傳值，離offer又近了一步。（對了，下一節還有一種）

使用過React的同學都知道，在React中有一個上下文Context，組件可以通過Context向任意后代傳值，而Vue的provide與inject的作用於Context的作用基本一樣

先舉一個例子

使用過elemment-ui的同學一定對下面的代碼感到熟悉

<template>
  <el-form :model="formData" size="small">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="formData.name" />
    </el-form-item>
    <el-form-item label="年齡" prop="age">
      <el-input-number v-model="formData.age" />
    </el-form-item>
    <el-button>提交</el-button>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        age: 0
      }
    }
  }
}
</script>

　　

看了上面的代碼，貌似沒啥特殊的，天天寫啊。在el-form上面我們指定了一個屬性size="small"，然后有沒有發現表單里面的所有表單元素以及按鈕的 size都變成了small,這個是怎么做到的？接下來我們自己手寫一個表單模擬一下

自己手寫一個表單

自定義表單custom-form.vue

<template>
  <form class="custom-form">
    <slot></slot>
  </form>
</template>
<script>
export default {
  props: {
    // 控制表單元素的大小
    size: {
      type: String,
      default: 'default',
      // size 只能是下面的四個值
      validator(value) {
        return ['default', 'large', 'small', 'mini'].includes(value)
      }
    },
    // 控制表單元素的禁用狀態
    disabled: {
      type: Boolean,
      default: false
    }
  },
  // 通過provide將當前表單實例傳遞到所有后代組件中
  provide() {
    return {
      customForm: this
    }
  }
}
</script>

　　

在上面代碼中，我們通過provide將當前組件的實例傳遞到后代組件中，provide是一個函數，函數返回的是一個對象

自定義表單項custom-form-item.vue

沒有什么特殊的，只是加了一個label,element-ui更復雜一些

<template>
  <div class="custom-form-item">
    <label class="custom-form-item__label">{{ label }}</label>
    <div class="custom-form-item__content">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    label: {
      type: String,
      default: ''
    }
  }
}
</script>

自定義輸入框 custom-input.vue

<template>
  <div
    class="custom-input"
    :class="[
      `custom-input--${getSize}`,
      getDisabled && `custom-input--disabled`
    ]"
  >
    <input class="custom-input__input" :value="value" @input="$_handleChange" />
  </div>
</template>
<script>
/* eslint-disable vue/require-default-prop */
export default {
  props: {
    // 這里用了自定義v-model
    value: {
      type: String,
      default: ''
    },
    size: {
      type: String
    },
    disabled: {
      type: Boolean
    }
  },
  // 通過inject 將form組件注入的實例添加進來
  inject: ['customForm'],
  computed: {
    // 通過計算組件獲取組件的size, 如果當前組件傳入，則使用當前組件的，否則是否form組件的
    getSize() {
      return this.size || this.customForm.size
    },
    // 組件是否禁用
    getDisabled() {
      const { disabled } = this
      if (disabled !== undefined) {
        return disabled
      }
      return this.customForm.disabled
    }
  },
  methods: {
    // 自定義v-model
    $_handleChange(e) {
      this.$emit('input', e.target.value)
    }
  }
}
</script>

　　

在 form中，我們通過 provide返回了一個對象，在 input中，我們可以通過 inject獲取 form中返回對象中的項，如上代碼 inject:['customForm']所示，然后就可以在組件內通過 this.customForm調用 form實例上面的屬性與方法了

在項目中使用

<template>
  <custom-form size="small">
    <custom-form-item label="姓名">
      <custom-input v-model="formData.name" />
    </custom-form-item>
  </custom-form>
</template>
<script>
import CustomForm from '../components/custom-form'
import CustomFormItem from '../components/custom-form-item'
import CustomInput from '../components/custom-input'
export default {
  components: {
    CustomForm,
    CustomFormItem,
    CustomInput
  },
  data() {
    return {
      formData: {
        name: '',
        age: 0
      }
    }
  }
}
</script>

　　執行上面代碼，運行結果為：

<form class="custom-form">
  <div class="custom-form-item">
    <label class="custom-form-item__label">姓名</label>
    <div class="custom-form-item__content">
      <!--size=small已經添加到指定的位置了-->
      <div class="custom-input custom-input--small">
        <input class="custom-input__input">
      </div>
    </div>
  </div>
</form>

　　

通過上面的代碼可以看到，input組件已經設置組件樣式為custom-input--small了

inject格式說明

除了上面代碼中所使用的inject:['customForm']寫法之外，inject還可以是一個對象。且可以指定默認值

修改上例，如果custom-input外部沒有custom-form,則不會注入customForm,此時為customForm指定默認值

{
  inject: {
    customForm: {
      // 對於非原始值，和props一樣，需要提供一個工廠方法
      default: () => ({
        size: 'default'
      })
    }
  }
}

　　

使用限制

1.provide和inject的綁定不是可響應式的。但是，如果你傳入的是一個可監聽的對象，如上面的customForm: this,那么其對象的屬性還是可響應的。

2.Vue官網建議provide 和 inject 主要在開發高階插件/組件庫時使用。不推薦用於普通應用程序代碼中。因為provide和inject在代碼中是不可追溯的(ctrl + f可以搜)，建議可以使用Vuex代替。 但是，也不是說不能用，在局部功能有時候用了作用還是比較大的。

 

插槽，我要鑽到你的懷里

插槽，相信每一位Vue都有使用過，但是如何更好的去理解插槽，如何去自定義插槽，今天小編為你帶來更形象的說明。

默認插槽

<template>
  <!--這是一個一居室-->
  <div class="one-bedroom">
    <!--添加一個默認插槽，用戶可以在外部隨意定義這個一居室的內容-->
    <slot></slot>
  </div>
</template>

　　

<template>
  <!--這里一居室-->
  <one-bedroom>
    <!--將家具放到房間里面，組件內部就是上面提供的默認插槽的空間-->
    <span>先放一個小床，反正沒有女朋友</span>
    <span>再放一個電腦桌，在家還要加班寫bug</span>
  </one-bedroom>
</template>
<script>
import OneBedroom from '../components/one-bedroom'
export default {
  components: {
    OneBedroom
  }
}
</script>

具名插槽

<template>
  <div class="two-bedroom">
    <!--這是主卧-->
    <div class="master-bedroom">
      <!---主卧使用默認插槽-->
      <slot></slot>
    </div>
    <!--這是次卧-->
    <div class="secondary-bedroom">
      <!--次卧使用具名插槽-->
      <slot name="secondard"></slot>
    </div>
  </div>
</template>

　　

<template>
  <two-bedroom>
    <!--主卧使用默認插槽-->
    <div>
      <span>放一個大床，要結婚了，嘿嘿嘿</span>
      <span>放一個衣櫃，老婆的衣服太多了</span>
      <span>算了，還是放一個電腦桌吧，還要寫bug</span>
    </div>
    <!--次卧，通過v-slot:secondard 可以指定使用哪一個具名插槽， v-slot:secondard 也可以簡寫為 #secondard-->
    <template v-slot:secondard>
      <div>
        <span>父母要住，放一個硬一點的床，軟床對腰不好</span>
        <span>放一個衣櫃</span>
      </div>
    </template>
  </two-bedroom>
</template>
<script>
import TwoBedroom from '../components/slot/two-bedroom'
export default {
  components: {
    TwoBedroom
  }
}
</script>

作用域插槽

<template>
  <div class="two-bedroom">
    <!--其他內容省略-->
    <div class="toilet">
      <!--通過v-bind 可以向外傳遞參數, 告訴外面衛生間可以放洗衣機-->
      <slot name="toilet" v-bind="{ washer: true }"></slot>
    </div>
  </div>
</template>

　　

<template>
  <two-bedroom>
    <!--其他省略-->
    <!--衛生間插槽，通過v-slot="scope"可以獲取組件內部通過v-bind傳的值-->
    <template v-slot:toilet="scope">
      <!--判斷是否可以放洗衣機-->
      <span v-if="scope.washer">這里放洗衣機</span>
    </template>
  </two-bedroom>
</template>　　

插槽默認值

<template>
  <div class="second-hand-house">
    <div class="master-bedroom">
      <!--插槽可以指定默認值，如果外部調用組件時沒有修改插槽內容，則使用默認插槽-->
      <slot>
        <span>這里有一張水床，玩的夠嗨</span>
        <span>還有一個衣櫃，有點舊了</span>
      </slot>
    </div>
    <!--這是次卧-->
    <div class="secondary-bedroom">
      <!--次卧使用具名插槽-->
      <slot name="secondard">
        <span>這里有一張嬰兒床</span>
      </slot>
    </div>
  </div>
</template>

　　

<second-hand-house>
    <!--主卧使用默認插槽，只裝修主卧-->
    <div>
      <span>放一個大床，要結婚了，嘿嘿嘿</span>
      <span>放一個衣櫃，老婆的衣服太多了</span>
      <span>算了，還是放一個電腦桌吧，還要寫bug</span>
    </div>
  </second-hand-house>

dispatch和broadcast,這是一種有歷史的組件通信方式

dispatch與 broadcast是一種有歷史的組件通信方式，為什么是有歷史的，因為他們是 Vue1.0提供的一種方式，在 Vue2.0中廢棄了。但是廢棄了不代表我們不能自己手動實現，像許多UI庫內部都有實現。本文以 element-ui實現為基礎進行介紹。同時看完本節，你會對組件的 $parent, $children, $options有所了解。

方法介紹

❝

$dispatch: $dispatch會向上觸發一個事件，同時傳遞要觸發的祖先組件的名稱與參數，當事件向上傳遞到對應的組件上時會觸發組件上的事件偵聽器，同時傳播會停止。

❞

❝

$broadcast: $broadcast會向所有的后代組件傳播一個事件，同時傳遞要觸發的后代組件的名稱與參數，當事件傳遞到對應的后代組件時，會觸發組件上的事件偵聽器，同時傳播會停止（因為向下傳遞是樹形的，所以只會停止其中一個葉子分支的傳遞）。

$dispatch實現與應用

1. 代碼實現

 // 向上傳播事件
 // @param {*} eventName 事件名稱
 // @param {*} componentName 接收事件的組件名稱
 // @param {...any} params 傳遞的參數,可以有多個
 
function dispatch(eventName, componentName, ...params) {
  // 如果沒有$parent, 則取$root
  let parent = this.$parent || this.$root
  while (parent) {
    // 組件的name存儲在組件的$options.componentName 上面
    const name = parent.$options.name
    // 如果接收事件的組件是當前組件
    if (name === componentName) {
      // 通過當前組件上面的$emit觸發事件,同事傳遞事件名稱與參數
      parent.$emit.apply(parent, [eventName, ...params])
      break
    } else {
      // 否則繼續向上判斷
      parent = parent.$parent
    }
  }
}

// 導出一個對象，然后在需要用到的地方通過混入添加
export default {
  methods: {
    $dispatch: dispatch
  }
}　　

2. 代碼應用

• 在子組件中通過$dispatch向上觸發事件

  import emitter from '../mixins/emitter'
  export default {
    name: 'Chart',
    // 通過混入將$dispatch加入進來
    mixins: [emitter],
     mounted() {
       // 在組件渲染完之后，將組件通過$dispatch將自己注冊到Board組件上
      this.$dispatch('register', 'Board', this)
    }
  }

• 在Board組件上通過$on監聽要注冊的事件

$broadcast實現與應用

1. 代碼實現

  //向下傳播事件
  // @param {*} eventName 事件名稱
  // @param {*} componentName 要觸發組件的名稱
  // @param  {...any} params 傳遞的參數
 
function broadcast(eventName, componentName, ...params) {
  this.$children.forEach(child => {
    const name = child.$options.name
    if (name === componentName) {
      child.$emit.apply(child, [eventName, ...params])
    } else {
      broadcast.apply(child, [eventName, componentName, ...params])
    }
  })
}

// 導出一個對象，然后在需要用到的地方通過混入添加
export default {
  methods: {
    $broadcast: broadcast
  }
}　　

2. 代碼應用

在父組件中通過$broadcast向下觸發事件

import emitter from '../mixins/emitter'
export default {
  name: 'Board',
  // 通過混入將$dispatch加入進來
  mixins: [emitter],
  methods:{
  	//在需要的時候，刷新組件
  	$_refreshChildren(params) {
  		this.$broadcast('refresh', 'Chart', params)
  	}
  }
}

在后代組件中通過$on監聽刷新事件

export default {
  name: 'Chart',
  created() {
    this.$on('refresh',(params) => {
      // 刷新事件
    })
  }
}

總結

通過上面的例子，同學們應該都能對$dispatch和$broadcast有所了解，但是為什么Vue2.0要放棄這兩個方法呢？官方給出的解釋是：”因為基於組件樹結構的事件流方式實在是讓人難以理解，並且在組件結構擴展的過程中會變得越來越脆弱。這種事件方式確實不太好，我們也不希望在以后讓開發者們太痛苦。並且 $dispatch 和 $broadcast 也沒有解決兄弟組件間的通信問題。“

確實如官網所說，這種事件流的方式確實不容易讓人理解，而且后期維護成本比較高。但是在小編看來，不管黑貓白貓，能抓老鼠的都是好貓，在許多特定的業務場景中，因為業務的復雜性，很有可能使用到這樣的通信方式。但是使用歸使用，但是不能濫用，小編一直就在項目中有使用。