1. 能讓你首次加載更快的路由懶加載

路由懶加載可以讓我們的包不需要一次把所有的頁(yè)面的加載進(jìn)來款慨，只加載當(dāng)前頁(yè)面的路由組件就行谭确。

舉個(gè)??刊橘，如果這樣寫讲岁，加載的時(shí)候會(huì)全部都加載進(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')
    }
  ]
})

2. 你是否還記得有一個(gè)叫Object.freeze的方法缓苛？

應(yīng)該所有同學(xué)都知道芳撒，vue初始化的時(shí)候會(huì)將data里面的數(shù)據(jù)都搞成響應(yīng)式數(shù)據(jù)吧。但是未桥，我們?cè)趯憳I(yè)務(wù)邏輯的時(shí)候會(huì)有些數(shù)據(jù)一初始化就永遠(yuǎn)不會(huì)改變笔刹，它根本就不需要被vue做成響應(yīng)式數(shù)據(jù)，因此我們應(yīng)該將這些不用改變的數(shù)據(jù)通過Object.freeze方法凍結(jié)它冬耿，避免vue初始化的時(shí)候舌菜，做一些無用的操作。

例子

export default {
  data:()=>({
    list:Object.freeze([{title:'我永遠(yuǎn)不需要改變亦镶，我不需要響應(yīng)式'}])
  })
}

異步組件那么強(qiáng)酷师，你是不是沒用過讶凉？
異步組件可以讓我們?cè)谛枰恍┙M件時(shí)才將它加載進(jìn)來，而不是一初始化就加載進(jìn)來山孔，這跟路由懶加載時(shí)一個(gè)概念懂讯。

例子

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

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

例子

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

3. 你是不是還在computed中使用this褐望？

我猜還有很多同學(xué)，在computed屬性中通過this.xxx去拿data里面的數(shù)據(jù)串前，和methods里面的方法吧瘫里，或許還會(huì)通過this.route去獲取路由里面的數(shù)據(jù)吧。其實(shí)荡碾，我們可以避免這些丑陋的this,它甚至?xí)o我們帶來看不見的性能問題谨读。實(shí)現(xiàn)上，我們通過this能訪問到的數(shù)據(jù)坛吁，在computed的第一個(gè)參數(shù)上都能結(jié)構(gòu)出來劳殖。

例子

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

4. 如何避免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)一些不必要的性能問題，比如這個(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>

5. 那么強(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>

6. attr和listeners讓你封裝組件如魚得水！

attr和listeners可能很多同學(xué)沒怎么去使用锈津，其實(shí)它們讓我們對(duì)一些組件庫(kù)的組件二次封裝呀酸，非常好用的。

簡(jiǎn)單介紹一下它們兩個(gè)：

attr里面琼梆。

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>

7. v-model還有這么好的修飾符窿吩！

v-model上有3個(gè)比較好用的修飾符不知到大家有沒有用過，一個(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>

8. 你還在用瀏覽器的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)聽一些事件，比如click厅瞎，但是不論你怎么點(diǎn)饰潜，它都沒反應(yīng)，為什么呢和簸？

例子

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

因?yàn)檫@樣寫vue會(huì)認(rèn)為彭雾，你自定義了一個(gè)click事件，要在子組件通過$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)中比較常用浩村。