日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線(xiàn)溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(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ě)法: 

 
 
 
    
  
  
  
  1. import titleCom from '@/components/home/titleCom'  
    2. 
  
  
  
  2. import bannerCom from '@/components/home/bannerCom'  
    3. 
  
  
  
  3. import cellCom from '@/components/home/cellCom'  
    4. 
  
  
  
  4. components:{titleCom,bannerCom,cellCom} 
    5.

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

 
 
 
    
  
  
  
  1. const path = require('path')  
    2. 
  
  
  
  2. const files = require.context('@/components/home', false, /\.vue$/)  
    3. 
  
  
  
  3. const modules = {}  
    4. 
  
  
  
  4. files.keys().forEach(key => {  
    5. 
  
  
  
  5.   const name = path.basename(key, '.vue') 
    6. 
  
  
  
  6.   modules[name] = files(key).default || files(key)  
    7. 
  
  
  
  7. })  
    8. 
  
  
  
  8. components:modules 
    9.

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

3.API 方法 

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

2.watch

2.1 常用用法

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

 
 
 
    
  
  
  
  1. created(){  
    2. 
  
  
  
  2.   this.getList()  
    3. 
  
  
  
  3. },  
    4. 
  
  
  
  4. watch: {  
    5. 
  
  
  
  5.   inpVal(){  
    6. 
  
  
  
  6.     this.getList()  
    7. 
  
  
  
  7.   }  
    8. 
  
  
  
  8. } 
    9.

2.2 立即執(zhí)行

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

 
 
 
    
  
  
  
  1. watch: {  
    2. 
  
  
  
  2.   inpVal:{  
    3. 
  
  
  
  3.     handler: 'getList',  
    4. 
  
  
  
  4.       immediate: true  
    5. 
  
  
  
  5.   }  
    6. 
  
  
  
  6. } 
    7.

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

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

 
 
 
    
  
  
  
  1. watch:{  
    2. 
  
  
  
  2.   inpValObj:{  
    3. 
  
  
  
  3.     handler(newVal,oldVal){  
    4. 
  
  
  
  4.       console.log(newVal)  
    5. 
  
  
  
  5.       console.log(oldVal)  
    6. 
  
  
  
  6.     },  
    7. 
  
  
  
  7.     deep:true  
    8. 
  
  
  
  8.   }  
    9. 
  
  
  
  9. } 
    10.

此時(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ū)ο? 

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

3.2 $emit

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

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

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 

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

3.4 attrs和attrs和attrs和listeners

2.4.0 新增

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

1.$attrs

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

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

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

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

 
 
 
    
  
  
  
  1. props: {  
    2. 
  
  
  
  2.   width: {  
    3. 
  
  
  
  3.     type: String,  
    4. 
  
  
  
  4.     default: ''  
    5. 
  
  
  
  5.   }  
    6. 
  
  
  
  6. },  
    7. 
  
  
  
  7. mounted() {  
    8. 
  
  
  
  8.   console.log(this.$attrs) //{title: "這是標(biāo)題", height: "80", imgUrl: "imgUrl"}  
    9. 
  
  
  
  9. }, 
    10.

2.$listeners

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

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

 
 
 
    
  
  
  
  1. // 父組件  
    2. 
  
  
  
  2.   
    3. 
  
  
  
  3. // 子組件  
    4. 
  
  
  
  4. mounted() {  
    5. 
  
  
  
  5.   console.log(this.$listeners) //即可拿到 change 事件  
    6. 
  
  
  
  6. } 
    7.

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

3.inheritAttrs 

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

3.5 provide和inject

2.2.0 新增

描述:

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

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

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

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

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

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

 
 
 
    
  
  
  
  1. //父組件:  
    2. 
  
  
  
  2. provide: {   
    3. 
  
  
  
  3.   foo: '這是 foo'  
    4. 
  
  
  
  4. },  
    5. 
  
  
  
  5. mounted(){  
    6. 
  
  
  
  6.   this.foo='這是新的 foo'  
    7. 
  
  
  
  7. }  
    8. 
  
  
  
  8. // 子或者孫子組件  
    9. 
  
  
  
  9. inject: ['foo'],   
    10. 
  
  
  
  10. mounted() {  
    11. 
  
  
  
  11.   console.log(this.foo) //子組件打印的還是'這是 foo'  
    12. 
  
  
  
  12. } 
    13.

3.6 parent和parent和parent和children

$parent:父實(shí)例

$children:子實(shí)例 

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

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

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

3.7 $refs 

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

3.8 $root 

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

3.9 .sync

在 vue@1.x 的時(shí)候曾作為雙向綁定功能存在，即子組件可以修改父組件中的值;

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

在 vue@2.3.0+ 以上版本又重新引入了這個(gè) .sync 修飾符; 

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

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è); 

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

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

 
 
 
    
  
  
  
  1. // 父組件  
    2. 
  
  
  
  2.    
    3. 
  
  
  
  3.       
    4. 
  
  
  
  4.        任意內(nèi)容  
    5. 
  
  
  
  5.        
    我是匿名插槽 
      
    6. 
  
  
  
  6.       
    7. 
  
  
  
  7.    
    8. 
  
  
  
  8. //子組件  
    9. 
  
  
  
  9. 我是默認(rèn)值 
    10.

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

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

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ù)共享 

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

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)行的封裝 

 
 
 
    
  
  
  
  1. function broadcast(componentName, eventName, params) {  
    2. 
  
  
  
  2.   this.$children.forEach(child => {  
    3. 
  
  
  
  3.     var name = child.$options.componentName;  
    4. 
  
  
  
  4.     if (name === componentName) {  
    5. 
  
  
  
  5.       child.$emit.apply(child, [eventName].concat(params));  
    6. 
  
  
  
  6.     } else {  
    7. 
  
  
  
  7.       broadcast.apply(child, [componentName, eventName].concat(params));  
    8. 
  
  
  
  8.     }  
    9. 
  
  
  
  9.   });  
    10. 
  
  
  
  10. }  
    11. 
  
  
  
  11. export default {  
    12. 
  
  
  
  12.   methods: {  
    13. 
  
  
  
  13.     dispatch(componentName, eventName, params) {  
    14. 
  
  
  
  14.       var parent = this.$parent;  
    15. 
  
  
  
  15.       var name = parent.$options.componentName;  
    16. 
  
  
  
  16.       while (parent && (!name || name !== componentName)) {  
    17. 
  
  
  
  17.         parentparent = parent.$parent; 
    18. 
  
  
  
  18.         if (parent) {  
    19. 
  
  
  
  19.           name = parent.$options.componentName;  
    20. 
  
  
  
  20.         }  
    21. 
  
  
  
  21.       }  
    22. 
  
  
  
  22.       if (parent) {  
    23. 
  
  
  
  23.         parent.$emit.apply(parent, [eventName].concat(params));  
    24. 
  
  
  
  24.       }  
    25. 
  
  
  
  25.     },  
    26. 
  
  
  
  26.     broadcast(componentName, eventName, params) { 
    27. 
  
  
  
  27.       broadcast.call(this, componentName, eventName, params);  
    28. 
  
  
  
  28.     }  
    29. 
  
  
  
  29.   }  
    30. 
  
  
  
  30. } 
    31.

3.13 路由傳參

1.方案一 

 
 
 
    
  
  
  
  1. // 路由定義  
    2. 
  
  
  
  2. {  
    3. 
  
  
  
  3.   path: '/describe/:id',  
    4. 
  
  
  
  4.   name: 'Describe',  
    5. 
  
  
  
  5.   component: Describe  
    6. 
  
  
  
  6. }  
    7. 
  
  
  
  7. // 頁(yè)面?zhèn)鲄?nbsp; 
    8. 
  
  
  
  8. this.$router.push({  
    9. 
  
  
  
  9.   path: `/describe/${id}`, 
    10. 
  
  
  
  10. })  
    11. 
  
  
  
  11. // 頁(yè)面獲取  
    12. 
  
  
  
  12. this.$route.params.id 
    13.

2.方案二 

 
 
 
    
  
  
  
  1. // 路由定義  
    2. 
  
  
  
  2. {  
    3. 
  
  
  
  3.   path: '/describe',  
    4. 
  
  
  
  4.   name: 'Describe',  
    5. 
  
  
  
  5.   omponent: Describe  
    6. 
  
  
  
  6. }  
    7. 
  
  
  
  7. // 頁(yè)面?zhèn)鲄?nbsp; 
    8. 
  
  
  
  8. this.$router.push({  
    9. 
  
  
  
  9.   name: 'Describe',  
    10. 
  
  
  
  10.   params: {  
    11. 
  
  
  
  11.     id: id  
    12. 
  
  
  
  12.   }  
    13. 
  
  
  
  13. })  
    14. 
  
  
  
  14. // 頁(yè)面獲取  
    15. 
  
  
  
  15. this.$route.params.id 
    16.

3.方案三 

 
 
 
    
  
  
  
  1. // 路由定義  
    2. 
  
  
  
  2. {  
    3. 
  
  
  
  3.   path: '/describe',  
    4. 
  
  
  
  4.   name: 'Describe',  
    5. 
  
  
  
  5.   component: Describe  
    6. 
  
  
  
  6. }  
    7. 
  
  
  
  7. // 頁(yè)面?zhèn)鲄?nbsp; 
    8. 
  
  
  
  8. this.$router.push({  
    9. 
  
  
  
  9.   path: '/describe',  
    10. 
  
  
  
  10.     query: {  
    11. 
  
  
  
  11.       id: id  
    12. 
  
  
  
  12.   `}  
    13. 
  
  
  
  13. )  
    14. 
  
  
  
  14. // 頁(yè)面獲取  
    15. 
  
  
  
  15. this.$route.query.id 
    16.

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ì)象; 

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

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

 
 
 
    
  
  
  
  1. // 文件路徑 - /store/store.js  
    2. 
  
  
  
  2. import Vue from 'vue'  
    3. 
  
  
  
  3. export const store = Vue.observable({ count: 0 })  
    4. 
  
  
  
  4. export const mutations = {  
    5. 
  
  
  
  5.   setCount (count) {  
    6. 
  
  
  
  6.     store.count = count  
    7. 
  
  
  
  7.   }  
    8. 
  
  
  
  8. }  
    9. 
  
  
  
  9. //使用  
    10. 
  
  
  
  10.   
    11. 
  
  
  
  11.  
    12.

4.render 函數(shù)

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

 
 
 
    
  
  
  
  1. // 根據(jù) props 生成標(biāo)簽  
    2. 
  
  
  
  2. // 初級(jí)  
    3. 
  
  
  
  3.   
    4. 
  
  
  
  4. // 優(yōu)化版,利用 render 函數(shù)減小了代碼重復(fù)率  
    5. 
  
  
  
  5.   
    6. 
  
  
  
  6.  
    7.

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

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

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

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

5.異步組件

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

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

3種方法 

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

異步組件的渲染本質(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.路由的按需加載 

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

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

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

 
 
 
    
  
  
  
  1.  
    2.

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

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2.     
    3. 
  
  
  
  3.  
    4.

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

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2.   
    3. 
  
  
  
  3.     
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5.  
    6.

7.遞歸組件

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

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

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

8.函數(shù)式組件

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

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

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

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)被注入的屬性 

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2.   {{item}}
  
  •  

    • 9.components和 Vue.component

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

     
 
 
      
  
  
  
    1. export default{  
      2. 
  
  
  
    2.   components:{home}  
      3. 
  
  
  
    3. } 
      4.

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

     
 
 
      
  
  
  
    1. Vue.component('home',home) 
      2.

    10.Vue.extend

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

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

    寫(xiě)法: 

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

    11.mixins

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

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

     
 
 
      
  
  
  
    1. const mixin={  
      2. 
  
  
  
    2.     created(){  
      3. 
  
  
  
    3.       this.dealTime()  
      4. 
  
  
  
    4.     },  
      5. 
  
  
  
    5.     methods:{  
      6. 
  
  
  
    6.       dealTime(){  
      7. 
  
  
  
    7.         console.log('這是mixin的dealTime里面的方法');  
      8. 
  
  
  
    8.       }  
      9. 
  
  
  
    9.   }  
      10. 
  
  
  
    10. }  
      11. 
  
  
  
    11. export default{  
      12. 
  
  
  
    12.   mixins:[mixin]  
      13. 
  
  
  
    13. } 
      14.

    12.extends

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

     
 
 
      
  
  
  
    1. const extend={  
      2. 
  
  
  
    2.     created(){  
      3. 
  
  
  
    3.       this.dealTime()  
      4. 
  
  
  
    4.     },  
      5. 
  
  
  
    5.     methods:{  
      6. 
  
  
  
    6.       dealTime(){  
      7. 
  
  
  
    7.         console.log('這是mixin的dealTime里面的方法');  
      8. 
  
  
  
    8.       }  
      9. 
  
  
  
    9.   }  
      10. 
  
  
  
    10. }  
      11. 
  
  
  
    11. export defaul                                                
      
                                                分享文章：Vue開(kāi)發(fā)必須知道的36個(gè)技巧【近1W字】                                                
      
                                                轉(zhuǎn)載注明：http://m.5511xx.com/article/coeiceg.html