vue小技巧

1、将某个 prop 限制在一个类型的列表中

props: {
  inpVal: {
    type: String,
    validator: s => [‘small’, ‘middle’].includes(s)
  }
}

props:{
 inpVal:{
  type:Number, //传入值限定类型
  // type 值可为String,Number,Boolean,Array,Object,Date,Function,Symbol
  // type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认
  required: true, //是否必传
  default:200,  //默认值,对象或数组默认值必须从一个工厂函数获取如 default:()=>[]
  validator:(value) {
    // 这个值必须匹配下列字符串中的一个
    return ["success", "warning", "danger"].indexOf(value) !== -1
  }
 }
}

2、require.context()引入多个组件
常常用来在组件内引入多个组件, require.context(directory, useSubdirectories, regExp)

// 原始写法
import titles from '@/components/home/titles'
import banners from '@/components/home/banners'
import cells from '@/components/home/cells
components: {
  titles, banners, cells
}

以上这样就写了大量重复的代码,利用 require.context 可以写成

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

在main.js中引入大量公共组件,利用 require.context 可以写成

import Vue from 'vue'
// 自定义组件
const requireComponents = require.context('../views/components', true, /\.vue/)
// 打印结果
// 遍历出每个组件的路径
requireComponents.keys().forEach(fileName => {
  // 组件实例
  const reqCom = requireComponents(fileName)
  // 截取路径作为组件名
  const reqComName =reqCom.name|| fileName.replace(/\.\/(.*)\.vue/,'$1')
  // 组件挂载
  Vue.component(reqComName, reqCom.default || reqCom)
})

实际上是 webpack 的方法,vue 工程一般基于 webpack,所以可以使用
require.context(directory,useSubdirectories,regExp)
接收三个参数:
directory：说明需要检索的目录
useSubdirectories：是否检索子目录
regExp: 匹配文件的正则表达式,一般是文件名

3、在父组件里监听子组件的生命周期
比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，常规的写法可能如下

// 父组件里面
<Child @mounted="doSomething"/>
 
// 子组件里面
mounted() {
  this.$emit("mounted");
}

此外，还有一种特别简单的方式，子组件不需要任何处理，只需要在父组件引用的时候通过@hook 来监听即可，@hook也可以监听其它的生命周期事件,代码如下：

<Child @hook:mounted="doSomething" /> 
<Child @hook:updated="doSomething" />

实用：这样的写法可以用于处理加载第三方的初始化过程稍漫长的子组件时，我们可以加loading动画，等到子组件加载完毕，到了mounted生命周期时，把loading动画移除。

<template>
  <child @hook:mounted="removeLoading" />
</template>

初次之外hook还有一个常用的写法，在一个需要轮询更新数据的组件上，我们通常在created里开启定时器，然后在beforeDestroy上清除定时器。而通过hook,开启和销毁定时器的逻辑我们都可以在created里实现：

<script>
  export default {
    created() {
      const timer = setInterval(() => {
        // 更新逻辑
      }, 1000);
      // 通过 $once和hook监听实例自身的beforeDestroy，触发该生命周期时清除定时器
      this.$once("hook:beforeDestroy", () => {
        clearInterval(timer);
      });
    },
  };
</script>

像上面这种写法就保证了逻辑的统一，遵循了单一职责原则。

4、妙用 Vue.config.devtools：
其实我们在生产环境下也可以调用vue-devtools去进行调试，只要更改Vue.config.devtools配置既可，如下所示：

// 务必在加载 Vue 之后，立即同步设置以下内容
// 该配置项在开发版本默认为 `true`，生产版本默认为 `false`
Vue.config.devtools = true;

我们可以通过检测cookie里的用户角色信息去决定是否开启该配置项，从而提高线上 bug 查找的便利性。

5、妙用options是一个记录当前Vue组件的初始化属性选项。通常开发中，我们想把data里的某个值重置为初始化时候的值，可以像下面这么写：

this.value = this.$options.data().value;

这样子就可以在初始值由于需求需要更改时，只在data中更改即可。

这里再举一个场景：一个el-dialog中有一个el-form，我们要求每次打开el-dialog时都要重置el-form里的数据，则可以这么写：

<template>
  <div>
    <el-button @click="visible=!visible">打开弹窗</el-button>
    <el-dialog @open="initForm" title="个人资料" :visible.sync="visible">
      <el-form>
        <el-form-item label="名称">
          <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
 
<script>
 
export default {
  name: "App",
  data(){
    return {
      visible: false,
      form: {
        gender: 'male',
        name: 'wayne'
      }
    }
  },
  methods:{
    initForm(){
      this.form = this.$options.data().form
    }
  }
};
</script>

6、listeners" 传入内部组件——在创建更高层次的组件时非常有用

// 父组件
<home title="这是标题" width="80" height="80" imgUrl="imgUrl"/>
// 子组件
mounted() {
  console.log(this.$attrs) //{title: "这是标题", width: "80", height: "80", imgUrl: "imgUrl"}
},

// 父组件
<home @change="change"/>
// 子组件
mounted() {
  console.log(this.$listeners) //即可拿到 change 事件
}

参考链接：https://blog.csdn.net/qq_41581588/article/details/125749631?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_baidulandingword~default-8-125749631-blog-149256027.235^v43pc_blog_bottom_relevance_base9&spm=1001.2101.3001.4242.5&utm_relevant_index=11