Vue 技巧

整理Vue 开发技巧

• 1、页面需要导入多个组件

// 常用写法
import oneCom from '@/components/home/oneCom'
import twoCom from '@/components/home/twoCom'
components:{
  oneCom,
  twoCom
}

// 使用 require.context 加载某文件夹下的所有.vue 组件
/**
require.context(directory,useSubdirectories,regExp) >
directory：说明需要检索的目录
useSubdirectories：是否检索子目录
regExp: 匹配文件的正则表达式,一般是文件名
*/
const path = require('path')
const files = require.context('@/components/home', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
  const name = path.basename(key, '.vue')
  modules[name] = files(key).default || files(key)
})
components:modules

• 2、img 加载失败

// 有些时候后台返回图片地址不一定能打开,所以这个时候应该加一张默认图片

3、Vue监听生命周期函数

export default {
  mounted() {
    this.chart = echarts.init(this.$el)
    // 请求数据，赋值数据 等等一系列操作...
    
    // 监听窗口发生变化，resize组件
    window.addEventListener('resize', this.$_handleResizeChart)
    // 通过hook监听组件销毁钩子函数，并取消监听事件
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.$_handleResizeChart)
    })
  },
  updated() {},
  created() {},
  methods: {
    $_handleResizeChart() {
      // this.chart.resize()
    }
  }
}

4、外部监听生命周期函数