這些vue技巧，你值得擁有

時間 2020-06-29

標籤這些 vue 技巧值得擁有简体版

原文原文鏈接

分享我在vue開發中積累的開發技巧總結，有些會結合使用環境或者是個人我的網站(www.cooldream.fun/home)中的使用實例來講明，畢竟光有技巧也要考慮結合使用環境，這才能作到對於學習狀態的加深印象以及實際使用的事半功倍，話很少說，我是想到啥寫到啥，不要由於有些可能有點low或者用的很少就看一半就關了，但願你可以耐心看完，多多少少確定對你仍是有點幫助的，最後，也但願閱讀個人這篇博客能給我一個點贊，大家的贊是我更新的最大動力!

1.動態組件 `<component :is='組件名'></component>`

結合v-for循環使用

使用環境javascript

如圖，這是一個v-for渲染的列表(只是目前這個版塊纔剛開始作，目前只有一個)，圓圈內的就是一個組件，也就是要v-for動態組件 css
實際使用html

一開始就是基本的組件引入了vue

import ColorIn from '@/components/Magic/ColorIn.vue'
import LineIn from "@/components/Magic/LineIn.vue";
import LineIn from "@/components/Magic/Header.vue";
import LineIn from "@/components/Magic/Footer.vue";

export default{
      components:{
        ColorIn,
        LineIn,
        Header,
        Footer
    }
}
複製代碼

接下來就是動態v-for動態組件的使用，componentList:['ColorIn','LineIn','Header','Footer']使用下面的代碼便可將代碼依次循環java

<component v-for="(item,index) in componentList" :key="index" :is="item"></component>
複製代碼

編譯之後的效果就是ios

<ColorIn></ColorIn>
<LineIn></LineIn>
<Header></Header>
<Footer></Footer>
複製代碼

2.watch進階使用

當即執行

使用環境

例如場景爲頁面一進來就調用拉取列表數據getList()，而後監聽路由的$route.query.id而後觸發列表數據的更新vuex

實際使用

爲了讓它一開始就執行，咱們須要在created()生命週期中執行一次拉取數據的方法npm

watch:{
    '$route.query.id':{
        handle(){
            this.getList();
        },
    }
},
created(){
    this.getList();
},
複製代碼

可是使用immediate便可當即執行,改寫之後的代碼以下json

watch:{
    '$route.query.id':{
        handle(){
          this.getList();
        },
        immediate:true
    }
},
複製代碼

深度監聽

使用環境

在監聽對象的時候，對象的內部屬性發生變化watch沒法監聽到，這種時候就須要使用深度監聽，詳情請看個人這一篇博客Vue由淺入深系列(二)詳解Watch偵聽器axios

實際使用

只須要設置deep:true便可開啓深度監聽

data(){
    return{
        queryList:{
            count:0,
            name:'',
        }
    }
},
watch:{
    queryList(newValue,oldValue){
        //do something
    }
},
複製代碼

計算屬性之setter

實際使用咱們通常日常使用的都是getter，但其實它還有個setter,當計算屬性的fullName觸發更新的時候，就會觸發setter回調，計算屬性詳情請看個人這一篇博客Vue由淺入深系列(三)詳解Computed計算屬性

data(){
    return{
        firstName:'',
        lastName:'',
    }
},
computed:{
    fullName:{
        get(){
            return `${this.firstName} ${this.lastName}`;
        },
        set(newValue){
            let names=newValue.split(' ');
            this.firstName=names[0];
            this.lastName=names[1];
        }
    }
},
複製代碼

$on('hook:生命週期')來簡化window監聽

實際使用

先來看一下日常的使用方法

mounted () {
    window.addEventListener('resize', this.resizeHandler);
},
beforeDestroy () {
    window.removeEventListener('resize', this.resizeHandler);
}
複製代碼

改寫之後的代碼爲,相比於上面的寫法，這個寫法的好處在於能夠開啓一個事件監聽器的同時，就在beforeDestroy生命週期中掛載一個刪除事件監聽器的事件。比上面的寫法會更加安全，更加有助於避免內存泄露並防止事件衝突

mounted () {
  window.addEventListener('resize', this.resizeHandler);
  this.$on("hook:beforeDestroy", () => {
    window.removeEventListener('resize', this.resizeHandler);
  })
}
複製代碼

子組件`@hook:生命週期`監聽子組件的生命週期回調

實際使用

<child @hook:mounted="listenChildMounted" />
複製代碼

v-pre

使用環境

不須要編譯的html代碼可使用v-pre，能夠提升性能

實際使用

<span v-pre>{{message}}</span>    //就算data裏面定義了message，渲染完也是{{message}}
複製代碼

v-once

使用環境

只須要渲染一次，適用於渲染完之後就不會更新的內容，下降性能開銷

實際使用

<span v-once>{{message}}</span>    //message的值會編譯後渲染，可是編譯之後再次修改message的值不會觸發更新
複製代碼

v-pre與v-once的區別

v-pre至關於不編譯，直接顯示，v-once至關於只編譯一次，後面的更新不編譯了

Vue.set()

使用環境

當你利用索引直接設置一個數組項時或你修改數組的長度時,因爲Object.defineprototype()方法限制,數據不響應式更新

實際使用

this.$set(arr,index,item);
複製代碼

keep-alive

使用環境

當這個頁面沒有數據更新，或者是想保存狀態，下次進來仍是這樣子的時候，例如淘寶查看列表頁，點進去查看詳情以後，返回列表頁依舊到上次瀏覽到的地方，均可以使用keep-alive

實際使用分爲配合路由使用，使用max,include,exclude，以及特殊的生命週期activated和deactivated，詳情請看個人這一篇博客 Vue由淺入深系列(一)詳解keep-alive

$route路由信息

$route.query.id

用來拿取路由傳值的信息，好比路由的後綴?id=1,$route.query.id拿到的值爲1

$route.meta.flag

用來拿取路由meta中的信息，路由信息裏的meta是能夠自定義屬性的，我通常導航欄當前選中的nav用來和$route.meta.flag進行匹配，來拿到當前頁面應該激活哪個選項卡

base路由

比方說百度的全部路由前綴要加/baidu，那麼能夠設置路由的base爲/baidu

export const router = new Router({
  base:'/baidu/',
}
複製代碼

此外，打包的時候，請修改config/index.js的build塊中的assetsPublicPath爲 '/baidu/',否則打包之後是找不到資源文件路徑的

module.exports = {
    build:{
        assetsPublicPath: '/baidu/',
    }
}
複製代碼

全局路由鉤子

使用場景通常爲用戶的登陸鑑權

router.beforeEach((to, from, next) => {
  //必定要調用next()才能到下一個頁面
  if (path === '/login') {
    next()
  }else{
    if(token){
      next();
    }else{
      next('/login');
    }  
  }
})
複製代碼

組件路由鉤子中訪問this

組件路由的鉤子一開始還未初始化，不能訪問到vue實例 beforeRouteEnter (to, from, next) { // 這裏還沒法訪問到組件實例，this === undefined next( vm => { // 經過 vm 訪問組件實例 }) }

樣式穿透

使用環境

通常在修改插件樣式的時候使用的比較多

實際使用

分爲兩種,通常stylus中使用>>>，less中使用/deep/，sass沒有使用經驗，不予說明

>>>.el-dialog .el-dialog__body{
  padding 0
  text-align center
  border-radius 0 0 4px 4px
}
/deep/.el-dialog .el-dialog__body{
  padding 0
  text-align center
  border-radius 0 0 4px 4px
}
複製代碼

Object.freeze()

使用環境

咱們都知道vue是使用Object.defineProperty對數據進行雙向綁定，而對於只作展現使用的長列表，可使用Object.freeze()進行凍結，使它沒法被修改，從而提升性能

實際使用

getList().then(res=>{
    this.list=Object.freeze(res.data.result);
})
複製代碼

值得注意的是，改變list的值不會更新，但改變引用會觸發更新

組件通訊技巧

props
$emit
$attrs & $listeners
provide & inject
vuex
Observable
eventBus
$refs
slot-scope & v-slot
scopedSlots
$parent & $children & $root

詳細使用能夠查看個人這一篇博客一篇文章看懂Vue.js的11種傳值通訊方式

mixins混入的使用

使用環境

通常獲取驗證碼，收藏，點贊等公用且邏輯同樣(有些邏輯是根據頁面的不一樣而不一樣的不建議使用混入)等場景均可以使用混入

實際使用

這裏我直接封裝了一個vue新開窗口的混入方法，引入了之後，混入中的全部data,methods，以及生命週期都會共享

//openWindow.js
export default {
  methods:{
    openUrl(url){
      const link= this.$router.resolve({path: url});
      window.open(link.href,'_blank');
    },
  }
}

//其餘頁面使用
import openWindow from "../../mixins/openWindow";

export default{
    mixins:[openWindow],
}
複製代碼

注意點(使用的頁面統稱爲組件)

① 混入比組件優先執行

② 當混入中的屬性或者方法與組件中的屬性或者方法名稱相同時，以組件中的值爲準(結合上一條規則，由於混入先執行，因此組件會將混入覆蓋)

③ 比方說A頁面和B頁面都使用了同一個混入，A頁面與B頁面的狀態一樣是獨立的

qs

使用場景，get傳輸的時候都是路由拼接方式(?a=1&b=2)，而不是json方式
實際使用

//安裝依賴
npm install qs --save

//頁面中或者直接api.js中直接序列化使用
import qs from 'qs'
qs.stringify(params)

//axios攔截器中直接使用
import qs from 'qs'
axios.interceptors.request.use(
  config => {
    if (config.method === 'get') {
      config.data = qs.stringify(config.data)
    }
)
複製代碼