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

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

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案
不可錯過的vue開發(fā)技巧

【稿件】

創(chuàng)新互聯(lián)公司網站建設提供從項目策劃、軟件開發(fā)，軟件安全維護、網站優(yōu)化(SEO)、網站分析、效果評估等整套的建站服務，主營業(yè)務為成都網站設計、成都網站建設、外貿網站建設，app開發(fā)定制以傳統(tǒng)方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。創(chuàng)新互聯(lián)公司深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

前言

本文主要介紹日常項目開發(fā)過程中的一些技巧，幫助大家規(guī)避錯誤的同時還能提高應用的性能。以下是我總結的一些平時工作中的經驗。

在v-if/v-if-else/v-else中使用key

如果一組v-if 與v-else的元素類型相同，最好使用屬性key。這是因為Vue2.0引入虛擬DOM,為了避免不必要的DOM操作，虛擬DOM在虛擬節(jié)點映射到視圖過程中，將虛擬節(jié)點與上一次渲染視圖所使用的舊虛擬節(jié)點做對比，找出真正需要更新的節(jié)點來進行DOM操作。但有時如果兩個本不相同的節(jié)點被識別為相同，便會出現(xiàn)意料之外的問題。我們看下面的一個例子：

 
 
 
 
    
  
  
  
  
  1. // 這種寫法會出bug 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.    
    4. 
  
  
  
  
  4.    
    5.
 
  •  
  •    
  •    
  •  
  • 切換  

    • 如果添加了屬性key,那么在對比虛擬DOM時，則會認為它們是兩個不同的節(jié)點，于是會將舊元素移除并在相同位置添加新元素，從而避免漏洞的出現(xiàn)。

     
 
 
 
      
  
  
  
  
    1. // 最佳寫法 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.    
      4. 
  
  
  
  
    4.    
      5.
     
  •  
  •    
  •    
  •  
  • 切換 

    • v-for循環(huán)中不要使用index作為key

    我們會給列表渲染設置屬性key,這個key屬性主要用在虛擬DOM算法上，在對比新舊虛擬節(jié)點時辨識虛擬節(jié)點。但如果key用得不合理，就會出現(xiàn)bug,比如我們使用index作為key(見下面例子)，核心代碼如下： 

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.   //使用index作為key 
      3. 
  
  
  
  
    3.      handleDelete(key)">刪除 
      4. 
  
  
  
  
    4.    
      5. 
  
  
  
  
    5.   添加 
      6.
     
  • ...... 
  •   handleAdd() { 
  •     this.list.push(key++); 
  •   }, 
  •   handleDelete(key) { 
  •     const index = this.list.findIndex(k => k === key); 
  •     this.list.splice(index, 1); 
  •   } 

    • 上例中，我們想刪除第二個輸入框，卻誤刪了第三個輸入框，這因為當使用splice()方法刪除數(shù)組的某個元素時數(shù)組的index會被重新索引，造成數(shù)組的最后一個index丟失，從而會使虛擬DOM的最后一個結點（key）丟失，造成無論刪除哪個結點都會誤刪除最后一個結點的bug。但如果我們使用傳入的key作為key,就可以避免這種問題出現(xiàn)。

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.    
      3. 
  
  
  
  
    3.      handleDelete(key)">刪除 
      4. 
  
  
  
  
    4.    
      5. 
  
  
  
  
    5.   添加 
      6.
     

    簡單暴力的router key

    我們在項目開發(fā)時，可能會遇到這樣問題:當頁面切換到同一個路由但不同參數(shù)地址時，比如/detail/1，跳轉到/detail/2，頁面跳轉后數(shù)據(jù)竟然沒更新？路由配置如下： 

     
 
 
 
      
  
  
  
  
    1. { 
      2. 
  
  
  
  
    2.     path: "/detail/:id", 
      3. 
  
  
  
  
    3.     name:"detail", 
      4. 
  
  
  
  
    4.     component: Detail 
      5. 
  
  
  
  
    5. } 
      6.

    這是因為vue-router會識別出兩個路由使用的是同一個組件從而進行復用，并不會重新創(chuàng)建組件，而且組件的生命周期鉤子自然也不會被觸發(fā)，導致跳轉后數(shù)據(jù)沒有更新。那我們如何解決這個問題呢？ 我們可以為router-view組件添加屬性key,例子如下： 

     
 
 
 
      
  
  
  
  
    1.  
      2.

    這種辦法主要是利用虛擬DOM在渲染時候通過key來對比兩個節(jié)點是否相同，如果key不相同，就會判定router-view組件是一個新節(jié)點，從而先銷毀組件，然后再重新創(chuàng)建新組件，這樣組件內的生命周期會重新觸發(fā)。

    路由懶加載

    當打包構建應用時，JavaScript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。 配合webpack支持的路由懶加載方法有：

    • 這種方法比較通用，而且支持性好

     
 
 
 
      
  
  
  
  
    1. resolve => require([./Foo], resolve) 
      2.

    • 這種寫法是官方文檔推薦的，如下：

     
 
 
 
      
  
  
  
  
    1. const Foo = () => import('./Foo') 
      2.

    接下來我們以官方文檔的寫法為例，對比這兩種寫法：

     
 
 
 
      
  
  
  
  
    1. // 非懶加載寫法 
      2. 
  
  
  
  
    2. import Vue from 'vue' 
      3. 
  
  
  
  
    3. import Router from 'vue-router' 
      4. 
  
  
  
  
    4. import Home from 'pages/home' 
      5. 
  
  
  
  
    5. ... 
      6. 
  
  
  
  
    6. ? 
      7. 
  
  
  
  
    7. Vue.use(Router) 
      8. 
  
  
  
  
    8. ? 
      9. 
  
  
  
  
    9. export default new Router({ 
      10. 
  
  
  
  
    10. routes: [ 
      11. 
  
  
  
  
    11.   { 
      12. 
  
  
  
  
    12.       path: '/', 
      13. 
  
  
  
  
    13.       name: 'home', 
      14. 
  
  
  
  
    14.       component: Home 
      15. 
  
  
  
  
    15.   } 
      16. 
  
  
  
  
    16.   ... 
      17. 
  
  
  
  
    17. ] 
      18. 
  
  
  
  
    18. }) 
      19.

    推薦以下寫法，路由懶加載可以幫我們在進入首屏時不用加載過多的資源，從而減少首屏加載速度。

     
 
 
 
      
  
  
  
  
    1. // 路由懶加載寫法 
      2. 
  
  
  
  
    2. import Vue from 'vue' 
      3. 
  
  
  
  
    3. import Router from 'vue-router' 
      4. 
  
  
  
  
    4. ? 
      5. 
  
  
  
  
    5. // 其它都不用變，就是這么簡單 
      6. 
  
  
  
  
    6. const Home = () => import('./home') 
      7. 
  
  
  
  
    7. ... 
      8. 
  
  
  
  
    8. ? 
      9. 
  
  
  
  
    9. Vue.use(Router) 
      10. 
  
  
  
  
    10. ? 
      11. 
  
  
  
  
    11. export default new Router({ 
      12. 
  
  
  
  
    12. routes: [ 
      13. 
  
  
  
  
    13.   { 
      14. 
  
  
  
  
    14.       path: '/', 
      15. 
  
  
  
  
    15.       name: 'home', 
      16. 
  
  
  
  
    16.       component: Home 
      17. 
  
  
  
  
    17.   } 
      18. 
  
  
  
  
    18.   ... 
      19. 
  
  
  
  
    19. ] 
      20. 
  
  
  
  
    20. }) 
      21.

    不要在使用v-for的同一元素上使用v-if

    Vue官方文檔強烈建議永遠不要把 v-if 和 v-for 同時用在同一個元素上。一般我們在兩種常見的情況下會傾向于這樣做：

    • 1)為了過濾一個列表中的項目 (比如 v-for="user in users" v-if="user.isActive")。在這種情形下，請將 users 替換為一個計算屬性 (比如 activeUsers)，讓其返回過濾后的列表(見下面例子)。

     
 
 
 
      
  
  
  
  
    1. // 第一種情形 反例 
      2. 
  
  
  
  
      2.  
  
  
  
  
      • 
  
  
  
  
      •   v-for="user in users" 
        • 
  
  
  
  
      •   v-if="user.isActive" 
        • 
  
  
  
  
      •   :key="user.id" 
        • 
  
  
  
  
      • > 
        • 
  
  
  
  
      •   {{ user.name }} 
        • 
  
  
  
  
      •  
  
  
  
  
       
      3.

    當 Vue 處理指令時，v-for 比 v-if 具有更高的優(yōu)先級，所以哪怕我們只渲染出一小部分用戶的元素，也得在每次重渲染的時候遍歷整個列表，不論活躍用戶是否發(fā)生了變化。我們可通過將其更換為在如下的一個計算屬性上遍歷：

     
 
 
 
      
  
  
  
  
    1. // 好例子 
      2. 
  
  
  
  
    2. computed: { 
      3. 
  
  
  
  
    3. activeUsers: function () { 
      4. 
  
  
  
  
    4.   return this.users.filter(function (user) { 
      5. 
  
  
  
  
    5.     return user.isActive 
      6. 
  
  
  
  
    6.   }) 
      7. 
  
  
  
  
    7. } 
      8. 
  
  
  
  
    8. } 
      9. 
 
 
 
 
     
 
 
 
      
  
  
  
  
      1.  
  
  
  
  
      • 
  
  
  
  
      •   v-for="user in activeUsers" 
        • 
  
  
  
  
      •   :key="user.id" 
        • 
  
  
  
  
      • > 
        • 
  
  
  
  
      •   {{ user.name }} 
        • 
  
  
  
  
      •  
  
  
  
  
       
      2.

    • 2)為了避免渲染本應該被隱藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。這種情形下，請將 v-if 移動至容器元素上 (比如 ul, ol)(見下面例子)。

     
 
 
 
      
  
  
  
  
    1. // 第二種情形 反例 
      2. 
  
  
  
  
      2.  
  
  
  
  
      • 
  
  
  
  
      •   v-for="user in users" 
        • 
  
  
  
  
      •   v-if="shouldShowUsers" 
        • 
  
  
  
  
      •   :key="user.id" 
        • 
  
  
  
  
      • > 
        • 
  
  
  
  
      •   {{ user.name }} 
        • 
  
  
  
  
      •  
  
  
  
  
       
      3.

    更新為：

     
 
 
 
      
  
  
  
  
    1. // 好例子 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3. 
  
  
  
  
    4.   v-for="user in users" 
      5. 
  
  
  
  
    5.   :key="user.id" 
      6. 
  
  
  
  
    6. > 
      7. 
  
  
  
  
    7.   {{ user.name }} 
      8. 
  
  
  
  
    8.  
  
  
  
  
    9.  
      10.

    過濾器讓數(shù)據(jù)處理更便利

    Vue.js 允許你自定義過濾器，它的用法其實是很簡單，但是可能有些朋友沒有用過，接下來我們介紹下：

    1.理解過濾器

    • 功能：對要顯示的數(shù)據(jù)進行特定格式化后再顯示。

    • 注意：過濾器并沒有改變原本的數(shù)據(jù)，需要對展現(xiàn)的數(shù)據(jù)進行包裝。

    • 使用場景：雙花括號插值和 v-bind 表達式 (后者從 2.1.0+ 開始支持)。

    2.定義過濾器

    可以在一個組件的選項中定義本地的過濾器：

     
 
 
 
      
  
  
  
  
    1. filters: { 
      2. 
  
  
  
  
    2. capitalize: function (value) { 
      3. 
  
  
  
  
    3.   if (!value) return '' 
      4. 
  
  
  
  
    4.   value = value.toString() 
      5. 
  
  
  
  
    5.   return value.charAt(0).toUpperCase() + value.slice(1) 
      6. 
  
  
  
  
    6. } 
      7. 
  
  
  
  
    7. } 
      8.

    也可以在創(chuàng)建 Vue 實例之前全局定義過濾器：

     
 
 
 
      
  
  
  
  
    1. Vue.filter('capitalize', function (value) { 
      2. 
  
  
  
  
    2. if (!value) return '' 
      3. 
  
  
  
  
    3. value = value.toString() 
      4. 
  
  
  
  
    4. return value.charAt(0).toUpperCase() + value.slice(1) 
      5. 
  
  
  
  
    5. }) 
      6.

    3.使用過濾器

    使用方法也簡單，即在雙花括號中使用管道符(pipeline) |隔開：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2. {{ myData| filterName}}
       
      3. 
  
  
  
  
    3. {{ myData| filterName(arg)}}
       
      4. 
  
  
  
  
    4.  
      5.
     

    接下來我們看個如何使用過濾器格式化日期的例子： 

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.   
      顯示格式化的日期時間
       
      3. 
  
  
  
  
    3.   
      {{ date }}
       
      4. 
  
  
  
  
    4.   
      {{ date | filterDate }}
       
      5. 
  
  
  
  
    5.   
      年月日: {{ date | filterDate("YYYY-MM-DD") }}
       
      6.
     
  • ...... 
  • filters: { 
  •   filterDate(value, format = "YYYY-MM-DD HH:mm:ss") { 
  •     console.log(this)//undefined 過濾器沒有this指向的 
  •     return moment(value).format(format); 
  •   } 
  • }, 
  • data() { 
  •   return { 
  •     date: new Date() 
  •   }; 
  • } 

    •  

    能用computed的盡量用computed代替 watch

    很多時候頁面會出現(xiàn) watch 的濫用而導致一系列問題的產生，而通常更好的辦法是使用 computed 屬性，先從一張圖區(qū)別它們有什么區(qū)別?

    從上面流程圖中，我們可以看出它們之間的區(qū)別：

    • watch：監(jiān)測的是屬性值， 只要屬性值發(fā)生變化，其都會觸發(fā)執(zhí)行回調函數(shù)來執(zhí)行一系列操作。

    • computed：監(jiān)測的是依賴值，依賴值不變的情況下其會直接讀取緩存進行復用，變化的情況下才會重新計算。

    除此之外，有點很重要的區(qū)別是：計算屬性不能執(zhí)行異步任務，計算屬性必須同步執(zhí)行。也就是說計算屬性不能向服務器請求或者執(zhí)行異步任務。如果遇到異步任務，就交給偵聽屬性。watch也可以檢測computed屬性。總而言之，兩者的區(qū)別歸納為以下兩句話：

    • computed能做的，watch都能做，反之則不行

    • 能用computed的盡量用computed

    為啥提倡使用 computed 代替 watch，這是因為有時候可以實現(xiàn)同樣的效果，而 computed 會更勝一籌，比如在處理多數(shù)據(jù)聯(lián)動的情況下，使用 computed 會更加合理一點。

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

    化繁為簡的Watchers

    如果我們需要在組件初始化以及偵聽屬性變化時調用同一個方法，通常的做法像下面這樣：

     
 
 
 
      
  
  
  
  
    1. watch: { 
      2. 
  
  
  
  
    2. myProperty() { 
      3. 
  
  
  
  
    3.   this.doSomething(); 
      4. 
  
  
  
  
    4. } 
      5. 
  
  
  
  
    5. }, 
      6. 
  
  
  
  
    6. created() { 
      7. 
  
  
  
  
    7. this.doSomething(); 
      8. 
  
  
  
  
    8. }, 
      9. 
  
  
  
  
    9. methods: { 
      10. 
  
  
  
  
    10. doSomething() { 
      11. 
  
  
  
  
    11.     console.log('doing something...'); 
      12. 
  
  
  
  
    12. } 
      13. 
  
  
  
  
    13. } 
      14.

    盡管上面這段代碼看起來沒什么問題，但created鉤子里面執(zhí)行的方法是多余的。我們可以把所需要執(zhí)行的方法放到watch里面，避免在created鉤子里寫重復代碼，那將會在組件實例化的時候觸發(fā)多一次。 那如何優(yōu)化呢？代碼如下：

     
 
 
 
      
  
  
  
  
    1. watch: { 
      2. 
  
  
  
  
    2. myProperty: { 
      3. 
  
  
  
  
    3.   immediate: true,//表示創(chuàng)建組件時立馬執(zhí)行一次 
      4. 
  
  
  
  
    4.   handler() { 
      5. 
  
  
  
  
    5.     console.log('doing something...'); // 只用一次的方法沒必要在methods里面聲明了 
      6. 
  
  
  
  
    6.   } 
      7. 
  
  
  
  
    7. } 
      8. 
  
  
  
  
    8. } 
      9.

    參考文章與書籍

    • 珠峰架構課(強烈推薦)

    • Vue官方文檔

    • Vue.js最佳實踐（五招讓你成為Vue.js大師)

    • 深入淺出vue.js

    • 【譯】VueJS 最佳實踐

    • Vue 項目構建與開發(fā)入門

    • 你或許不知道Vue的這些小技巧

    • Vue 項目里戳中你痛點的問題及解決辦法  

    作者介紹

    浪里行舟，慕課網認證作者，前端愛好者，立志往全棧工程師發(fā)展，從事前端一年多，目前技術棧有vue全家桶、ES6以及l(fā)ess等，樂于分享，最近一年寫了五六十篇原創(chuàng)技術文章，得到諸多好評！

    【原創(chuàng)稿件，合作站點轉載請注明原文作者和出處為.com】


    本文題目：不可錯過的vue開發(fā)技巧
    網頁網址：http://www.5511xx.com/article/coggopj.html