![]UWOD(KIB9LJS9~S[T{QHM9.png](https://ucc.alicdn.com/pic/developer-ecology/3d8d84e5576449b19340da451c7d135b.png?x-oss-process=image/resize,w_1400/format,webp "]UWOD(KIB9LJS9~S[T{QHM9.png")
前言
在上一篇的文章中，我们了解了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中的内容。
![TJGM2KX]9SQU){7X0TQ5)6H.png](https://ucc.alicdn.com/pic/developer-ecology/0d20b373ed8347e2b394bb3b56038e9a.png?x-oss-process=image/resize,w_1400/format,webp "TJGM2KX]9SQU){7X0TQ5)6H.png")
此时如果改变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进行监听，同时有一个回调函数用来输出监听结果。
在浏览器控制中发现当我们改变age的时候，监听器同时也会作出相应的反应。
this.$watch(key, (value) => { const result = item.validate(value) if(!result){ console.log(item.message) } }) 复制代码
- 在监听器的回调函数中接收一个
value，表示当有值进行改变时，value就是最新的值了。
- 将监听到的最新值传递给
relus中的validate函数进行判断。
- 同时将判断结果赋值给
result，通过判断result来输出relus中的message。
在浏览器控制台中会发现，当我们对表单项中的age进行改变的时候，控制台就会输出对象的判断内容。
🔥 同理：我们也可以对name进行校验
rules: { age: { validate: age => age > 18, message: '未成年哦~' }, name: { validate: name => name.length > 6, message: '字符不够哦~' } } 复制代码
- 我们直接在
rules中定义一个name的校验规则项即可。
- mixin中的校验方法时通用的，所以无需修改。
使用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。
一起学习，大家加油💪🏻💪🏻
