vue實(shí)戰(zhàn)中的一些實(shí)用小魔法匯總
能讓你首次加載更快的路由懶加載，怎么能忘？
路由懶加載可以讓我們的包不需要一次把所有的頁(yè)面的加載進(jìn)來(lái)，只加載當(dāng)前頁(yè)面的路由組件就行。
舉個(gè)🌰，如果這樣寫(xiě)，加載的時(shí)候會(huì)全部都加載進(jìn)來(lái)。
const router = new VueRouter({
routes:[
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
})
所以，應(yīng)該避免上面的寫(xiě)法，盡量使用懶加載
懶加載寫(xiě)法,結(jié)合webpack的import食用
const router = new VueRouter({
routes:[
{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
})
你是否還記得有一個(gè)叫Object.freeze的方法？
應(yīng)該所有同學(xué)都知道，vue初始化的時(shí)候會(huì)將data里面的數(shù)據(jù)都搞成響應(yīng)式數(shù)據(jù)吧。但是，我們?cè)趯?xiě)業(yè)務(wù)邏輯的時(shí)候會(huì)有些數(shù)據(jù)一初始化就永遠(yuǎn)不會(huì)改變，它根本就不需要被vue做成響應(yīng)式數(shù)據(jù)，因此我們應(yīng)該將這些不用改變的數(shù)據(jù)通過(guò)Object.freeze方法凍結(jié)它，避免vue初始化的時(shí)候，做一些無(wú)用的操作。
🌰
export default {
data:()=>({
list:Object.freeze([{title:'我永遠(yuǎn)不需要改變，我不需要響應(yīng)式'}])
})
}
異步組件那么強(qiáng)，你是不是沒(méi)用過(guò)？
異步組件可以讓我們?cè)谛枰恍┙M件時(shí)才將它加載進(jìn)來(lái)，而不是一初始化就加載進(jìn)來(lái)，這跟路由懶加載時(shí)一個(gè)概念。
🌰
export default {
components:{
AsyncComponent:()=>import(/* webpackChunkName: "AsyncComponent" */ './Async')
}
}
首次加載的包是不包含改組件代碼的
當(dāng)點(diǎn)擊觸發(fā)某種行為引進(jìn)的包是這樣的
異步組件還有一種比較完善的寫(xiě)法
🌰
export default {
components:{
AsyncComponent:()=>({
component:import(/* webpackChunkName: "AsyncComponent" */ './Async'),
delay:200, // 延遲幾毫秒，默認(rèn)200
timeout:3000, // 加載幾毫米之后就超時(shí)，觸發(fā)error組件
loading:LoadingComponent, // 組件未加載回來(lái)前顯示
error:ErrorComponent // 組件超時(shí)時(shí)顯示
})
}
}
你是不是還在computed中使用this？
我猜還有很多同學(xué)，在computed屬性中通過(guò)this.xxx去拿data里面的數(shù)據(jù)，和methods里面的方法吧，或許還會(huì)通過(guò)this.$store去拿vuex的state,和commit等，甚至，還會(huì)通過(guò)this.$route去獲取路由里面的數(shù)據(jù)吧。其實(shí)，我們可以避免這些丑陋的this,它甚至?xí)o我們帶來(lái)看不見(jiàn)的性能問(wèn)題。實(shí)現(xiàn)上，我們通過(guò)this能訪問(wèn)到的數(shù)據(jù)，在computed的第一個(gè)參數(shù)上都能結(jié)構(gòu)出來(lái)。
🌰
export default {
haha({$attrs,$route,$store,$listeners,$ref}){
// 還能結(jié)構(gòu)很多屬性，可自行打印康康
return
}
}
如何避免v-if和v-for一起使用？
為什么要避免v-if和v-for在同一個(gè)元素上同時(shí)使用呢？因?yàn)樵趘ue的源碼中有一段代碼時(shí)對(duì)指令的優(yōu)先級(jí)的處理，這段代碼是先處理v-for再處理v-if的。所以如果我們?cè)谕粚又幸黄鹗褂脙蓚€(gè)指令，會(huì)出現(xiàn)一些不必要的性能問(wèn)題，比如這個(gè)列表有一百條數(shù)據(jù)，再某種情況下，它們都不需要顯示，當(dāng)vue還是會(huì)循環(huán)這個(gè)100條數(shù)據(jù)顯示，再去判斷v-if，因此，我們應(yīng)該避免這種情況的出現(xiàn)。
不好的🌰
<h3 v-if="status" v-for="item in 100" :key="item">{{item}}</h3>
好的🌰
<template v-if="status" >
<h3 v-for="item in 100" :key="item">{{item}}</h3>
</template>
那么強(qiáng)的.sync修飾符你為什么不用?
如果你想要在父組件控制一個(gè)子組件的顯示隱藏，是不是還在傳一個(gè)prop和一個(gè)自定義方法，這樣會(huì)很麻煩，不妨試一試sync修飾符。
🌰
// 父組件
template>
<div>
<Toggle :show.sync = 'show'></Toggle>
</div>
</template>
//Toggle 組件
<template>
<div>
<div v-if="show">
展示和隱藏組件
</div>
<button @click="test">隱藏組件</button>
</div>
</template>
<script>
export default {
props:['show'],
methods: {
test(){
this.$emit('update:show',false)
}
}
}
</script>
$attr和$listeners讓你封裝組件如魚(yú)得水！
$attr和$listeners可能很多同學(xué)沒(méi)怎么去使用，其實(shí)它們讓我們對(duì)一些組件庫(kù)的組件二次封裝，非常好用的。
簡(jiǎn)單介紹一下它們兩個(gè)：
$attr:如果一個(gè)組件不但傳了prop需要的屬性，還傳了prop之外的其他屬性，那么這些屬性都會(huì)被收集到$attr里面。
$listeners：如果一個(gè)組件傳了自定義事件，但子組件沒(méi)有通過(guò)emit觸發(fā)，那么這些自定義方法都會(huì)被收集到$listeners里面。
這里舉一個(gè)對(duì)ElementUI的Tabel組件簡(jiǎn)單的二次封裝的🌰
<el-table
v-bind="$attrs"
v-on="$listeners">
<template v-for="item in column">
<el-table-column v-bind="item" />
</template>
</el-table>
<script>
export default {
props:{
column:{
type:Array,
required:true
}
}
}
<script>
v-model還有這么好的修飾符！
v-model上有3個(gè)比較好用的修飾符不知到大家有沒(méi)有用過(guò)，一個(gè)是lazy,一個(gè)是number,一個(gè)是trim。
lazy:可以將@input事件變成@blur事件
number：只能輸入數(shù)字值
trim:清空兩邊的空格
🌰
//lazy <input v-model.lazy="msg" /> //number <input v-model.number="msg" /> //trim <input v-model.trim="msg" />
你是否知道v-model還能自定義屬性？
如果想在一個(gè)自定義的Input組件上使用v-model，那么就要在子組件，介紹一個(gè)value，和觸發(fā)input事件，v-model的默認(rèn)語(yǔ)法糖就是這兩個(gè)東西的組合。
🌰
// 父組件
<template>
<div>
<CustomInput v-model='msg' />
</div>
</template>
//CustomInput
<template>
<div>
<input type="text" :value="value" @input="test">
</div>
</template>
<script>
export default {
props:['value'],
methods: {
test(e){
this.$emit('input',e.target.value)
}
},
}
</script>
但是，如果組件里面不是input,而是一個(gè)checkbox或者一個(gè)radio呢?我不想接受一個(gè)value和input事件，我想接收一個(gè)更加語(yǔ)義化的checked和change事件，那該怎么辦？
🌰
// 父組件不需改變
...
//CustomInput
<template>
<div>
<input type="checkbox" :checked="checked" @change="test">
</div>
</template>
<script>
props:['checked'],
model:{
props:'checked',
event:'change'
},
methods: {
test(e){
this.$emit('change',e.target.checked)
}
}
}
</script>
你還在用瀏覽器的scrollTop滾動(dòng)你的頁(yè)面嗎？
有些時(shí)候我們?cè)诓僮饕幌马?yè)面的滾動(dòng)行為，那么我們第一時(shí)間就會(huì)想到scrollTop。其實(shí)我們還有第二個(gè)選擇就是VueRouter給我們提供的scrollBehavior鉤子。
🌰
const router = new VueRouter({
routes:[...] ,
scrollBehavior(to,from,position){
// position參數(shù)可自行打印康康，點(diǎn)擊瀏覽器左右箭頭會(huì)觸發(fā)
return{
// 這里可以返回很多參數(shù)，下面簡(jiǎn)單列就幾個(gè)，詳情自己康康官網(wǎng)
x:100,
y:100,
selector:#app,
offset:200,
//等等
}
}
})
你在子組件上定義的原生事件不生效？
有時(shí)候我們想在子組件上面監(jiān)聽(tīng)一些事件，比如click，但是不論你怎么點(diǎn)，它都沒(méi)反應(yīng)，為什么呢？
🌰
<template>
<div>
<Child @click="test"></Child>
</div>
</template>
<script>
methods:{
test(){}
}
</script>
因?yàn)檫@樣寫(xiě)vue會(huì)認(rèn)為，你自定義了一個(gè)click事件，要在子組件通過(guò)$emit('click')觸發(fā)才行。如果我就是要在父組件觸發(fā)呢？那就要用到native修飾符了。
🌰
<template>
<div>
<Child @click.native="test"></Child>
</div>
</template>
<script>
methods:{
test(){}
}
</script>
用keep-alive緩存一下你的頁(yè)面狀態(tài)吧！
keep-alive可以幫助我們?cè)谇袚Q組件的時(shí)候，保留上一個(gè)組件不被銷毀，它在管理后臺(tái)系統(tǒng)中比較常用。
🌰
<keep-alive>
<router-view></router-view>
</keep-alive>
總結(jié)
到此這篇關(guān)于vue實(shí)戰(zhàn)中的一些實(shí)用小魔法的文章就介紹到這了,更多相關(guān)vue實(shí)戰(zhàn)技巧內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- Vue.js實(shí)戰(zhàn)之Vuex的入門(mén)教程
- vue項(xiàng)目實(shí)戰(zhàn)總結(jié)篇
- Vue實(shí)戰(zhàn)之vue登錄驗(yàn)證的實(shí)現(xiàn)代碼
- Vue.js實(shí)戰(zhàn)之組件之間的數(shù)據(jù)傳遞
- Vue2.0如何發(fā)布項(xiàng)目實(shí)戰(zhàn)
- 優(yōu)雅的處理vue項(xiàng)目異常實(shí)戰(zhàn)記錄
- 詳解vue項(xiàng)目構(gòu)建與實(shí)戰(zhàn)
- vue-router項(xiàng)目實(shí)戰(zhàn)總結(jié)篇
相關(guān)文章
這篇文章主要介紹了Vue依賴收集引發(fā)的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商品多選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
文件拖拽上傳功能現(xiàn)在已經(jīng)隨處可見(jiàn),大家應(yīng)該都用過(guò)了吧,那么它具體是怎么實(shí)現(xiàn)的大家有去了解過(guò)嗎,今天我們一起來(lái)實(shí)現(xiàn)一下這個(gè)功能,并封裝一個(gè)拖拽上傳組件吧2024-03-03
Vue?elementUI表單嵌套表格并對(duì)每行進(jìn)行校驗(yàn)詳解
element-ui中有詳細(xì)的各種表格及表格方法,下面這篇文章主要給大家介紹了關(guān)于Vue?elementUI表單嵌套表格并對(duì)每行進(jìn)行校驗(yàn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
Vue實(shí)現(xiàn)簡(jiǎn)單可擴(kuò)展甘特圖的方法詳解
Ganttastic是一個(gè)小型的Vue.js組件，用于在Web應(yīng)用程序上呈現(xiàn)一個(gè)可配置的、可拖動(dòng)的甘特圖。本文就將用它來(lái)實(shí)現(xiàn)簡(jiǎn)單可擴(kuò)展的甘特圖，感興趣的可以嘗試一下2022-11-11
vue 中使用 watch 出現(xiàn)了如下的報(bào)錯(cuò)的原因分析
這篇文章主要介紹了vue 中使用 watch 出現(xiàn)了如下的報(bào)錯(cuò)信息的原因分析及解決方法，本文附有代碼解決方案，非常不錯(cuò),需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Vue.js之render函數(shù)使用詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了Vue開(kāi)發(fā)Sort組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2021-10-10
Vue數(shù)據(jù)增刪改查與表單驗(yàn)證的實(shí)現(xiàn)流程介紹
這篇文章主要介紹了Vue數(shù)據(jù)增刪改查與表單驗(yàn)證的實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-10-10
VueUse功能精簡(jiǎn)你的dependencies
這篇文章主要為大家介紹了VueUse功能精簡(jiǎn)你的dependencies實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07