日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案
總結vue知識體系之實用技巧

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

創(chuàng)新互聯(lián)公司是一家集網站建設,會昌企業(yè)網站建設,會昌品牌網站建設,網站定制,會昌網站建設報價,網絡營銷,網絡優(yōu)化,會昌網站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網站。

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

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

 
 
 
 
    
  
  
  
  
  1.  // Parent.vue 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. // Child.vue 
    5. 
  
  
  
  
  5. mounted() { 
    6. 
  
  
  
  
  6.   this.$emit("mounted"); 
    7. 
  
  
  
  
  7. } 
    8.

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

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3.

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

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

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

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

 
 
 
 
    
  
  
  
  
  1. created() { 
    2. 
  
  
  
  
  2.   this.getList(); 
    3. 
  
  
  
  
  3. }, 
    4. 
  
  
  
  
  4. watch: { 
    5. 
  
  
  
  
  5.   keyWord: 'getList', 
    6. 
  
  
  
  
  6. } 
    7.

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

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

watch 有三個參數：

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

路由參數變化組件不更新

同一path的頁面跳轉時路由參數變化，但是組件沒有對應的更新。

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

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

 
 
 
 
    
  
  
  
  
  1. watch: { 
    2. 
  
  
  
  
  2.  // 方法1 //監(jiān)聽路由是否變化 
    3. 
  
  
  
  
  3.   '$route' (to, from) { 
    4. 
  
  
  
  
  4.    if(to.query.id !== from.query.id){ 
    5. 
  
  
  
  
  5.             this.id = to.query.id; 
    6. 
  
  
  
  
  6.             this.init();//重新加載數據 
    7. 
  
  
  
  
  7.         } 
    8. 
  
  
  
  
  8.   } 
    9. 
  
  
  
  
  9. } 
    10. 
  
  
  
  
  10. //方法 2  設置路徑變化時的處理函數 
    11. 
  
  
  
  
  11. watch: { 
    12. 
  
  
  
  
  12. '$route': { 
    13. 
  
  
  
  
  13.     handler: 'init', 
    14. 
  
  
  
  
  14.     immediate: true 
    15. 
  
  
  
  
  15.   } 
    16. 
  
  
  
  
  16. } 
    17.

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

路由懶加載

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

 
 
 
 
    
  
  
  
  
  1. // 1、Vue異步組件技術： 
    2. 
  
  
  
  
  2.  { 
    3. 
  
  
  
  
  3.     path: '/home', 
    4. 
  
  
  
  
  4.     name: 'Home', 
    5. 
  
  
  
  
  5.     component: resolve => reqire(['path路徑'], resolve) 
    6. 
  
  
  
  
  6.   } 
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8. // 2、es6提案的import() 
    9. 
  
  
  
  
  9.   const Home = () => import('path路徑') 
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11. // 3、webpack提供的require.ensure() 
    12. 
  
  
  
  
  12.   { 
    13. 
  
  
  
  
  13.      path: '/home', 
    14. 
  
  
  
  
  14.      name: 'Home', 
    15. 
  
  
  
  
  15.      component: r => require.ensure([],() =>  r(require('path路徑')), 'demo') 
    16. 
  
  
  
  
  16.     } 
    17.

require.context()

require.context(directory,useSubdirectories,regExp)

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

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

 
 
 
 
    
  
  
  
  
  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: { 
    5. 
  
  
  
  
  5.   titleCom, bannerCom, cellCom 
    6. 
  
  
  
  
  6. } 
    7.

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

 
 
 
 
    
  
  
  
  
  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.

遞歸組件

遞歸組件: 組件在它的模板內可以遞歸的調用自己，只要給組件設置 name 組件就可以了。

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

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

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3.

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

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

 
 
 
 
    
  
  
  
  
  1. methods:{ 
    2. 
  
  
  
  
  2.   resizeFun () { 
    3. 
  
  
  
  
  3.     this.tableHeight = window.innerHeight - document.getElementById('table').offsetTop - 128 
    4. 
  
  
  
  
  4.   }, 
    5. 
  
  
  
  
  5.   setTimer() { 
    6. 
  
  
  
  
  6.     this.timer = setInterval(() => { }) 
    7. 
  
  
  
  
  7.   }, 
    8. 
  
  
  
  
  8.   clearTimer() {//清除定時器 
    9. 
  
  
  
  
  9.         clearInterval(this.timer) 
    10. 
  
  
  
  
  10.     this.timer = null 
    11. 
  
  
  
  
  11.     } 
    12. 
  
  
  
  
  12. }, 
    13. 
  
  
  
  
  13. mounted() { 
    14. 
  
  
  
  
  14.   this.setTimer() 
    15. 
  
  
  
  
  15.   window.addEventListener('resize', this.resizeFun) 
    16. 
  
  
  
  
  16. }, 
    17. 
  
  
  
  
  17. beforeDestroy() { 
    18. 
  
  
  
  
  18.   window.removeEventListener('resize', this.resizeFun) 
    19. 
  
  
  
  
  19.   this.clearTimer() 
    20. 
  
  
  
  
  20. } 
    21.

自定義路徑別名

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

 
 
 
 
    
  
  
  
  
  1. resolve: { 
    2. 
  
  
  
  
  2.     extensions: ['.js', '.vue', '.json'], 
    3. 
  
  
  
  
  3.     alias: { 
    4. 
  
  
  
  
  4.       'vue$': 'vue/dist/vue.esm.js', 
    5. 
  
  
  
  
  5.       '@': resolve('src'), 
    6. 
  
  
  
  
  6.       'assets': resolve('src/assets') 
    7. 
  
  
  
  
  7.     } 
    8. 
  
  
  
  
  8.   } 
    9.

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

 
 
 
 
    
  
  
  
  
  1. // import YourComponent from '/src/assets/YourComponent' 
    2. 
  
  
  
  
  2. import YourComponent from 'assets/YourComponent' 
    3.

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

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

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

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.   .box { 
    4. 
  
  
  
  
  4.     background: red; 
    5. 
  
  
  
  
  5.   } 
    6. 
  
  
  
  
  6.  
    7.

vue 將代碼轉譯成如下，所以我們在js中拼接上的dom結構樣式并不會生效。

 
 
 
 
    
  
  
  
  
  1. .box[data-v-11c6864c]{ background:red; } 
    2. 
  
  
  
  
  2.  
    3.

 

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

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

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

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

 
 
 
 
    
  
  
  
  
  1. export default { 
    2. 
  
  
  
  
  2.   data: () => ({ 
    3. 
  
  
  
  
  3.     list: [] 
    4. 
  
  
  
  
  4.   }), 
    5. 
  
  
  
  
  5.   async created() { 
    6. 
  
  
  
  
  6.     const list = await axios.get('xxxx') 
    7. 
  
  
  
  
  7.     this.list = Object.freeze(list) 
    8. 
  
  
  
  
  8.   }, 
    9. 
  
  
  
  
  9.   methods: { 
    10. 
  
  
  
  
  10.     // 此處做的操作都不能改變list的值 
    11. 
  
  
  
  
  11.   } 
    12. 
  
  
  
  
  12. } 
    13.

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

內容分發(fā)(slot)

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

默認插槽

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

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

具名插槽

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

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

作用域插槽

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

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
  
  
  
  
  3.     >> 
    4. 
  
  
  
  
  4.   
 
  •  
  •  
  •  
  •  
  •  

    • 本文名稱：總結vue知識體系之實用技巧
    分享路徑：http://www.dlmjj.cn/article/dpioees.html