實用的Vue開發(fā)技巧
1 狀態(tài)共享
隨著組件的細化，就會遇到多組件狀態(tài)共享的情況，Vuex當然可以解決這類問題，不過就像Vuex官方文檔所說的，如果應用不夠大，為避免代碼繁瑣冗余，最好不要使用它，今天我們介紹的是vue.js 2.6新增加的Observable API ，通過使用這個api我們可以應對一些簡單的跨組件數(shù)據(jù)狀態(tài)共享的情況。
如下這個例子，我們將在組件外創(chuàng)建一個store，然后在App.vue組件里面使用store.js提供的store和mutation方法，同理其它組件也可以這樣使用，從而實現(xiàn)多個組件共享數(shù)據(jù)狀態(tài)。
首先創(chuàng)建一個store.js，包含一個store和一個mutations，分別用來指向數(shù)據(jù)和處理方法。
import Vue from "vue";
export const store = Vue.observable({ count: 0 });
export const mutations = {
setCount(count) {
store.count = count;
}
};
然后在App.vue里面引入這個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>
你可以點擊在線DEMO查看最終效果
2 長列表性能優(yōu)化
我們應該都知道vue會通過object.defineProperty對數(shù)據(jù)進行劫持，來實現(xiàn)視圖響應數(shù)據(jù)的變化，然而有些時候我們的組件就是純粹的數(shù)據(jù)展示，不會有任何改變，我們就不需要vue來劫持我們的數(shù)據(jù)，在大量數(shù)據(jù)展示的情況下，這能夠很明顯的減少組件初始化的時間，那如何禁止vue劫持我們的數(shù)據(jù)呢？可以通過object.freeze方法來凍結一個對象，一旦被凍結的對象就再也不能被修改了。
export default {
data: () => ({
users: {}
}),
async created() {
const users = await axios.get("/api/users");
this.users = Object.freeze(users);
}
};
另外需要說明的是，這里只是凍結了users的值，引用不會被凍結，當我們需要reactive數(shù)據(jù)的時候，我們可以重新給users賦值。
export default {
data: () => ({
users: []
}),
async created() {
const users = await axios.get("/api/users");
this.users = Object.freeze(users);
},
methods:{
// 改變值不會觸發(fā)視圖響應
this.users[0] = newValue
// 改變引用依然會觸發(fā)視圖響應
this.users = newArray
}
};
3 去除多余的樣式
隨著項目越來越大，書寫的不注意，不自然的就會產生一些多余的css，小項目還好，一旦項目大了以后，多余的css會越來越多，導致包越來越大，從而影響項目運行性能，所以有必要在正式環(huán)境去除掉這些多余的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 rel="external nofollow" 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，只負責布局，不管數(shù)據(jù)邏輯，然后另外定義一個組件B負責數(shù)據(jù)處理，布局組件A需要數(shù)據(jù)的時候就去B里面去取。假設，某一天我們的布局變了，我們只需要去修改組件A就行，而不用去修改組件B，從而就能充分復用組件B的數(shù)據(jù)處理邏輯，關于這塊我之前寫過一篇實際案例，可以點擊這里查看。
這里涉及到的一個最重要的點就是父組件要去獲取子組件里面的數(shù)據(jù)，之前是利用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對象是子組件的數(shù)據(jù)，在父組件里面我們獲取不到，這個時候我們就可以通過v-slot
來實現(xiàn)。
首先在子組件里面，將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，只有基礎的列表展示功能，現(xiàn)在我們想在這基礎上增加排序功能，這個時候我們就可以創(chuàng)建一個高階組件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 函數(shù)式組件
函數(shù)式組件，即無狀態(tài)，無法實例化，內部沒有任何生命周期處理方法，非常輕量，因而渲染性能高，特別適合用來只依賴外部數(shù)據(jù)傳遞而變化的組件。
寫法如下：
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 函數(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");
}
這里提供一種特別簡單的方式，子組件不需要任何處理，只需要在父組件引用的時候通過@hook來監(jiān)聽即可，代碼重寫如下：
<Child @hook:mounted="doSomething"/>
當然這里不僅僅是可以監(jiān)聽mounted，其它的生命周期事件，例如：created，updated等都可以，是不是特別方便~
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
淺析Vue.js中v-bind v-model的使用和區(qū)別
v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定,所謂雙向綁定。這篇文章主要介紹了Vue.js中v-bind v-model的使用和區(qū)別,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了如何修改el-form-item 的label的字體顏色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
今天小編就為大家分享一篇vue之debounce屬性被移除及處理詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue在mounted拿不到props中傳遞的數(shù)據(jù)問題
這篇文章主要介紹了vue在mounted拿不到props中傳遞的數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
在Vue中通過Mustache語法（雙大括號）將data中的文本數(shù)據(jù)插入到HTML中,下面這篇文章主要給大家介紹了關于Vue中Mustache插值語法與v-bind指令的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
Vue3中的路由傳參有兩種方式:query和params,下面這篇文章主要給大家介紹了關于如何在vue3+ts項目中使用query和params傳參的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
組件是Vue.js最強大的功能之一,組件可以擴展HTML元素,封裝可重用的代碼,下面這篇文章主要給大家介紹了關于vue如何動態(tài)加載組件的相關資料,需要的朋友可以參考下2022-10-10
本文將詳細介紹在VUE中使用HTTP庫Axios的詳細方法,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了vue3無法使用jsx的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue?FileManagerPlugin?報錯問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10