7個(gè)有用的Vue開發(fā)技巧

1 狀態(tài)共享

隨著組件的細(xì)化扔嵌，就會遇到多組件狀態(tài)共享的情況柴灯，Vuex當(dāng)然可以解決這類問題详瑞，不過就像Vuex官方文檔所說的曼月，如果應(yīng)用不夠大早龟，為避免代碼繁瑣冗余跟压，最好不要使用它目代，今天我們介紹的是vue.js 2.6新增加的Observable API 靴迫，通過使用這個(gè)api我們可以應(yīng)對一些簡單的跨組件數(shù)據(jù)狀態(tài)共享的情況濒蒋。

如下這個(gè)例子盐碱，我們將在組件外創(chuàng)建一個(gè)store，然后在App.vue組件里面使用store.js提供的store和mutation方法沪伙，同理其它組件也可以這樣使用瓮顽，從而實(shí)現(xiàn)多個(gè)組件共享數(shù)據(jù)狀態(tài)。

首先創(chuàng)建一個(gè)store.js围橡，包含一個(gè)store和一個(gè)mutations暖混，分別用來指向數(shù)據(jù)和處理方法。

import Vue from "vue";

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

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

然后在App.vue里面引入這個(gè)store.js翁授，在組件里面使用引入的數(shù)據(jù)和方法

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

2 長列表性能優(yōu)化

我們應(yīng)該都知道vue會通過object.defineProperty對數(shù)據(jù)進(jìn)行劫持拣播，來實(shí)現(xiàn)視圖響應(yīng)數(shù)據(jù)的變化，然而有些時(shí)候我們的組件就是純粹的數(shù)據(jù)展示收擦，不會有任何改變贮配，我們就不需要vue來劫持我們的數(shù)據(jù)，在大量數(shù)據(jù)展示的情況下塞赂，這能夠很明顯的減少組件初始化的時(shí)間泪勒，那如何禁止vue劫持我們的數(shù)據(jù)呢？可以通過object.freeze方法來凍結(jié)一個(gè)對象宴猾，一旦被凍結(jié)的對象就再也不能被修改了圆存。

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

另外需要說明的是，這里只是凍結(jié)了users的值仇哆，引用不會被凍結(jié)沦辙，當(dāng)我們需要reactive數(shù)據(jù)的時(shí)候，我們可以重新給users賦值讹剔。

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

3 去除多余的樣式

隨著項(xiàng)目越來越大油讯，書寫的不注意详民，不自然的就會產(chǎn)生一些多余的css，小項(xiàng)目還好撞羽，一旦項(xiàng)目大了以后阐斜，多余的css會越來越多，導(dǎo)致包越來越大诀紊，從而影響項(xiàng)目運(yùn)行性能谒出，所以有必要在正式環(huán)境去除掉這些多余的css，這里推薦一個(gè)庫purgecss邻奠，支持CLI笤喳、JavascriptApi、Webpack等多種方式使用碌宴，通過這個(gè)庫杀狡，我們可以很容易的去除掉多余的css。

<h1>Hello Vanilla!</h1>
<div>
  We use Parcel to bundle this sandbox, you can find more info about Parcel
  <a  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();

最終產(chǎn)生的purgecssResult結(jié)果如下贰镣，可以看到多余的a和ul標(biāo)簽的樣式都沒了

4 作用域插槽

利用好作用域插槽可以做一些很有意思的事情呜象，比如定義一個(gè)基礎(chǔ)布局組件A，只負(fù)責(zé)布局碑隆，不管數(shù)據(jù)邏輯恭陡，然后另外定義一個(gè)組件B負(fù)責(zé)數(shù)據(jù)處理，布局組件A需要數(shù)據(jù)的時(shí)候就去B里面去取上煤。假設(shè)休玩，某一天我們的布局變了，我們只需要去修改組件A就行劫狠，而不用去修改組件B拴疤，從而就能充分復(fù)用組件B的數(shù)據(jù)處理邏輯，關(guān)于這塊我之前寫過一篇實(shí)際案例独泞，可以點(diǎn)擊這里查看呐矾。

這里涉及到的一個(gè)最重要的點(diǎn)就是父組件要去獲取子組件里面的數(shù)據(jù)，之前是利用slot-scope懦砂，自vue 2.6.0起凫佛，提供了更好的支持 slot 和 slot-scope 特性的 API 替代方案。

比如孕惜，我們定一個(gè)名為current-user的組件：

<span>
  <slot>{{ user.lastName }}</slot>
</span>

父組件引用current-user的組件，但想用名替代姓（老外名字第一個(gè)單詞是名晨炕，后一個(gè)單詞是姓）：

<current-user>
  {{ user.firstName }}
</current-user>

這種方式不會生效衫画，因?yàn)?code>user對象是子組件的數(shù)據(jù)，在父組件里面我們獲取不到瓮栗，這個(gè)時(shí)候我們就可以通過v-slot 來實(shí)現(xiàn)削罩。

首先在子組件里面瞄勾，將user作為一個(gè)<slot>元素的特性綁定上去：

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

之后，我們就可以在父組件引用的時(shí)候弥激，給v-slot帶一個(gè)值來定義我們提供的插槽 prop 的名字：

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

這種方式還有縮寫語法进陡，可以查看獨(dú)占默認(rèn)插槽的縮寫語法，最終我們引用的方式如下：

<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

相比之前slot-scope代碼更清晰微服，更好理解趾疚。

5 屬性事件傳遞

寫過高階組件的童鞋可能都會碰到過將加工過的屬性向下傳遞的情況，如果碰到屬性較多時(shí)以蕴，需要一個(gè)個(gè)去傳遞糙麦，非常不友好并且費(fèi)時(shí)，有沒有一次性傳遞的呢（比如react里面的{...this.props}）丛肮？答案就是v-bind和v-on赡磅。

舉個(gè)例子，假如有一個(gè)基礎(chǔ)組件BaseList宝与，只有基礎(chǔ)的列表展示功能焚廊，現(xiàn)在我們想在這基礎(chǔ)上增加排序功能，這個(gè)時(shí)候我們就可以創(chuàng)建一個(gè)高階組件SortList习劫。

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

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

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

可以看到傳遞屬性和事件的方便性咆瘟，而不用一個(gè)個(gè)去傳遞

6 函數(shù)式組件

函數(shù)式組件，即無狀態(tài)榜聂，無法實(shí)例化搞疗，內(nèi)部沒有任何生命周期處理方法，非常輕量须肆，因而渲染性能高匿乃，特別適合用來只依賴外部數(shù)據(jù)傳遞而變化的組件。

寫法如下：

1. 在template標(biāo)簽里面標(biāo)明functional
2. 只接受props值
3. 不需要script標(biāo)簽

<!-- 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 函數(shù)式組件 -->
<template functional>
  <div>
    <p v-for="item in props.items" @click="props.itemClick(item);">
      {{ item }}
    </p>
  </div>
</template>

7 監(jiān)聽組件的生命周期

比如有父組件Parent和子組件Child豌汇，如果父組件監(jiān)聽到子組件掛載mounted就做一些邏輯處理幢炸，常規(guī)的寫法可能如下：

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

// Child.vue
mounted() {
  this.$emit("mounted");
}

這里提供一種特別簡單的方式，子組件不需要任何處理拒贱，只需要在父組件引用的時(shí)候通過@hook來監(jiān)聽即可宛徊，代碼重寫如下：

<Child @hook:mounted="doSomething"/>

當(dāng)然這里不僅僅是可以監(jiān)聽mounted，其它的生命周期事件逻澳，例如：created闸天，updated等都可以，是不是特別方便~

參考鏈接：

• vueTips
• vuePost

作者：skinner
鏈接：https://juejin.im/post/5ce3b519f265da1bb31c0d5f

求點(diǎn)贊斜做，求關(guān)注~