vue 开发的技巧

1.require.context()

　　reqire.context() 其实是 webpack 的方法，vue-cli 是基于 webpack 的，而且基本上 vue 项目都是基于 webpack 进行工程化了的，所以是可以用这个 API 方法的；

　　require.context(directory, useSubdirectories, regExp);

　　　　参数：directory：说明需要检索的目录；

　　　　　　 useSubdirectories：是否检索子目录；

　　　　　　 regExp：匹配文件的正则表达式；

　　使用场景：在我们引入同一个文件夹下的大量文件的时候，可以使用；例如：

　　import titleCom from '@/components/home/titleCom'
　　import bannerCom from '@/components/home/bannerCom'
　　import cellCom from '@/components/home/cellCom'
　　components:{titleCom,bannerCom,cellCom}

　　这样文件多的话，是很繁琐的，可以使用：
　　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.watch

　　watch 我们可以进行数据的监听，来实现数据改变之后我们就直接出发监听的方法，其实有一个类似的方式也是可以实现的，比如我们绑定了 v-model 之后，这时候再添加 on-change 事件，这个场景我们一般用在表单元素上，但是并不是只有点击了表单元素才会触发 on-chang 事件，只要 v-model 的值改变了，就会触发 on-change

　　watch 的一般使用场景，例如：表格初始进来需要调查询接口 getList(),然后input 改变会重新查询

　　created(){
 　　 this.getList()
　　},
　　watch: {
  　　inpVal(){
    　　this.getList()
  　　}
　　}
　　这里我们其实也可以利用 watch 的immediate和handler属性简写：
　　watch: {
 　　 inpVal:{
    　　handler: 'getList',
      　　immediate: true
  　　}
　　}
　　inpVal 的值只要改变，就触发 handler 行为，对应的行为名字是 getList；这里 watch 不仅存在 immediate 属性，其实还存在 deep 深度监听的属性

1.require.context()

2.watch

猜你喜欢