1 狀態共享

隨著元件的細化，就會遇到多元件狀態共享的情況，vuex當然可以解決這類問題，不過就像vuex官方文件所說的，如果應用不夠大，為避免程式碼繁瑣冗餘，最好不要使用它，今天我們介紹的是vue.js2.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.data.users[0] = newValue
    // 改變引用依然會觸發檢視響應
    this.data.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>

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

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

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"/>