面试题：Vue修饰符：自定义修饰符的实现

Question

在Vue开发中，有时默认的修饰符不能满足项目需求，需要自定义修饰符。请阐述自定义修饰符的原理，并通过一个实际场景，比如表单输入验证场景，实现一个自定义修饰符，写出完整的实现步骤和代码。

Answer 1

自定义修饰符原理

在Vue中，自定义修饰符的原理基于Vue的指令系统。Vue指令是一种特殊的属性，以 v- 为前缀。修饰符是添加在指令名称后面以点分隔的后缀，用于改变指令的行为。自定义修饰符通过全局注册指令，并在指令的 bind、update 等钩子函数中根据修饰符来执行特定逻辑。

表单输入验证场景实现自定义修饰符

1. 全局注册指令： 在 main.js 中注册一个自定义指令。

// main.js
import Vue from 'vue'
import App from './App.vue'

Vue.directive('validate', {
  bind: function (el, binding) {
    const validators = {
      required: value => value && value.length > 0,
      email: value => /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(value)
    }
    const modifier = Object.keys(binding.modifiers)[0]
    const validator = validators[modifier]
    el.addEventListener('input', function () {
      const isValid = validator(el.value)
      if (isValid) {
        el.style.borderColor = 'green'
      } else {
        el.style.borderColor ='red'
      }
    })
  }
})

new Vue({
  render: h => h(App)
}).$mount('#app')

2. 在模板中使用： 在需要验证的表单输入框上使用该指令及自定义修饰符。

<template>
  <div id="app">
    <input v-validate:required type="text" placeholder="必填">
    <input v-validate:email type="text" placeholder="邮箱">
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

上述代码中，自定义了一个 validate 指令，通过 binding.modifiers 获取修饰符，根据不同修饰符（required 和 email）实现不同的验证逻辑，并在输入框输入时实时验证，通过改变边框颜色提示验证结果。