vue實戰中的一些實用小魔法匯總

Posted on by

能讓你首次加載更快的路由懶加載，怎麼能忘？

路由懶加載可以讓我們的包不需要一次把所有的頁面的加載進來，隻加載當前頁面的路由組件就行。

舉個🌰，如果這樣寫，加載的時候會全部都加載進來。

const router = new VueRouter({
  routes:[
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

所以，應該避免上面的寫法，盡量使用懶加載

懶加載寫法,結合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')
    }
  ]
})

你是否還記得有一個叫Object.freeze的方法？

應該所有同學都知道，vue初始化的時候會將data裡面的數據都搞成響應式數據吧。但是，我們在寫業務邏輯的時候會有些數據一初始化就永遠不會改變，它根本就不需要被vue做成響應式數據，因此我們應該將這些不用改變的數據通過Object.freeze方法凍結它，避免vue初始化的時候，做一些無用的操作。

🌰

export default {
  data:()=>({
    list:Object.freeze([{title:'我永遠不需要改變，我不需要響應式'}])
  })
}

異步組件那麼強，你是不是沒用過？

異步組件可以讓我們在需要一些組件時才將它加載進來，而不是一初始化就加載進來，這跟路由懶加載時一個概念。

🌰

export default {
  components:{
    AsyncComponent:()=>import(/* webpackChunkName: "AsyncComponent" */ './Async')
  }
}

首次加載的包是不包含改組件代碼的

當點擊觸發某種行為引進的包是這樣的

異步組件還有一種比較完善的寫法

🌰

export default {
  components:{
    AsyncComponent:()=>({
      component:import(/* webpackChunkName: "AsyncComponent" */ './Async'),
      delay:200, // 延遲幾毫秒，默認200
      timeout:3000, // 加載幾毫米之後就超時，觸發error組件
      loading:LoadingComponent, // 組件未加載回來前顯示
      error:ErrorComponent // 組件超時時顯示
    })
  }
}

你是不是還在computed中使用this？

我猜還有很多同學，在computed屬性中通過this.xxx去拿data裡面的數據，和methods裡面的方法吧，或許還會通過this.$store去拿vuex的state,和commit等，甚至，還會通過this.$route去獲取路由裡面的數據吧。其實，我們可以避免這些醜陋的this,它甚至會給我們帶來看不見的性能問題。實現上，我們通過this能訪問到的數據，在computed的第一個參數上都能結構出來。

🌰

export default {
   haha({$attrs,$route,$store,$listeners,$ref}){
     // 還能結構很多屬性，可自行打印康康
     return 
   }
}

如何避免v-if和v-for一起使用？

為什麼要避免v-if和v-for在同一個元素上同時使用呢？因為在vue的源碼中有一段代碼時對指令的優先級的處理，這段代碼是先處理v-for再處理v-if的。所以如果我們在同一層中一起使用兩個指令，會出現一些不必要的性能問題，比如這個列表有一百條數據，再某種情況下，它們都不需要顯示，當vue還是會循環這個100條數據顯示，再去判斷v-if，因此，我們應該避免這種情況的出現。

不好的🌰

    <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>

那麼強的.sync修飾符你為什麼不用?

如果你想要在父組件控制一個子組件的顯示隱藏，是不是還在傳一個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讓你封裝組件如魚得水！

$attr和$listeners可能很多同學沒怎麼去使用，其實它們讓我們對一些組件庫的組件二次封裝，非常好用的。

簡單介紹一下它們兩個：

$attr:如果一個組件不但傳瞭prop需要的屬性，還傳瞭prop之外的其他屬性，那麼這些屬性都會被收集到$attr裡面。

$listeners：如果一個組件傳瞭自定義事件，但子組件沒有通過emit觸發，那麼這些自定義方法都會被收集到$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還有這麼好的修飾符！

v-model上有3個比較好用的修飾符不知到大傢有沒有用過，一個是lazy,一個是number,一個是trim。

lazy:可以將@input事件變成@blur事件

number：隻能輸入數字值

trim:清空兩邊的空格

🌰

   //lazy
   <input v-model.lazy="msg" />
   //number
   <input v-model.number="msg" />
   //trim
   <input v-model.trim="msg" />

你是否知道v-model還能自定義屬性？

如果想在一個自定義的Input組件上使用v-model，那麼就要在子組件，介紹一個value，和觸發input事件，v-model的默認語法糖就是這兩個東西的組合。

🌰

// 父組件
<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滾動你的頁面嗎？

有些時候我們在操作一下頁面的滾動行為，那麼我們第一時間就會想到scrollTop。其實我們還有第二個選擇就是VueRouter給我們提供的scrollBehavior鉤子。

🌰

const router = new VueRouter({
  routes:[...] ,
  scrollBehavior(to,from,position){
      // position參數可自行打印康康，點擊瀏覽器左右箭頭會觸發
      return{
          // 這裡可以返回很多參數，下面簡單列就幾個，詳情自己康康官網
          x:100,
          y:100,
          selector:#app,
          offset:200,
          //等等
      }
  }
})

你在子組件上定義的原生事件不生效？

有時候我們想在子組件上面監聽一些事件，比如click，但是不論你怎麼點，它都沒反應，為什麼呢？

🌰

<template>
    <div>
        <Child @click="test"></Child>
    </div>
</template>
<script>
    methods:{
        test(){}
    }
</script>

因為這樣寫vue會認為，你自定義瞭一個click事件，要在子組件通過$emit(‘click’)觸發才行。如果我就是要在父組件觸發呢？那就要用到native修飾符瞭。

🌰

<template>
    <div>
        <Child @click.native="test"></Child>
    </div>
</template>
<script>
    methods:{
        test(){}
    }
</script>

用keep-alive緩存一下你的頁面狀態吧！

keep-alive可以幫助我們在切換組件的時候，保留上一個組件不被銷毀，它在管理後臺系統中比較常用。

🌰

<keep-alive>
    <router-view></router-view>
</keep-alive>

總結

到此這篇關於vue實戰中的一些實用小魔法的文章就介紹到這瞭,更多相關vue實戰技巧內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：