分享9個(gè)Vue的巧妙冷技巧
前言
寫了兩年的Vue，期間學(xué)習(xí)到好幾個(gè)提高開發(fā)效率和性能的技巧，現(xiàn)在把這些技巧用文章的形式總結(jié)下來。
1. 巧用$attrs和$listeners
$attrs用于記錄從父組件傳入子組件的所有不被props捕獲以及不是class與style的參數(shù)，而$listeners用于記錄從父組件傳入的所有不含.native修飾器的事件。
那下面的代碼作例子：
Vue.component('child', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
new Vue({
data:{a:1,title:'title'},
methods:{
handleClick(){
// ...
},
handleChange(){
// ...
}
},
template:'
<child class="child-width" :a="a" b="1" :title="title" @click.native="handleClick" @change="handleChange">',
})則在<child/>在中
attrs的值為{a:1,b:"1"}listeners的值為{change: handleChange}
通常我們可以用$attrs和$listeners作組件通信，在二次封裝組件中使用時(shí)比較高效，如：
Vue.component("custom-dialog", {
// 通過v-bind="$attrs"和v-on="$listeners"把父組件傳入的參數(shù)和事件都注入到el-dialog實(shí)例上
template: '<el-dialog v-bind="$attrs" v-on="$listeners"></el-dialog>',
});
new Vue({
data: { visible: false },
// 這樣子就可以像在el-dialog一樣用visible控制custom-dialog的顯示和消失
template: '<custom-dialog :visible.sync="visible">',
});再舉個(gè)例子：
Vue.component("custom-select", {
template: `<el-select v-bind="$attrs" v-on="$listeners">
<el-option value="選項(xiàng)1" label="黃金糕"/>
<el-option value="選項(xiàng)2" label="雙皮奶"/>
</el-select>`,
});
new Vue({
data: { value: "" },
// v-model在這里其實(shí)是v-bind:value和v-on:change的組合，
// 在custom-select里，通過v-bind="$attrs" v-on="$listeners"的注入，
// 把父組件上的value值雙向綁定到custom-select組件里的el-select上，相當(dāng)于<el-select v-model="value">
// 與此同時(shí)，在custom-select注入的size變量也會(huì)通過v-bind="$attrs"注入到el-select上，從而控制el-select的大小
template: '<custom-select v-model="value" size="small">',
});2. 巧用$props
$porps用于記錄從父組件傳入子組件的所有被props捕獲以及不是class與style的參數(shù)。如
Vue.component('child', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
new Vue({
data:{a:1,title:'title'},
methods:{
handleClick(){
// ...
},
handleChange(){
// ...
}
},
template:'
<child class="child-width" :a="a" b="1" :title="title">',
})則在<child/>在中，$props的值為{title:'title'}。$props可以用于自組件和孫組件定義的props都相同的情況，如：
Vue.component('grand-child', {
props: ['a','b'],
template: '<h3>{{ a + b}}</h3>'
})
// child和grand-child都需要用到來自父組件的a與b的值時(shí)，
// 在child中可以通過v-bind="$props"迅速把a(bǔ)與b注入到grand-child里
Vue.component('child', {
props: ['a','b'],
template: `
<div>
{{a}}加{}的和是：
<grand-child v-bind="$props"/>
</div>
`
})
new Vue({
template:'
<child class="child-width" :a="1" :b="2">',
})3. 妙用函數(shù)式組件
函數(shù)式組件相比于一般的vue組件而言，最大的區(qū)別是非響應(yīng)式的。它不會(huì)監(jiān)聽任何數(shù)據(jù)，也沒有實(shí)例（因此沒有狀態(tài)，意味著不存在諸如created，mounted的生命周期）。好處是因只是函數(shù)，故渲染開銷也低很多。
把開頭的例子改成函數(shù)式組件，代碼如下：
<script>
export default {
name: "anchor-header",
functional: true, // 以functional:true聲明該組件為函數(shù)式組件
props: {
level: Number,
name: String,
content: String,
},
// 對(duì)于函數(shù)式組件，render函數(shù)會(huì)額外傳入一個(gè)context參數(shù)用來表示上下文，即替代this。函數(shù)式組件沒有實(shí)例，故不存在this
render: function (createElement, context) {
const anchor = {
props: {
content: String,
name: String,
},
template: '<a :id="name" :href="`#${name}`" rel="external nofollow" > {{content}}</a>',
};
const anchorEl = createElement(anchor, {
props: {
content: context.props.content, //通過context.props調(diào)用props傳入的變量
name: context.props.name,
},
});
const el = createElement(`h${context.props.level}`, [anchorEl]);
return el;
},
};
</script>4. 妙用 Vue.config.devtools
其實(shí)我們?cè)谏a(chǎn)環(huán)境下也可以調(diào)用vue-devtools去進(jìn)行調(diào)試，只要更改Vue.config.devtools配置既可，如下所示：
// 務(wù)必在加載 Vue 之后，立即同步設(shè)置以下內(nèi)容 // 該配置項(xiàng)在開發(fā)版本默認(rèn)為?`true`，生產(chǎn)版本默認(rèn)為?`false` Vue.config.devtools = true;
我們可以通過檢測(cè)cookie里的用戶角色信息去決定是否開啟該配置項(xiàng)，從而提高線上 bug 查找的便利性。
5. 妙用 methods
Vue中的method可以賦值為高階函數(shù)返回的結(jié)果，例如：
<script>
import { debounce } from "lodash";
export default {
methods: {
search: debounce(async function (keyword) {
// ... 請(qǐng)求邏輯
}, 500),
},
};
</script>上面的search函數(shù)賦值為debounce返回的結(jié)果， 也就是具有防抖功能的請(qǐng)求函數(shù)。這種方式可以避免我們?cè)诮M件里要自己寫一遍防抖邏輯。
這里有個(gè)例子：
<template>
<div>
<fieldset>
<legend>防抖處理</legend>
輸入框：<input @input="handleChange"/>
<div>輸出結(jié)果：{{value}}</div>
</fieldset>
<fieldset>
<legend>原始處理</legend>
輸入框：<input @input="handleChange1"/>
<div>輸出結(jié)果：{{value1}}</div>
</fieldset>
</div>
</template>
<script>
import { debounce } from "lodash";
export default {
name: "App",
data(){
return {
value: undefined,
value1: undefined
}
},
methods:{
handleChange:debounce(function (e){
this.value = e.target.value
},500),
handleChange1(e){
this.value1 = e.target.value
}
}
};
</script>大家可以點(diǎn)進(jìn)去看看經(jīng)過高階函數(shù)處理的method與原始method的效果區(qū)別，如下所示：
除此之外，method還可以定義為生成器，如果我們有個(gè)函數(shù)需要執(zhí)行時(shí)很強(qiáng)調(diào)順序，而且需要在data里定義變量來記錄上一次的狀態(tài)，則可以考慮用生成器。
例如有個(gè)很常見的場(chǎng)景：微信的視頻通話在接通的時(shí)候會(huì)顯示計(jì)時(shí)器來記錄通話時(shí)間，這個(gè)通話時(shí)間需要每秒更新一次，即獲取通話時(shí)間的函數(shù)需要每秒執(zhí)行一次，如果寫成普通函數(shù)則需要在data里存放記錄時(shí)間的變量。但如果用生成器則能很巧妙地解決，如下所示：
<template>
<div id="app">
<h3>{{ timeFormat }}</h3>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
// 用于顯示時(shí)間的變量，是一個(gè)HH:MM:SS時(shí)間格式的字符串
timeFormat: "",
};
},
methods: {
genTime: function* () {
// 聲明存儲(chǔ)時(shí)、分、秒的變量
let hour = 0;
let minute = 0;
let second = 0;
while (true) {
// 遞增秒
second += 1;
// 如果秒到60了，則分加1，秒清零
if (second === 60) {
second = 0;
minute += 1;
}
// 如果分到60了，則時(shí)加1，分清零
if (minute === 60) {
minute = 0;
hour += 1;
}
// 最后返回最新的時(shí)間字符串
yield `${hour}:${minute}:${second}`;
}
},
},
created() {
// 通過生成器生成迭代器
const gen = this.genTime();
// 設(shè)置計(jì)時(shí)器定時(shí)從迭代器獲取最新的時(shí)間字符串
const timer = setInterval(() => {
this.timeFormat = gen.next().value;
}, 1000);
// 在組件銷毀的時(shí)候清空定時(shí)器和迭代器以免發(fā)生內(nèi)存泄漏
this.$once("hook:beforeDestroy", () => {
clearInterval(timer);
gen = null;
});
},
};
</script>頁面效果如下所示：
但需要注意的是：method 不能是箭頭函數(shù)
注意，不應(yīng)該使用箭頭函數(shù)來定義
method函數(shù) (例如plus: () => this.a++)。理由是箭頭函數(shù)綁定了父級(jí)作用域的上下文，所以this將不會(huì)按照期望指向 Vue 實(shí)例，this.a將是undefined。
6. 妙用 watch 的數(shù)組格式
很多開發(fā)者會(huì)在watch中某一個(gè)變量的handler里調(diào)用多個(gè)操作，如下所示：
<script>
export default {
data() {
return {
value: "",
};
},
methods: {
fn1() {},
fn2() {},
},
watch: {
value: {
handler() {
fn1();
fn2();
},
immediate: true,
deep: true,
},
},
};
</script>雖然fn1和fn2都需要在value變動(dòng)的時(shí)候調(diào)用，但兩者的調(diào)用時(shí)機(jī)可能不同。fn1可能僅需要在deep為false的配置下調(diào)用既可。因此，Vue在watch的值添加了Array類型來針對(duì)上面所說的情況，如果用watch為Array的寫法處理可以寫成下面這種形式：
<script>
watch:{
'value':[
{
handler:function(){
fn1()
},
immediate:true
},
{
handler:function(){
fn2()
},
immediate:true,
deep:true
}
]
}
</script>7. 妙用$options
$options是一個(gè)記錄當(dāng)前Vue組件的初始化屬性選項(xiàng)。通常開發(fā)中，我們想把data里的某個(gè)值重置為初始化時(shí)候的值，可以像下面這么寫：
this.value = this.$options.data().value;
這樣子就可以在初始值由于需求需要更改時(shí)，只在data中更改即可。
這里再舉一個(gè)場(chǎng)景：一個(gè)el-dialog中有一個(gè)el-form，我們要求每次打開el-dialog時(shí)都要重置el-form里的數(shù)據(jù)，則可以這么寫：
<template>
<div>
<el-button @click="visible=!visible">打開彈窗</el-button>
<el-dialog @open="initForm" title="個(gè)人資料" :visible.sync="visible">
<el-form>
<el-form-item label="名稱">
<el-input v-model="form.name"/>
</el-form-item>
<el-form-item label="性別">
<el-radio-group v-model="form.gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
export default {
name: "App",
data(){
return {
visible: false,
form: {
gender: 'male',
name: 'wayne'
}
}
},
methods:{
initForm(){
this.form = this.$options.data().form
}
}
};
</script>每次el-dialog打開之前都會(huì)調(diào)用其@open中的方法initForm，從而重置form值到初始值。如下效果所示：
如果要重置data里的所有值，可以像下面這么寫：
Object.assign(this.$data, this.$options.data()); // 注意千萬不要寫成下面的樣子，這樣子就更改this.$data的指向。使得其指向另外的與組件脫離的狀態(tài) this.$data = this.$options.data();
8. 妙用 v-pre,v-once
v-pre
v-pre用于跳過被標(biāo)記的元素以及其子元素的編譯過程，如果一個(gè)元素自身及其自元素非常打，而又不帶任何與Vue相關(guān)的響應(yīng)式邏輯，那么可以用v-pre標(biāo)記。標(biāo)記后效果如下：
v-once
只渲染元素和組件一次。隨后的重新渲染，元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過。這可以用于優(yōu)化更新性能。
對(duì)于部分在首次渲染后就不會(huì)再有響應(yīng)式變化的元素，可以用v-once屬性去標(biāo)記，如下：
<el-select>
<el-option
v-for="item in options"
v-once
:key="item.value"
:label="item.label"
:value="item.value"
>{{i}}</el-option
>
</el-select>如果上述例子中的變量options很大且不會(huì)再有響應(yīng)式變化，那么如例子中用上v-once對(duì)性能有提升。
9. 妙用 hook 事件
如果想監(jiān)聽子組件的生命周期時(shí)，可以像下面例子中這么做：
<template> <child @hook:mounted="removeLoading" /> </template>
這樣的寫法可以用于處理加載第三方的初始化過程稍漫長(zhǎng)的子組件時(shí)，我們可以加loading動(dòng)畫，等到子組件加載完畢，到了mounted生命周期時(shí)，把loading動(dòng)畫移除。
初次之外hook還有一個(gè)常用的寫法，在一個(gè)需要輪詢更新數(shù)據(jù)的組件上，我們通常在created里開啟定時(shí)器，然后在beforeDestroy上清除定時(shí)器。而通過hook,開啟和銷毀定時(shí)器的邏輯我們都可以在created里實(shí)現(xiàn)：
<script>
export default {
created() {
const timer = setInterval(() => {
// 更新邏輯
}, 1000);
// 通過$once和hook監(jiān)聽實(shí)例自身的beforeDestroy，觸發(fā)該生命周期時(shí)清除定時(shí)器
this.$once("hook:beforeDestroy", () => {
clearInterval(timer);
});
},
};
</script>像上面這種寫法就保證了邏輯的統(tǒng)一，遵循了單一職責(zé)原則。
到此這篇關(guān)于分享9個(gè)Vue的巧妙冷技巧的文章就介紹到這了,更多相關(guān)Vue技巧內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在Vue核心中除了響應(yīng)式原理外,視圖渲染也是重中之重,下面這篇文章主要給大家介紹了關(guān)于Vue組件的渲染流程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
Vue聯(lián)動(dòng)Echarts實(shí)現(xiàn)數(shù)據(jù)大屏展示
這篇文章主要為大家介紹了Vue聯(lián)動(dòng)Echarts實(shí)現(xiàn)數(shù)據(jù)大屏的展示示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
vite2.0+vue3移動(dòng)端項(xiàng)目實(shí)戰(zhàn)詳解
這篇文章主要介紹了vite2.0+vue3移動(dòng)端項(xiàng)目實(shí)戰(zhàn)詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vue項(xiàng)目啟動(dòng)命令個(gè)人學(xué)習(xí)記錄
最近想要學(xué)習(xí)vue,正好看到資料,如何通過命令創(chuàng)建vue項(xiàng)目的方法,就留個(gè)筆記,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目啟動(dòng)命令的相關(guān)資料,需要的朋友可以參考下2023-02-02
props主要用于組件的傳值,他的工作就是為了接收外面?zhèn)鬟^來的數(shù)據(jù),與data、el、ref是一個(gè)級(jí)別的配置項(xiàng),下面這篇文章主要給大家介紹了關(guān)于Vue組件如何設(shè)置Props的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue 實(shí)現(xiàn)路由跳轉(zhuǎn)時(shí)更改頁面title
今天小編就為大家分享一篇vue 實(shí)現(xiàn)路由跳轉(zhuǎn)時(shí)更改頁面title，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue3在自定義hooks中使用useRouter報(bào)錯(cuò)的解決方案
這篇文章主要介紹了vue3在自定義hooks中使用useRouter報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
elementUI動(dòng)態(tài)表單?+?el-select?按要求禁用問題
這篇文章主要介紹了elementUI動(dòng)態(tài)表單?+?el-select?按要求禁用問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
今天小編就為大家分享一篇VUE 解決mode為history頁面為空白的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue 實(shí)現(xiàn)顯示/隱藏層的思路（加全局點(diǎn)擊事件）
這篇文章主要介紹了Vue 實(shí)現(xiàn)顯示/隱藏層的思路（加全局點(diǎn)擊事件）,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12