vue項目開發中的小坑不坑的問題

在此記錄項目中遇到的小坑不坑的問題

• 不相連的組件之間方法觸發使用 Vue.$on Vue.$emit ，此處切記使用同一個Vue對象，例如import { eventUpdate } from '@/libs/event.js'
• 數據鏈接， arr1 = arr1.concat(arr2)
• 某些時候數據變化可是頁面未從新渲染的時候，緣由多是由於層級太深，監控不到，能夠使用
  • 使用this.myDeepData = [...this.myDeepData]
  • 使用vm.$forceUpdate()強制更新（暫未找到更好的辦法）
• 善於使用組件的v-model 和 .sync，對應vm.$emit('input', xxx) 和 vm.$emit('update:xxx', xxx)能夠解決不少問題
• chrome + nodejs + multer 實現文件上傳的時候，後端接收的數據是有順序的，記得把文件放在最後。
• Vue 中watch先於created觸發的緣由：添加了immediate屬性
• 運算符精度問題：
  • (num * 100).toFixed(2)（低配版）
  • 使用 mathjs 庫
• destory銷燬的東西：定時器，事件監聽等等
• 例如 echarts等，使用cdn的方式引入使用，能夠極大的減小打包體積。

  externals: {
    // 經過cdn方式引入echarts，減小打包的代碼體積
    echarts: 'echarts'
  }
  複製代碼

• 項目使用lodash的時候，最好二次封裝按需加載，能夠減小打包體積

  import debounce from 'lodash/debounce'
  import throttle from 'lodash/throttle'
  
  而後經過 export 的方式導出爲項目自己的工具類
  複製代碼

• VUX使用過程當中的打包過大問題，從3MB減小到500kb

  // main.js
    // 此處如此引用的意義在於按需加載，vux-loader不會警告提示
    import ConfigPlugin from 'vux/src/plugins/config'
    import TransferDom from 'vux/src/directives/transfer-dom'
    Vue.directive('transfer-dom', TransferDom)
    Vue.use(ConfigPlugin, {
      $layout: 'VIEW_BOX'
    })
    // package.json
    {
        "vue": "^2.6.10",
        "vux": "^2.9.4",
        "vux-loader": "^1.2.9"
    }
    // vue.config.js
    const vuxLoader = require('vux-loader')
    configureWebpack: config => {
        vuxLoader.merge(config, {
          options: {},
          plugins: [{ name: 'vux-ui' }, { name: 'less-theme', path: 'src/view/less/theme.less' }]
        }) 
    }
    // 其它頁面正常使用便可： xxx.vue
    import { XHeader, Tabbar, TabbarItem, ViewBox } from 'vux'
    components: {
        XHeader,
        Tabbar,
        TabbarItem,
        ViewBox
    }
  複製代碼