vue 作為目前前端三大框架之一，對于前端開發(fā)者可以說是必備技能。那么怎么系統(tǒng)地學習和掌握 vue 呢?為此，我做了簡單的知識體系體系總結(jié)，不足之處請各位大佬多多包涵和指正，如果喜歡的可以點個小贊!本文主要講述一些vue開發(fā)中的實用技巧。

監(jiān)聽組件的生命周期

比如有父組件 Parent 和子組件 Child，如果父組件監(jiān)聽到子組件掛載 mounted 就做一些邏輯處理，常規(guī)的寫法可能如下：

 // Parent.vue 
<Child @mounted="doSomething"/> 
 
// Child.vue 
mounted() { 
  this.$emit("mounted"); 
} 

此外，還有一種特別簡單的方式，子組件不需要任何處理，只需要在父組件引用的時候通過@hook 來監(jiān)聽即可，代碼如下：

<Child @hook:mounted="doSomething" /> 
<Child @hook:updated="doSomething" /> 

當然這里不僅僅是可以監(jiān)聽 mounted，其它的生命周期事件，例如：created，updated 等都可以。

watch 的初始立即執(zhí)行

觀察和響應(yīng) Vue 實例上的數(shù)據(jù)變動。類似于某些數(shù)據(jù)的監(jiān)聽回調(diào) ，每當監(jiān)聽的數(shù)據(jù)變化時都會執(zhí)行回調(diào)進行后續(xù)操作。

但是當 watch 一個變量的時候，初始化時并不會執(zhí)行，如下面的例子，你需要在 created 的時候手動調(diào)用一次。

created() { 
  this.getList(); 
}, 
watch: { 
  keyWord: 'getList', 
} 

上面這樣的做法可以使用，但很麻煩，我們可以添加 immediate 屬性，這樣初始化的時候就會自動觸發(fā)(不用再寫 created 去調(diào)用了)，然后上面的代碼就能簡化為：

watch: { 
  keyWord: { 
    handler: 'getList', 
    immediate: true 
  } 
} 

watch 有三個參數(shù)：

• handler：其值是一個回調(diào)函數(shù)。即監(jiān)聽到變化時應(yīng)該執(zhí)行的函數(shù)
• deep：其值是 true 或 false;確認是否深入監(jiān)聽。
• immediate：其值是 true 或 false，確認是否以當前的初始值執(zhí)行 handler 的函數(shù)

路由參數(shù)變化組件不更新

同一path的頁面跳轉(zhuǎn)時路由參數(shù)變化，但是組件沒有對應(yīng)的更新。

原因：主要是因為獲取參數(shù)寫在了created或者mounted路由鉤子函數(shù)中，路由參數(shù)變化的時候，這個生命周期不會重新執(zhí)行。

解決方案1：watch監(jiān)聽路由

watch: { 
 // 方法1 //監(jiān)聽路由是否變化 
  '$route' (to, from) { 
   if(to.query.id !== from.query.id){ 
            this.id = to.query.id; 
            this.init();//重新加載數(shù)據(jù) 
        } 
  } 
} 
//方法 2  設(shè)置路徑變化時的處理函數(shù) 
watch: { 
'$route': { 
    handler: 'init', 
    immediate: true 
  } 
} 

解決方案2 ：為了實現(xiàn)這樣的效果可以給router-view添加一個不同的key，這樣即使是公用組件，只要url變化了，就一定會重新創(chuàng)建這個組件。

<router-view :key="$route.fullpath"></router-view> 

路由懶加載

Vue 項目中實現(xiàn)路由按需加載(路由懶加載)的 3 中方式：

// 1、Vue異步組件技術(shù)： 
 { 
    path: '/home', 
    name: 'Home', 
    component: resolve => reqire(['path路徑'], resolve) 
  } 
 
// 2、es6提案的import() 
  const Home = () => import('path路徑') 
 
// 3、webpack提供的require.ensure() 
  { 
     path: '/home', 
     name: 'Home', 
     component: r => require.ensure([],() =>  r(require('path路徑')), 'demo') 
    } 

require.context()

require.context(directory,useSubdirectories,regExp)

• directory：說明需要檢索的目錄
• useSubdirectories：是否檢索子目錄
• regExp：匹配文件的正則表達式,一般是文件名

場景:如頁面需要導入多個組件,原始寫法：

import titleCom from '@/components/home/titleCom' 
import bannerCom from '@/components/home/bannerCom' 
import cellCom from '@/components/home/cellCom' 
components: { 
  titleCom, bannerCom, cellCom 
} 

這樣就寫了大量重復的代碼,利用 require.context 可以寫成

const path = require('path') 
const files = require.context('@/components/home', false, /\.vue$/) 
const modules = {} 
files.keys().forEach(key => { 
  const name = path.basename(key, '.vue') 
  modules[name] = files(key).default || files(key) 
}) 
components: modules 

遞歸組件

遞歸組件: 組件在它的模板內(nèi)可以遞歸的調(diào)用自己，只要給組件設(shè)置 name 組件就可以了。

不過需要注意的是，必須給一個條件來限制數(shù)量，否則會拋出錯誤: max stack size exceeded

組件遞歸用來開發(fā)一些具體有未知層級關(guān)系的獨立組件。比如：聯(lián)級選擇器和樹形控件

<template> 
  <div v-for="(item,index) in treeArr"> {{index}} <br/> 
      <tree :item="item.arr" v-if="item.flag"></tree> 
  </div> 
</template> 
<script> 
export default { 
  // 必須定義name，組件內(nèi)部才能遞歸調(diào)用 
  name: 'tree', 
  data(){ 
    return {} 
  }, 
  // 接收外部傳入的值 
  props: { 
     item: { 
      type:Array, 
      default: ()=>[] 
    } 
  } 
} 
</script> 

清除定時器或者事件監(jiān)聽

由于項目中有些頁面難免會碰到需要定時器或者事件監(jiān)聽。但是在離開當前頁面的時候，定時器如果不及時合理地清除，會造成業(yè)務(wù)邏輯混亂甚至應(yīng)用卡死的情況，這個時就需要清除定時器事件監(jiān)聽，即在頁面卸載(關(guān)閉)的生命周期函數(shù)里，清除定時器。

methods:{ 
  resizeFun () { 
    this.tableHeight = window.innerHeight - document.getElementById('table').offsetTop - 128 
  }, 
  setTimer() { 
    this.timer = setInterval(() => { }) 
  }, 
  clearTimer() {//清除定時器 
        clearInterval(this.timer) 
    this.timer = null 
    } 
}, 
mounted() { 
  this.setTimer() 
  window.addEventListener('resize', this.resizeFun) 
}, 
beforeDestroy() { 
  window.removeEventListener('resize', this.resizeFun) 
  this.clearTimer() 
} 

自定義路徑別名

我們也可以在基礎(chǔ)配置文件中添加自己的路徑別名

resolve: { 
    extensions: ['.js', '.vue', '.json'], 
    alias: { 
      'vue$': 'vue/dist/vue.esm.js', 
      '@': resolve('src'), 
      'assets': resolve('src/assets') 
    } 
  } 

然后我們導入組件的時候就可以這樣寫：

// import YourComponent from '/src/assets/YourComponent' 
import YourComponent from 'assets/YourComponent' 

這樣既解決了路徑過長的麻煩，又解決了相對路徑的煩惱。

動態(tài)給修改dom的樣式

原因：因為我們在寫.vue文件中的樣式都會追加scoped。這樣針對模板dom中的樣式就可以生效，但其生效后的最終樣式并不是我們寫的樣式名，而是編碼后的。比如：

<template> 
  <div class="box">dom</div> 
</template> 
<style lang="scss" scoped> 
  .box { 
    background: red; 
  } 
</style> 

vue 將代碼轉(zhuǎn)譯成如下，所以我們在js中拼接上的dom結(jié)構(gòu)樣式并不會生效。

.box[data-v-11c6864c]{ background:red; } 
<template> 
  <div class="box" data-v-11c6864c>dom</div> 
</template> 

解決方法：將要改變的樣式寫在非scoped樣式標簽中。

長列表性能優(yōu)化

我們應(yīng)該都知道 vue 會通過 object.defineProperty 對數(shù)據(jù)進行劫持，來實現(xiàn)視圖響應(yīng)數(shù)據(jù)的變化，然而有些時候我們的組件就是純粹的數(shù)據(jù)展示，不會有任何改變，我們就不需要 vue 來劫持我們的數(shù)據(jù)，在大量數(shù)據(jù)展示的情況下，這能夠很明顯的減少組件初始化的時間。

所以，我們可以通過 object.freeze 方法來凍結(jié)一個對象，這個對象一旦被凍結(jié)，vue就不會對數(shù)據(jù)進行劫持了。

export default { 
  data: () => ({ 
    list: [] 
  }), 
  async created() { 
    const list = await axios.get('xxxx') 
    this.list = Object.freeze(list) 
  }, 
  methods: { 
    // 此處做的操作都不能改變list的值 
  } 
} 

另外需要說明的是，這里只是凍結(jié)了 list 的值，引用不會被凍結(jié)，當我們需要 reactive 數(shù)據(jù)的時候，我們可以重新給 list 賦值。

內(nèi)容分發(fā)(slot)

插槽 slot，也是組件的一塊 HTML 模板，這一塊模板顯示不顯示、以及怎樣顯示由父組件來決定。實際上，一個 slot 最核心的兩個問題在這里就點出來了，是顯示不顯示和怎樣顯示。

默認插槽

又名單個插槽、匿名插槽，這類插槽沒有具體名字，一個組件只能有一個該類插槽。

<!-- 父組件 parent.vue --> 
<template> 
  <div class="parent"> 
    <h1>父容器</h1> 
    <child> 
      <div class="tmpl"> 
        <span>菜單1</span> 
      </div> 
    </child> 
  </div> 
</template> 
 
<!-- 子組件 child.vue --> 
<template> 
  <div class="child"> 
    <h1>子組件</h1> 
    <slot></slot> 
  </div> 
</template> 

具名插槽

匿名插槽沒有 name 屬性，所以叫匿名插槽。那么，插槽加了 name 屬性，就變成了具名插槽。具名插槽可以在一個組件中出現(xiàn) N 次，出現(xiàn)在不同的位置，只需要使用不同的 name 屬性區(qū)分即可。

<!-- 父組件 parent.vue --> 
<template> 
  <div class="parent"> 
    <h1>父容器</h1> 
    <child> 
      <div class="tmpl" slot="up"> 
        <span>菜單up-1</span> 
      </div> 
      <div class="tmpl" slot="down"> 
        <span>菜單down-1</span> 
      </div> 
      <div class="tmpl"> 
        <span>菜單->1</span> 
      </div> 
    </child> 
  </div> 
</template> 
 
<!-- 子組件 child.vue --> 
<template> 
  <div class="child"> 
    <!-- 具名插槽 --> 
    <slot name="up"></slot> 
    <h3>這里是子組件</h3> 
    <!-- 具名插槽 --> 
    <slot name="down"></slot> 
    <!-- 匿名插槽 --> 
    <slot></slot> 
  </div> 
</template> 

作用域插槽

作用域插槽可以是默認插槽，也可以是具名插槽，不一樣的地方是，作用域插槽可以為 slot 標簽綁定數(shù)據(jù)，讓其父組件可以獲取到子組件的數(shù)據(jù)。

<!-- parent.vue --> 
<template> 
  <div class="parent"> 
    <h1>這是父組件</h1> 
    <child 
      >> 
      <template slot="default" slot-scope="slotProps"> 
        {{ slotProps.user.name }} 
      </template> </child 
    >> 
  </div> 
</template> 
 
<!-- 子組件 child.vue --> 
<template> 
  <div class="child"> 
    <h1>這是子組件</h1> 
    <slot :user="user"></slot> 
  </div> 
</template> 
<script> 
  export default { 
    data() { 
      return { 
        user: { 
          name: '小趙' 
        } 
      } 
    } 
  } 
</script>