vue.js - 工程實踐Tips

1. 全局變量

1.1. Vuex，全局單一狀態(tài)樹State 

import {mapState, mapActions, mapGetters} from 'vuex';

computed: {
  ...mapState('transaction', {state: 'transactionLayerSku'}),
  ...mapGetters('cabinet', ['cabinets'])
}

1.2. Vue.config，process.env

Vue.config.productionTip = process.env.NODE_ENV === 'production';

process.env屬性，返回一個包含用戶環(huán)境信息的對象，即當前用戶的系統(tǒng)env
http://nodejs.cn/api/process.html#process_process_env

1.3. Vue-router => url 參數(shù)

  • template跳轉
<router-link :to="{name:'board-users',
                           params: {tid: queryParams.serial_id},
                           query:{customerID: scope.row.user_id}}">
  {{scope.row.user_id}}
</router-link>
  • js跳轉
this.$router.push({
  path: "/start_task",
  query: { taskType: "uncaptured", instructionId: task.id }
});
this.$router.go(-1);
  • js獲取query參數(shù)，以及修改
computed: {
  currentTab: {
    get() {
      const {$route: {query: {currentTab}}} = this;
      if (_.isNil(currentTab)) {
        return 'details';
      }
      return currentTab;
    },
    set(value) {
      const {$route: {query}} = this;
      this.$router.replace({
        query: {...query, currentTab: value}
      });
    }
  }
}

1.4. Vue 外狀態(tài) => 屏幕寬度 => 事件

獲取屏幕寬度
捕獲屏幕寬度變化

1.5. Cookie

import Cookies from 'js-cookie'
Cookies.set('username', 'currentUserName')
Cookies.remove('username')
let menu = JSON.parse(Cookies.get('my_menu'))

使用全局變量，有助于對components進行拆分，推薦使用1.3. URL參數(shù)

2. 如何復用組件邏輯

  • slot
    場景：圖片懶加載組件
    實現(xiàn)加載過程轉菊花，加載失敗顯示失敗提示

  • slot-scope
    場景： 瀑布流組件
    復雜布局場景，且子元素必須高度自定義

  • 過濾器filter
    場景：日期按本地時區(qū)格式化、OSS圖片resize、OSS 圖片轉CDN鏈接、貨幣千分位格式、占位符
    常用過濾器庫：vue2-filters、vue-currency-filter

  • 指令
    場景： 實現(xiàn)圖片放大鏡效果
    修飾符 —— 讓調用語法更甜蜜

  • mixins

    • a. 對象淺合并 (一層屬性深度)，在和組件的數(shù)據(jù)發(fā)生沖突時以組件數(shù)據(jù)優(yōu)先
    • b. 同名鉤子函數(shù)將混合為一個數(shù)組
    • c. 我們還可以自定義合并策略

3. 坑

  • 避免通過prop設置data，可設置computed屬性
  • 不要把methods當computed用
  • 不要修改prop值!!!

4. 規(guī)范

  • 組件內狀態(tài)data，提供默認值
  • 不要在模板中寫太多邏輯代碼，多用 computed 屬性
  • prop 傳遞的鏈條不要太深 - 使用slot解耦
  • 盡量為 props 提供完整配置信息

5. 文檔

官方文檔

組件庫

優(yōu)秀插件

優(yōu)秀demo

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容