一起养成写作习惯！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

前言

在上一篇的文章中，我们了解了vue高级语法中的Plugin插件，本章节中将会使用前面学到的mixin和plugin来做一个数据校验的插件。

正式开始

在以前大家写项目的时候，如果对于表单校验，除了使用封装好的UI组件之外，还会怎么写呢？是不是会用js对每一个表单项进行判断，如果表单项很长，那么要写的js逻辑也会很多很长。

大家在使用vue开发项目时，肯定也用过ElementUI组件库，那怎么才能封装一个类似于组件库里面的校验插件呢？

<script>
  const app = Vue.createApp({
    data(){
      return {
        name: 'JueJin',
        age: 18
      }
    },
    template: `
      <div>
        <div>
          name: <input v-model="name" />    
        </div>
        <div>
          age: <input v-model="age" />  
        </div>
      </div>
    `
  });

  const vm = app.mount('#root');
</script>

下面我们就分别使用mixin和plugin的方式来封装表单项的校验规则。

使用mixin封装

首先我们需要定义一个规则，用于表单项的校验。可以在根组件data函数中返回这个规则，也可以单独写一个对象用于定义规则。

rules: {
  age: {
    validate: age => age > 18,
    message: '未成年哦~'
  }
},

在根组件中直接定义了一个rules对象，用来定义规则项。
在规则项中，对age属性值进行判断。
判断age>18的时候就通过，如果age<18则提示message中的内容。

此时如果改变age的话，其实是没有任何反应的，那下面我们就要开始写封装的代码了。

获取到rules

app.mixin({
    created(){
      console.log(this.$options.rules)
    }
})

在mixin里面调用created生命周期函数。
在函数中，先通过$options来获取到rules。
$options表示vue实例上的所有东西。

在控制台中会发现rules中的age、validate、message都会打印出来，那么我们获取rules的方法就没啥问题了，可以通过this.$options.rules的方式对rules做一些操作了。

既然rules是一个对象，那么我们就可以通过循环来获取到这个对象中的每一个规则项。

app.mixin({
    created(){
      for(let key in this.$options.rules){
        const item = this.$options.rules[key]
        console.log(item)
      }
    }
})

通过循环已经可以获取到rules中的每一项了，下面我们就可以通过监听的方式来对每一项进行操作。

app.mixin({
    created(){
      for(let key in this.$options.rules){
        const item = this.$options.rules[key]
        this.$watch(key, () => {
          console.log(key + '改变了')
        })
      }
    }
})

$watch是vue实例里面的监听器方法，也是一个全局的，所以可以通过this的方式来调用。
在监听器中，对key进行监听，同时有一个回调函数用来输出监听结果。

Kapture 2022-05-23 at 21.43.46.gif

在浏览器控制中发现当我们改变age的时候，监听器同时也会作出相应的反应。

this.$watch(key, (value) => {
  const result = item.validate(value)
  if(!result){
    console.log(item.message)
  }
})

在监听器的回调函数中接收一个value，表示当有值进行改变时，value就是最新的值了。
将监听到的最新值传递给relus中的validate函数进行判断。
同时将判断结果赋值给result，通过判断result来输出relus中的message。

Kapture 2022-05-23 at 21.52.01.gif

在浏览器控制台中会发现，当我们对表单项中的age进行改变的时候，控制台就会输出对象的判断内容。

🔥 同理：我们也可以对name进行校验

rules: {
     age: {
       validate: age => age > 18,
       message: '未成年哦~'
     },
     name: {
       validate: name => name.length > 6,
       message: '字符不够哦~'
     }
}

我们直接在rules中定义一个name的校验规则项即可。
mixin中的校验方法时通用的，所以无需修改。

Kapture 2022-05-23 at 21.56.50.gif

使用plugin进行封装

const validatePlugin = {
    install(app, options){
      app.mixin({
        created(){
          for(let key in this.$options.rules){
            const item = this.$options.rules[key]
            this.$watch(key, (value) => {
              const result = item.validate(value)
              if(!result){
                console.log(item.message)
              }
            })
          }
        }
      })
    }
}

app.use(validatePlugin)

其实通过plugin封装的时候，只是在外部嵌套了一层plugin的代码而已。
plugin中的内容还是上面mixin中的内容。

❓ 为什么我们还要使用plugin去进行封装呢

主要是因为使用plugin的方式，首先会定义一个常量用来表示当前代码是用来做什么的，方便后期维护。
其次是使用plugin的方式更加方便后期扩展，我们除了在插件里面用来校验表单项之外，还可以扩展更多其他的东西。

总结

本篇文章主要是结合之前学过的mixin和plugin来对表单数据项做一个校验规则的封装。

由于mixin和plugin的特性不一样，所以强烈推荐大家使用plugin的方式去封装mixin。

一起学习，大家加油💪🏻💪🏻

【Vue3从零开始-第五章】5-5 数据校验插件实例

前言

正式开始

使用mixin封装

获取到rules

使用plugin进行封装

总结