您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“vue實戰(zhàn)中的一些實用方法”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
路由懶加載可以讓我們的包不需要一次把所有的頁面的加載進(jìn)來,只加載當(dāng)前頁面的路由組件就行。
舉個?,如果這樣寫,加載的時候會全部都加載進(jìn)來。
const router = new VueRouter({ routes:[ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ] })
所以,應(yīng)該避免上面的寫法,盡量使用懶加載
懶加載寫法,結(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') } ] })
應(yīng)該所有同學(xué)都知道,vue初始化的時候會將data里面的數(shù)據(jù)都搞成響應(yīng)式數(shù)據(jù)吧。但是,我們在寫業(yè)務(wù)邏輯的時候會有些數(shù)據(jù)一初始化就永遠(yuǎn)不會改變,它根本就不需要被vue做成響應(yīng)式數(shù)據(jù),因此我們應(yīng)該將這些不用改變的數(shù)據(jù)通過Object.freeze方法凍結(jié)它,避免vue初始化的時候,做一些無用的操作。
?
export default { data:()=>({ list:Object.freeze([{title:'我永遠(yuǎn)不需要改變,我不需要響應(yīng)式'}]) }) }
異步組件可以讓我們在需要一些組件時才將它加載進(jìn)來,而不是一初始化就加載進(jìn)來,這跟路由懶加載時一個概念。
?
export default { components:{ AsyncComponent:()=>import(/* webpackChunkName: "AsyncComponent" */ './Async') } }
首次加載的包是不包含改組件代碼的
當(dāng)點擊觸發(fā)某種行為引進(jìn)的包是這樣的
異步組件還有一種比較完善的寫法
?
export default { components:{ AsyncComponent:()=>({ component:import(/* webpackChunkName: "AsyncComponent" */ './Async'), delay:200, // 延遲幾毫秒,默認(rèn)200 timeout:3000, // 加載幾毫米之后就超時,觸發(fā)error組件 loading:LoadingComponent, // 組件未加載回來前顯示 error:ErrorComponent // 組件超時時顯示 }) } }
我猜還有很多同學(xué),在computed屬性中通過this.xxx去拿data里面的數(shù)據(jù),和methods里面的方法吧,或許還會通過this.$store去拿vuex的state,和commit等,甚至,還會通過this.$route去獲取路由里面的數(shù)據(jù)吧。其實,我們可以避免這些丑陋的this,它甚至?xí)o我們帶來看不見的性能問題。實現(xiàn)上,我們通過this能訪問到的數(shù)據(jù),在computed的第一個參數(shù)上都能結(jié)構(gòu)出來。
?
export default { haha({$attrs,$route,$store,$listeners,$ref}){ // 還能結(jié)構(gòu)很多屬性,可自行打印康康 return } }
為什么要避免v-if和v-for在同一個元素上同時使用呢?因為在vue的源碼中有一段代碼時對指令的優(yōu)先級的處理,這段代碼是先處理v-for再處理v-if的。所以如果我們在同一層中一起使用兩個指令,會出現(xiàn)一些不必要的性能問題,比如這個列表有一百條數(shù)據(jù),再某種情況下,它們都不需要顯示,當(dāng)vue還是會循環(huán)這個100條數(shù)據(jù)顯示,再去判斷v-if,因此,我們應(yīng)該避免這種情況的出現(xiàn)。
不好的?
<h4 v-if="status" v-for="item in 100" :key="item">{{item}}</h4>
好的?
<template v-if="status" > <h4 v-for="item in 100" :key="item">{{item}}</h4> </template>
如果你想要在父組件控制一個子組件的顯示隱藏,是不是還在傳一個prop和一個自定義方法,這樣會很麻煩,不妨試一試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可能很多同學(xué)沒怎么去使用,其實它們讓我們對一些組件庫的組件二次封裝,非常好用的。
簡單介紹一下它們兩個:
$attr:如果一個組件不但傳了prop需要的屬性,還傳了prop之外的其他屬性,那么這些屬性都會被收集到$attr里面。
$listeners:如果一個組件傳了自定義事件,但子組件沒有通過emit觸發(fā),那么這些自定義方法都會被收集到$listeners里面。
這里舉一個對ElementUI的Tabel組件簡單的二次封裝的?
<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上有3個比較好用的修飾符不知到大家有沒有用過,一個是lazy,一個是number,一個是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" />
如果想在一個自定義的Input組件上使用v-model,那么就要在子組件,介紹一個value,和觸發(fā)input事件,v-model的默認(rèn)語法糖就是這兩個東西的組合。
?
// 父組件 <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,而是一個checkbox或者一個radio呢?我不想接受一個value和input事件,我想接收一個更加語義化的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。其實我們還有第二個選擇就是VueRouter給我們提供的scrollBehavior鉤子。
?
const router = new VueRouter({ routes:[...] , scrollBehavior(to,from,position){ // position參數(shù)可自行打印康康,點擊瀏覽器左右箭頭會觸發(fā) return{ // 這里可以返回很多參數(shù),下面簡單列就幾個,詳情自己康康官網(wǎng) x:100, y:100, selector:#app, offset:200, //等等 } } })
有時候我們想在子組件上面監(jiān)聽一些事件,比如click,但是不論你怎么點,它都沒反應(yīng),為什么呢?
?
<template> <div> <Child @click="test"></Child> </div> </template> <script> methods:{ test(){} } </script>
因為這樣寫vue會認(rèn)為,你自定義了一個click事件,要在子組件通過$emit('click')觸發(fā)才行。如果我就是要在父組件觸發(fā)呢?那就要用到native修飾符了。
?
<template> <div> <Child @click.native="test"></Child> </div> </template> <script> methods:{ test(){} } </script>
keep-alive可以幫助我們在切換組件的時候,保留上一個組件不被銷毀,它在管理后臺系統(tǒng)中比較常用。
?
<keep-alive> <router-view></router-view> </keep-alive>
“vue實戰(zhàn)中的一些實用方法”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。