7個有用的Vue開發技巧

1 狀態共享

隨着組件的細化，就會遇到多組件狀態共享的狀況，Vuex固然能夠解決這類問題，不過就像Vuex官方文檔所說的，若是應用不夠大，爲避免代碼繁瑣冗餘，最好不要使用它，今天咱們介紹的是vue.js 2.6新增長的Observable API ，經過使用這個api咱們能夠應對一些簡單的跨組件數據狀態共享的狀況。

以下這個例子，咱們將在組件外建立一個store，而後在App.vue組件裏面使用store.js提供的store和mutation方法，同理其它組件也能夠這樣使用，從而實現多個組件共享數據狀態。

首先建立一個store.js，包含一個store和一個mutations，分別用來指向數據和處理方法。

import Vue from "vue";

export const store = Vue.observable({ count: 0 });

export const mutations = {
  setCount(count) {
    store.count = count;
  }
};

複製代碼

而後在App.vue裏面引入這個store.js，在組件裏面使用引入的數據和方法

<template>
  <div id="app"> <img width="25%" src="./assets/logo.png"> <p>count:{{count}}</p> <button @click="setCount(count+1)">+1</button> <button @click="setCount(count-1)">-1</button> </div> </template>

<script>
import { store, mutations } from "./store";
export default {
  name: "App",
  computed: {
    count() {
      return store.count;
    }
  },
  methods: {
    setCount: mutations.setCount
  }
};
</script>

<style>
複製代碼

你能夠點擊在線DEMO查看最終效果

2 長列表性能優化

咱們應該都知道vue會經過object.defineProperty對數據進行劫持，來實現視圖響應數據的變化，然而有些時候咱們的組件就是純粹的數據展現，不會有任何改變，咱們就不須要vue來劫持咱們的數據，在大量數據展現的狀況下，這可以很明顯的減小組件初始化的時間，那如何禁止vue劫持咱們的數據呢？能夠經過object.freeze方法來凍結一個對象，一旦被凍結的對象就不再能被修改了。

export default {
  data: () => ({
    users: {}
  }),
  async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
  }
};
複製代碼

另外須要說明的是，這裏只是凍結了users的值，引用不會被凍結，當咱們須要reactive數據的時候，咱們能夠從新給users賦值。

export default {
  data: () => ({
    users: []
  }),
  async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
  },
  methods:{
    // 改變值不會觸發視圖響應
    this.users[0] = newValue
    // 改變引用依然會觸發視圖響應
    this.users = newArray
  }
};
複製代碼

3 去除多餘的樣式

隨着項目愈來愈大，書寫的不注意，不天然的就會產生一些多餘的css，小項目還好，一旦項目大了之後，多餘的css會愈來愈多，致使包愈來愈大，從而影響項目運行性能，因此有必要在正式環境去除掉這些多餘的css，這裏推薦一個庫purgecss，支持CLI、JavascriptApi、Webpack等多種方式使用，經過這個庫，咱們能夠很容易的去除掉多餘的css。

我作了一個測試，在線DEMO

<h1>Hello Vanilla!</h1>
<div>
  We use Parcel to bundle this sandbox, you can find more info about Parcel
  <a href="https://parceljs.org" target="_blank" rel="noopener noreferrer">here</a>.
</div>
複製代碼

body {
  font-family: sans-serif;
}
a {
  color: red;
}
ul {
  li {
    list-style: none;
  }
}
複製代碼

import Purgecss from "purgecss";
const purgecss = new Purgecss({
  content: ["**/*.html"],
  css: ["**/*.css"]
});
const purgecssResult = purgecss.purge();
複製代碼

最終產生的purgecssResult結果以下，能夠看到多餘的a和ul標籤的樣式都沒了

4 做用域插槽

利用好做用域插槽能夠作一些頗有意思的事情，好比定義一個基礎佈局組件A，只負責佈局，無論數據邏輯，而後另外定義一個組件B負責數據處理，佈局組件A須要數據的時候就去B裏面去取。假設，某一天咱們的佈局變了，咱們只須要去修改組件A就行，而不用去修改組件B，從而就能充分複用組件B的數據處理邏輯，關於這塊我以前寫過一篇實際案例，能夠點擊這裏查看。

這裏涉及到的一個最重要的點就是父組件要去獲取子組件裏面的數據，以前是利用slot-scope，自vue 2.6.0起，提供了更好的支持 slot 和 slot-scope 特性的 API 替代方案。

好比，咱們定一個名爲current-user的組件：

<span>
  <slot>{{ user.lastName }}</slot>
</span>
複製代碼

父組件引用current-user的組件，但想用名替代姓（老外名字第一個單詞是名，後一個單詞是姓）：

<current-user>
  {{ user.firstName }}
</current-user>
複製代碼

這種方式不會生效，由於user對象是子組件的數據，在父組件裏面咱們獲取不到，這個時候咱們就能夠經過v-slot 來實現。

首先在子組件裏面，將user做爲一個<slot>元素的特性綁定上去：

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>
複製代碼

以後，咱們就能夠在父組件引用的時候，給v-slot帶一個值來定義咱們提供的插槽 prop 的名字：

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>
複製代碼

這種方式還有縮寫語法，能夠查看獨佔默認插槽的縮寫語法，最終咱們引用的方式以下：

<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>
複製代碼

相比以前slot-scope代碼更清晰，更好理解。

5 屬性事件傳遞

寫太高階組件的童鞋可能都會碰到過將加工過的屬性向下傳遞的狀況，若是碰到屬性較多時，須要一個個去傳遞，很是不友好而且費時，有沒有一次性傳遞的呢（好比react裏面的{...this.props}）？答案就是v-bind和v-on。

舉個例子，假若有一個基礎組件BaseList，只有基礎的列表展現功能，如今咱們想在這基礎上增長排序功能，這個時候咱們就能夠建立一個高階組件SortList。

<!-- SortList  -->
<template> <BaseList v-bind="$props" v-on="$listeners"> <!-- ... --> </BaseList> </template>

<script>
  import BaseList from "./BaseList";
  // 包含了基礎的屬性定義
  import BaseListMixin from "./BaseListMixin";
  // 封裝了排序的邏輯
  import sort from "./sort.js";

  export default {
    props: BaseListMixin.props,
    components: {
      BaseList
    }
  };
</script>
複製代碼

能夠看到傳遞屬性和事件的方便性，而不用一個個去傳遞

6 函數式組件

函數式組件，即無狀態，沒法實例化，內部沒有任何生命週期處理方法，很是輕量，於是渲染性能高，特別適合用來只依賴外部數據傳遞而變化的組件。

寫法以下：

1. 在template標籤裏面標明functional
2. 只接受props值
3. 不須要script標籤

<!-- App.vue -->
<template> <div id="app"> <List :items="['Wonderwoman', 'Ironman']" :item-click="item => (clicked = item)" /> <p>Clicked hero: {{ clicked }}</p> </div> </template> <script> import List from "./List"; export default { name: "App", data: () => ({ clicked: "" }), components: { List } }; </script> 複製代碼

<!-- List.vue 函數式組件 -->
<template functional> <div> <p v-for="item in props.items" @click="props.itemClick(item);"> {{ item }} </p> </div> </template>
複製代碼

7 監聽組件的生命週期

好比有父組件Parent和子組件Child，若是父組件監聽到子組件掛載mounted就作一些邏輯處理，常規的寫法可能以下：

// Parent.vue
<Child @mounted="doSomething"/>

// Child.vue
mounted() {
  this.$emit("mounted");
}
複製代碼

這裏提供一種特別簡單的方式，子組件不須要任何處理，只須要在父組件引用的時候經過@hook來監聽便可，代碼重寫以下：

<Child @hook:mounted="doSomething"/>
複製代碼

固然這裏不只僅是能夠監聽mounted，其它的生命週期事件，例如：created，updated等均可以，是否是特別方便~

參考連接：

• vueTips
• vuePost