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
    }
  复制代码