风凌天下,完美世界辰东,小说阅读网免费小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

Vue開(kāi)發(fā)必須知道的36個(gè)技巧【近1W字】

[[376218]]

前言

Vue 3.x 的Pre-Alpha 版本。后面應(yīng)該還會(huì)有 Alpha、Beta 等版本,預(yù)計(jì)至少要等到 2020 年第一季度才有可能發(fā)布 3.0 正式版;

所以應(yīng)該趁還沒(méi)出來(lái)加緊打好 Vue2.x 的基礎(chǔ);

Vue基本用法很容易上手,但是有很多優(yōu)化的寫(xiě)法你就不一定知道了,本文從列舉了 36 個(gè) vue 開(kāi)發(fā)技巧;

后續(xù) Vue 3.x 出來(lái)后持續(xù)更新.

1.require.context()

1.場(chǎng)景:如頁(yè)面需要導(dǎo)入多個(gè)組件,原始寫(xiě)法:

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

2.這樣就寫(xiě)了大量重復(fù)的代碼,利用 require.context 可以寫(xiě)成

 
 
 
  
  
  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

這樣不管頁(yè)面引入多少組件,都可以使用這個(gè)方法

3.API 方法

 
 
 
  
  
  實(shí)際上是 webpack 的方法,vue 工程一般基于 webpack,所以可以使用  
  
  
  require.context(directory,useSubdirectories,regExp)  
  
  
  接收三個(gè)參數(shù):  
  
  
  directory：說(shuō)明需要檢索的目錄  
  
  
  useSubdirectories：是否檢索子目錄  
  
  
  regExp: 匹配文件的正則表達(dá)式,一般是文件名

2.watch

2.1 常用用法

1.場(chǎng)景:表格初始進(jìn)來(lái)需要調(diào)查詢(xún)接口 getList(),然后input 改變會(huì)重新查詢(xún)

 
 
 
  
  
  created(){  
  
  
    this.getList()  
  
  
  },  
  
  
  watch: {  
  
  
    inpVal(){  
  
  
      this.getList()  
  
  
    }  
  
  
  }

2.2 立即執(zhí)行

2.可以直接利用 watch 的immediate和handler屬性簡(jiǎn)寫(xiě)

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

2.3 深度監(jiān)聽(tīng)

3.watch 的 deep 屬性,深度監(jiān)聽(tīng),也就是監(jiān)聽(tīng)復(fù)雜數(shù)據(jù)類(lèi)型

 
 
 
  
  
  watch:{  
  
  
    inpValObj:{  
  
  
      handler(newVal,oldVal){  
  
  
        console.log(newVal)  
  
  
        console.log(oldVal)  
  
  
      },  
  
  
      deep:true  
  
  
    }  
  
  
  }

此時(shí)發(fā)現(xiàn)oldVal和 newVal 值一樣;

因?yàn)樗鼈兯饕粋€(gè)對(duì)象/數(shù)組,Vue 不會(huì)保留修改之前值的副本;

所以深度監(jiān)聽(tīng)雖然可以監(jiān)聽(tīng)到對(duì)象的變化,但是無(wú)法監(jiān)聽(tīng)到具體對(duì)象里面那個(gè)屬性的變化

3. 14種組件通訊

3.1 props

這個(gè)應(yīng)該非常屬性,就是父?jìng)髯拥膶傩?

props 值可以是一個(gè)數(shù)組或?qū)ο?

 
 
 
  
  
  // 數(shù)組:不建議使用  
  
  
  props:[]  
  
  
  // 對(duì)象  
  
  
  props:{  
  
  
   inpVal:{  
  
  
    type:Number, //傳入值限定類(lèi)型  
  
  
    // type 值可為String,Number,Boolean,Array,Object,Date,Function,Symbol  
  
  
    // type 還可以是一個(gè)自定義的構(gòu)造函數(shù)，并且通過(guò) instanceof 來(lái)進(jìn)行檢查確認(rèn)  
  
  
    required: true, //是否必傳  
  
  
    default:200,  //默認(rèn)值,對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)工廠(chǎng)函數(shù)獲取如 default:()=>[]  
  
  
    validator:(value) {  
  
  
      // 這個(gè)值必須匹配下列字符串中的一個(gè)  
  
  
      return ['success', 'warning', 'danger'].indexOf(value) !== -1 
  
  
    }  
  
  
   }  
  
  
  }

3.2 $emit

這個(gè)也應(yīng)該非常常見(jiàn),觸發(fā)子組件觸發(fā)父組件給自己綁定的事件,其實(shí)就是子傳父的方法

 
 
 
  
  
  // 父組件  
  
  
    
  
  
  // 子組件  
  
  
  this.$emit('title',[{title:'這是title'}])

3.3 vuex

1.這個(gè)也是很常用的,vuex 是一個(gè)狀態(tài)管理器

2.是一個(gè)獨(dú)立的插件,適合數(shù)據(jù)共享多的項(xiàng)目里面,因?yàn)槿绻皇呛?jiǎn)單的通訊,使用起來(lái)會(huì)比較重

3.API

 
 
 
  
  
  state:定義存貯數(shù)據(jù)的倉(cāng)庫(kù) ,可通過(guò)this.$store.state 或mapState訪(fǎng)問(wèn)  
  
  
  getter:獲取 store 值,可認(rèn)為是 store 的計(jì)算屬性,可通過(guò)this.$store.getter 或  
  
  
         mapGetters訪(fǎng)問(wèn) 
  
  
   mutation:同步改變 store 值,為什么會(huì)設(shè)計(jì)成同步,因?yàn)閙utation是直接改變 store 值,  
  
  
           vue 對(duì)操作進(jìn)行了記錄,如果是異步無(wú)法追蹤改變.可通過(guò)mapMutations調(diào)用  
  
  
  action:異步調(diào)用函數(shù)執(zhí)行mutation,進(jìn)而改變 store 值,可通過(guò) this.$dispatch或mapActions  
  
  
         訪(fǎng)問(wèn)  
  
  
  modules:模塊,如果狀態(tài)過(guò)多,可以拆分成模塊,最后在入口通過(guò)...解構(gòu)引入

3.4 attrs和attrs和attrs和listeners

2.4.0 新增

這兩個(gè)是不常用屬性,但是高級(jí)用法很常見(jiàn);

1.$attrs

場(chǎng)景:如果父?jìng)髯佑泻芏嘀?那么在子組件需要定義多個(gè) props

解決:$attrs獲取子傳父中未在 props 定義的值

 
 
 
  
  
  // 父組件  
  
  
    
  
  
  // 子組件  
  
  
  mounted() {  
  
  
    console.log(this.$attrs) //{title: "這是標(biāo)題", width: "80", height: "80", imgUrl: "imgUrl"}  
  
  
  },

相對(duì)應(yīng)的如果子組件定義了 props,打印的值就是剔除定義的屬性

 
 
 
  
  
  props: {  
  
  
    width: {  
  
  
      type: String,  
  
  
      default: ''  
  
  
    }  
  
  
  },  
  
  
  mounted() {  
  
  
    console.log(this.$attrs) //{title: "這是標(biāo)題", height: "80", imgUrl: "imgUrl"}  
  
  
  },

2.$listeners

場(chǎng)景:子組件需要調(diào)用父組件的方法

解決:父組件的方法可以通過(guò) v-on="$listeners" 傳入內(nèi)部組件——在創(chuàng)建更高層次的組件時(shí)非常有用

 
 
 
  
  
  // 父組件  
  
  
    
  
  
  // 子組件  
  
  
  mounted() {  
  
  
    console.log(this.$listeners) //即可拿到 change 事件  
  
  
  }

如果是孫組件要訪(fǎng)問(wèn)父組件的屬性和調(diào)用方法,直接一級(jí)一級(jí)傳下去就可以

3.inheritAttrs

 
 
 
  
  
  // 父組件  
  
  
    
  
  
  // 子組件  
  
  
  mounted() {  
  
  
    console.log(this.$attrs) //{title: "這是標(biāo)題", width: "80", height: "80", imgUrl: "imgUrl"}  
  
  
  },  
  
  
  inheritAttrs默認(rèn)值為true，true的意思是將父組件中除了props外的屬性添加到子組件的根節(jié)點(diǎn)上(說(shuō)明，即使設(shè)置為true，子組件仍然可以通過(guò)$attr獲取到props意外的屬性)  
  
  
  將inheritAttrs:false后,屬性就不會(huì)顯示在根節(jié)點(diǎn)上了

3.5 provide和inject

2.2.0 新增

描述:

provide 和 inject 主要為高階插件/組件庫(kù)提供用例。并不推薦直接用于應(yīng)用程序代碼中;

并且這對(duì)選項(xiàng)需要一起使用;

以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴(lài)，不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效。

 
 
 
  
  
  //父組件:  
  
  
  provide: { //provide 是一個(gè)對(duì)象,提供一個(gè)屬性或方法  
  
  
    foo: '這是 foo',  
  
  
    fooMethod:()=>{  
  
  
      console.log('父組件 fooMethod 被調(diào)用')  
  
  
    }  
  
  
  },  
  
  
  // 子或者孫子組件  
  
  
  inject: ['foo','fooMethod'], //數(shù)組或者對(duì)象,注入到子組件  
  
  
  mounted() {  
  
  
    this.fooMethod()  
  
  
    console.log(this.foo)  
  
  
  }  
  
  
  //在父組件下面所有的子組件都可以利用inject

provide 和 inject 綁定并不是可響應(yīng)的。這是官方刻意為之的。

然而，如果你傳入了一個(gè)可監(jiān)聽(tīng)的對(duì)象，那么其對(duì)象的屬性還是可響應(yīng)的,對(duì)象是因?yàn)槭且妙?lèi)型

 
 
 
  
  
  //父組件:  
  
  
  provide: {   
  
  
    foo: '這是 foo'  
  
  
  },  
  
  
  mounted(){  
  
  
    this.foo='這是新的 foo'  
  
  
  }  
  
  
  // 子或者孫子組件  
  
  
  inject: ['foo'],   
  
  
  mounted() {  
  
  
    console.log(this.foo) //子組件打印的還是'這是 foo'  
  
  
  }

3.6 parent和parent和parent和children

$parent:父實(shí)例

$children:子實(shí)例

 
 
 
  
  
  //父組件  
  
  
  mounted(){  
  
  
    console.log(this.$children)   
  
  
    //可以拿到 一級(jí)子組件的屬性和方法  
  
  
    //所以就可以直接改變 data,或者調(diào)用 methods 方法  
  
  
  }  
  
  
  //子組件  
  
  
  mounted(){  
  
  
    console.log(this.$parent) //可以拿到 parent 的屬性和方法  
  
  
  }

children和children和children和parent 并不保證順序，也不是響應(yīng)式的

只能拿到一級(jí)父組件和子組件

3.7 $refs

 
 
 
  
  
  // 父組件  
  
  
    
  
  
  mounted(){  
  
  
    console.log(this.$refs.home) //即可拿到子組件的實(shí)例,就可以直接操作 data 和 methods  
  
  
  }

3.8 $root

 
 
 
  
  
  // 父組件  
  
  
  mounted(){  
  
  
    console.log(this.$root) //獲取根實(shí)例,最后所有組件都是掛載到根實(shí)例上  
  
  
    console.log(this.$root.$children[0]) //獲取根實(shí)例的一級(jí)子組件  
  
  
    console.log(this.$root.$children[0].$children[0]) //獲取根實(shí)例的二級(jí)子組件  
  
  
  }

3.9 .sync

在 [email protected] 的時(shí)候曾作為雙向綁定功能存在，即子組件可以修改父組件中的值;

在 [email protected] 的由于違背單項(xiàng)數(shù)據(jù)流的設(shè)計(jì)被干掉了;

在 [email protected]+ 以上版本又重新引入了這個(gè) .sync 修飾符;

 
 
 
  
  
  // 父組件  
  
  
    
  
  
  //編譯時(shí)會(huì)被擴(kuò)展為  
  
  
   title = val"/>  
  
  
  // 子組件  
  
  
  // 所以子組件可以通過(guò)$emit 觸發(fā) update 方法改變  
  
  
  mounted(){  
  
  
    this.$emit("update:title", '這是新的title')  
  
  
  }

3.10 v-slot

2.6.0 新增

1.slot,slot-cope,scope 在 2.6.0 中都被廢棄,但未被移除

2.作用就是將父組件的 template 傳入子組件

3.插槽分類(lèi):

A.匿名插槽(也叫默認(rèn)插槽): 沒(méi)有命名,有且只有一個(gè);

 
 
 
  
  
  // 父組件  
  
  
     
  
  
        
  
  
         任意內(nèi)容  
  
  
         我是匿名插槽 
  
  
  
        
  
  
     
  
  
  // 子組件  
  
  
  我是默認(rèn)值  
  
  
  //v-slot:default寫(xiě)上感覺(jué)和具名寫(xiě)法比較統(tǒng)一,容易理解,也可以不用寫(xiě)

B.具名插槽: 相對(duì)匿名插槽組件slot標(biāo)簽帶name命名的;

 
 
 
  
  
  // 父組件  
  
  
     
  
  
        
  
  
         任意內(nèi)容  
  
  
         我是匿名插槽 
  
  
  
        
  
  
     
  
  
  //子組件  
  
  
  我是默認(rèn)值

C.作用域插槽: 子組件內(nèi)數(shù)據(jù)可以被父頁(yè)面拿到(解決了數(shù)據(jù)只能從父頁(yè)面?zhèn)鬟f給子組件)

 
 
 
  
  
  // 父組件  
  
  
    
  
  
     
  
  
     {{slotProps.user.firstName}}  
  
  
      
  
  
     
  
  
  //slotProps 可以隨意命名  
  
  
  //slotProps 接取的是子組件標(biāo)簽slot上屬性數(shù)據(jù)的集合所有v-bind:user="user"  
  
  
  // 子組件  
  
  
    
  
  
      {{ user.lastName }}  
  
  
      
  
  
  data() {  
  
  
      return {  
  
  
        user:{  
  
  
          lastName:"Zhang",  
  
  
          firstName:"yue"  
  
  
        },  
  
  
        test:[1,2,3,4]  
  
  
      }  
  
  
    },  
  
  
  // {{ user.lastName }}是默認(rèn)數(shù)據(jù)  v-slot:todo 當(dāng)父頁(yè)面沒(méi)有(="slotProps")

3.11 EventBus

1.就是聲明一個(gè)全局Vue實(shí)例變量 EventBus , 把所有的通信數(shù)據(jù)，事件監(jiān)聽(tīng)都存儲(chǔ)到這個(gè)變量上;

2.類(lèi)似于 Vuex。但這種方式只適用于極小的項(xiàng)目

3.原理就是利用on和on和on和emit 并實(shí)例化一個(gè)全局 vue 實(shí)現(xiàn)數(shù)據(jù)共享

 
 
 
  
  
  // 在 main.js  
  
  
  Vue.prototype.$eventBus=new Vue()  
  
  
  // 傳值組件 
  
  
   this.$eventBus.$emit('eventTarget','這是eventTarget傳過(guò)來(lái)的值')  
  
  
  // 接收組件  
  
  
  this.$eventBus.$on("eventTarget",v=>{  
  
  
    console.log('eventTarget',v);//這是eventTarget傳過(guò)來(lái)的值  
  
  
  })

4.可以實(shí)現(xiàn)平級(jí),嵌套組件傳值,但是對(duì)應(yīng)的事件名eventTarget必須是全局唯一的

3.12 broadcast和dispatch

vue 1.x 有這兩個(gè)方法,事件廣播和派發(fā),但是 vue 2.x 刪除了

下面是對(duì)兩個(gè)方法進(jìn)行的封裝

 
 
 
  
  
  function broadcast(componentName, eventName, params) {  
  
  
    this.$children.forEach(child => {  
  
  
      var name = child.$options.componentName;  
  
  
      if (name === componentName) {  
  
  
        child.$emit.apply(child, [eventName].concat(params));  
  
  
      } else {  
  
  
        broadcast.apply(child, [componentName, eventName].concat(params));  
  
  
      }  
  
  
    });  
  
  
  }  
  
  
  export default {  
  
  
    methods: {  
  
  
      dispatch(componentName, eventName, params) {  
  
  
        var parent = this.$parent;  
  
  
        var name = parent.$options.componentName;  
  
  
        while (parent && (!name || name !== componentName)) {  
  
  
          parentparent = parent.$parent; 
  
  
          if (parent) {  
  
  
            name = parent.$options.componentName;  
  
  
          }  
  
  
        }  
  
  
        if (parent) {  
  
  
          parent.$emit.apply(parent, [eventName].concat(params));  
  
  
        }  
  
  
      },  
  
  
      broadcast(componentName, eventName, params) { 
  
  
        broadcast.call(this, componentName, eventName, params);  
  
  
      }  
  
  
    }  
  
  
  }

3.13 路由傳參

1.方案一

 
 
 
  
  
  // 路由定義  
  
  
  {  
  
  
    path: '/describe/:id',  
  
  
    name: 'Describe',  
  
  
    component: Describe  
  
  
  }  
  
  
  // 頁(yè)面?zhèn)鲄?nbsp; 
  
  
  this.$router.push({  
  
  
    path: `/describe/${id}`, 
  
  
  })  
  
  
  // 頁(yè)面獲取  
  
  
  this.$route.params.id

2.方案二

 
 
 
  
  
  // 路由定義  
  
  
  {  
  
  
    path: '/describe',  
  
  
    name: 'Describe',  
  
  
    omponent: Describe  
  
  
  }  
  
  
  // 頁(yè)面?zhèn)鲄?nbsp; 
  
  
  this.$router.push({  
  
  
    name: 'Describe',  
  
  
    params: {  
  
  
      id: id  
  
  
    }  
  
  
  })  
  
  
  // 頁(yè)面獲取  
  
  
  this.$route.params.id

3.方案三

 
 
 
  
  
  // 路由定義  
  
  
  {  
  
  
    path: '/describe',  
  
  
    name: 'Describe',  
  
  
    component: Describe  
  
  
  }  
  
  
  // 頁(yè)面?zhèn)鲄?nbsp; 
  
  
  this.$router.push({  
  
  
    path: '/describe',  
  
  
      query: {  
  
  
        id: id  
  
  
    `}  
  
  
  )  
  
  
  // 頁(yè)面獲取  
  
  
  this.$route.query.id

4.三種方案對(duì)比

方案二參數(shù)不會(huì)拼接在路由后面,頁(yè)面刷新參數(shù)會(huì)丟失

方案一和三參數(shù)拼接在后面,丑,而且暴露了信息

3.14 Vue.observable

2.6.0 新增

用法:讓一個(gè)對(duì)象可響應(yīng)。Vue 內(nèi)部會(huì)用它來(lái)處理 data 函數(shù)返回的對(duì)象;

 
 
 
  
  
  返回的對(duì)象可以直接用于渲染函數(shù)和計(jì)算屬性?xún)?nèi)，并且會(huì)在發(fā)生改變時(shí)觸發(fā)相應(yīng)的更新;  
  
  
  也可以作為最小化的跨組件狀態(tài)存儲(chǔ)器，用于簡(jiǎn)單的場(chǎng)景。

通訊原理實(shí)質(zhì)上是利用Vue.observable實(shí)現(xiàn)一個(gè)簡(jiǎn)易的 vuex

 
 
 
  
  
  // 文件路徑 - /store/store.js  
  
  
  import Vue from 'vue'  
  
  
  export const store = Vue.observable({ count: 0 })  
  
  
  export const mutations = {  
  
  
    setCount (count) {  
  
  
      store.count = count  
  
  
    }  
  
  
  }  
  
  
  //使用

4.render 函數(shù)

1.場(chǎng)景:有些代碼在 template 里面寫(xiě)會(huì)重復(fù)很多,所以這個(gè)時(shí)候 render 函數(shù)就有作用啦

 
 
 
  
  
  // 根據(jù) props 生成標(biāo)簽  
  
  
  // 初級(jí)  
  
  
    
  
  
  // 優(yōu)化版,利用 render 函數(shù)減小了代碼重復(fù)率  
  
  
    
  
  
    
  
  
    import Vue from 'vue'  
  
  
    Vue.component('child', {  
  
  
      render(h) {  
  
  
        const tag = ['div', 'p', 'strong', 'h1', 'h2', 'textarea'][this.level-1]  
  
  
        return h(tag, this.$slots.default)  
  
  
      }, 
  
  
       props: {  
  
  
        level: {  type: Number,  required: true  }   
  
  
      }  
  
  
    })     
  
  
    export default {  
  
  
      name: 'hehe',  
  
  
      data() { return { level: 3 } }  
  
  
    }

2.render 和 template 的對(duì)比

前者適合復(fù)雜邏輯,后者適合邏輯簡(jiǎn)單;

后者屬于聲明是渲染，前者屬于自定Render函數(shù);

前者的性能較高，后者性能較低。

5.異步組件

場(chǎng)景:項(xiàng)目過(guò)大就會(huì)導(dǎo)致加載緩慢,所以異步組件實(shí)現(xiàn)按需加載就是必須要做的事啦

1.異步注冊(cè)組件

3種方法

 
 
 
  
  
  // 工廠(chǎng)函數(shù)執(zhí)行 resolve 回調(diào)  
  
  
  Vue.component('async-webpack-example', function (resolve) {  
  
  
    // 這個(gè)特殊的 `require` 語(yǔ)法將會(huì)告訴 webpack  
  
  
    // 自動(dòng)將你的構(gòu)建代碼切割成多個(gè)包, 這些包  
  
  
    // 會(huì)通過(guò) Ajax 請(qǐng)求加載  
  
  
    require(['./my-async-component'], resolve)  
  
  
  })  
  
  
  // 工廠(chǎng)函數(shù)返回 Promise  
  
  
  Vue.component(  
  
  
    'async-webpack-example',  
  
  
    // 這個(gè) `import` 函數(shù)會(huì)返回一個(gè) `Promise` 對(duì)象。  
  
  
    () => import('./my-async-component')  
  
  
  )  
  
  
  // 工廠(chǎng)函數(shù)返回一個(gè)配置化組件對(duì)象  
  
  
  const AsyncComponent = () => ({ 
  
  
    // 需要加載的組件 (應(yīng)該是一個(gè) `Promise` 對(duì)象)  
  
  
    component: import('./MyComponent.vue'),  
  
  
    // 異步組件加載時(shí)使用的組件  
  
  
    loading: LoadingComponent,  
  
  
    // 加載失敗時(shí)使用的組件  
  
  
    error: ErrorComponent,  
  
  
    // 展示加載時(shí)組件的延時(shí)時(shí)間。默認(rèn)值是 200 (毫秒)  
  
  
    delay: 200, 
  
  
    // 如果提供了超時(shí)時(shí)間且組件加載也超時(shí)了，  
  
  
    // 則使用加載失敗時(shí)使用的組件。默認(rèn)值是：`Infinity`  
  
  
    timeout: 3000 
  
  
  })

異步組件的渲染本質(zhì)上其實(shí)就是執(zhí)行2次或者2次以上的渲染, 先把當(dāng)前組件渲染為注釋節(jié)點(diǎn), 當(dāng)組件加載成功后, 通過(guò) forceRender 執(zhí)行重新渲染?；蛘呤卿秩緸樽⑨尮?jié)點(diǎn), 然后再渲染為loading節(jié)點(diǎn), 在渲染為請(qǐng)求完成的組件

2.路由的按需加載

 
 
 
  
  
  webpack< 2.4 時(shí)  
  
  
  {  
  
  
    path:'/',  
  
  
    name:'home',  
  
  
    components:resolve=>require(['@/components/home'],resolve)  
  
  
  } 
  
  
  webpack> 2.4 時(shí)  
  
  
  {  
  
  
    path:'/',  
  
  
    name:'home',  
  
  
    components:()=>import('@/components/home')  
  
  
  }  
  
  
  import()方法由es6提出，import()方法是動(dòng)態(tài)加載，返回一個(gè)Promise對(duì)象，then方法的參數(shù)是加載到的模塊。類(lèi)似于Node.js的require方法，主要import()方法是異步加載的。

6.動(dòng)態(tài)組件

場(chǎng)景:做一個(gè) tab 切換時(shí)就會(huì)涉及到組件動(dòng)態(tài)加載

但是這樣每次組件都會(huì)重新加載,會(huì)消耗大量性能,所以就起到了作用

這樣切換效果沒(méi)有動(dòng)畫(huà)效果,這個(gè)也不用著急,可以利用內(nèi)置的

7.遞歸組件

場(chǎng)景:如果開(kāi)發(fā)一個(gè) tree 組件,里面層級(jí)是根據(jù)后臺(tái)數(shù)據(jù)決定的,這個(gè)時(shí)候就需要用到動(dòng)態(tài)組件

 
 
 
  
  
  // 遞歸組件: 組件在它的模板內(nèi)可以遞歸的調(diào)用自己，只要給組件設(shè)置name組件就可以了。  
  
  
  // 設(shè)置那么House在組件模板內(nèi)就可以遞歸使用了,不過(guò)需要注意的是，  
  
  
  // 必須給一個(gè)條件來(lái)限制數(shù)量，否則會(huì)拋出錯(cuò)誤: max stack size exceeded 
  
  
  // 組件遞歸用來(lái)開(kāi)發(fā)一些具體有未知層級(jí)關(guān)系的獨(dú)立組件。比如：  
  
  
  // 聯(lián)級(jí)選擇器和樹(shù)形控件

遞歸組件必須設(shè)置name 和結(jié)束的閥值

8.函數(shù)式組件

定義:無(wú)狀態(tài),無(wú)法實(shí)例化，內(nèi)部沒(méi)有任何生命周期處理方法

規(guī)則:在 2.3.0 之前的版本中，如果一個(gè)函數(shù)式組件想要接收 prop，則 props 選項(xiàng)是必須的。

 
 
 
  
  
  在 2.3.0 或以上的版本中，你可以省略 props 選項(xiàng)，所有組件上的特性都會(huì)被自動(dòng)隱式解析為 prop  
  
  
  在 2.5.0 及以上版本中，如果你使用了單文件組件(就是普通的.vue 文件),可以直接在 template 上聲明functional  
  
  
  組件需要的一切都是通過(guò) context 參數(shù)傳遞

context 屬性有:

1.props：提供所有 prop 的對(duì)象

2.children: VNode 子節(jié)點(diǎn)的數(shù)組

3.slots: 一個(gè)函數(shù)，返回了包含所有插槽的對(duì)象

4.scopedSlots: (2.6.0+) 一個(gè)暴露傳入的作用域插槽的對(duì)象。也以函數(shù)形式暴露普通插槽。

5.data：傳遞給組件的整個(gè)數(shù)據(jù)對(duì)象，作為 createElement 的第二個(gè)參數(shù)傳入組件

6.parent：對(duì)父組件的引用

7.listeners: (2.3.0+) 一個(gè)包含了所有父組件為當(dāng)前組件注冊(cè)的事件監(jiān)聽(tīng)器的對(duì)象。這是 data.on 的一個(gè)別名。

8.injections: (2.3.0+) 如果使用了 inject 選項(xiàng)，則該對(duì)象包含了應(yīng)當(dāng)被注入的屬性

 
 
 
  
  
    
  
  
    {{item}}

9.components和 Vue.component

components:局部注冊(cè)組件

 
 
 
  
  
  export default{  
  
  
    components:{home}  
  
  
  }

Vue.component:全局注冊(cè)組件

 
 
 
  
  
  Vue.component('home',home)

10.Vue.extend

場(chǎng)景:vue 組件中有些需要將一些元素掛載到元素上,這個(gè)時(shí)候 extend 就起到作用了

是構(gòu)造一個(gè)組件的語(yǔ)法器

寫(xiě)法:

 
 
 
  
  
  // 創(chuàng)建構(gòu)造器  
  
  
  var Profile = Vue.extend({  
  
  
    template: '{{extendData}}
實(shí)例傳入的數(shù)據(jù)為:{{propsExtend}}
',//template對(duì)應(yīng)的標(biāo)簽最外層必須只有一個(gè)標(biāo)簽  
  
  
    data: function () {  
  
  
      return {  
  
  
        extendData: '這是extend擴(kuò)展的數(shù)據(jù)',  
  
  
      }  
  
  
    },  
  
  
    props:['propsExtend']  
  
  
  })  
  
  
  // 創(chuàng)建的構(gòu)造器可以?huà)燧d到元素上,也可以通過(guò) components 或 Vue.component()注冊(cè)使用  
  
  
  // 掛載到一個(gè)元素上?？梢酝ㄟ^(guò)propsData傳參.  
  
  
  new Profile({propsData:{propsExtend:'我是實(shí)例傳入的數(shù)據(jù)'}}).$mount('#app-extend')  
  
  
  // 通過(guò) components 或 Vue.component()注冊(cè)  
  
  
  Vue.component('Profile',Profile)

11.mixins

場(chǎng)景:有些組件有些重復(fù)的 js 邏輯,如校驗(yàn)手機(jī)驗(yàn)證碼,解析時(shí)間等,mixins 就可以實(shí)現(xiàn)這種混入

mixins 值是一個(gè)數(shù)組

 
 
 
  
  
  const mixin={  
  
  
      created(){  
  
  
        this.dealTime()  
  
  
      },  
  
  
      methods:{  
  
  
        dealTime(){  
  
  
          console.log('這是mixin的dealTime里面的方法');  
  
  
        }  
  
  
    }  
  
  
  }  
  
  
  export default{  
  
  
    mixins:[mixin]  
  
  
  }

12.extends

extends用法和mixins很相似,只不過(guò)接收的參數(shù)是簡(jiǎn)單的選項(xiàng)對(duì)象或構(gòu)造函數(shù),所以extends只能單次擴(kuò)展一個(gè)組件

 
 
 
  
  
  const extend={  
  
  
      created(){  
  
  
        this.dealTime()  
  
  
      },  
  
  
      methods:{  
  
  
        dealTime(){  
  
  
          console.log('這是mixin的dealTime里面的方法');  
  
  
        }  
  
  
    }  
  
  
  }  
  
  
  export defaul                                                

                                                本文名稱(chēng)：Vue開(kāi)發(fā)必須知道的36個(gè)技巧【近1W字】                                                

                                                文章轉(zhuǎn)載：http://m.fisionsoft.com.cn/article/coeiceg.html

新聞中心

其他資訊