学习内容：
1）写一个对数据做校验的插件。
我写一个非常简单的功能，现在我也不用插件，我在我的模板里面，比如说就写一个div， 里面展示一个叫做name这样的数据：
然后我再写一个，前面写一个name，逗号，我再写一个age。
写完了这样的一个代码之后，我们到页面上看一下效果：
我希望是什么？做一些校验， 有一种语法，怎么去写这个语法？比如说我在这写一个rules:
然后我写一个name，或者我直接在这里写一个age，
validate跟一个函数，age return age 大于25， 做一个message，太年轻了，
意思就是什么？我希望写一个规则，这个规则对age数据做一个校验，怎么校验？
如果age大于25的话，我是通过的，如果你小于25的话，我这个age大于25就是false，我觉得你就没有通过，
我就会提示你太年轻了.
too young too simple。
这块我也可以简写一下，直接 age 大于25就行了:
但是我这么写代码 Vue 里面对 rules 肯定是不识别的， 比如我现在给 age 改成 23，你发现它根本就不会有任何的提示。
我打开控制台，因为 Vue 根本就不知道你 rules 这样的语法，但是我们可以去封装一个插件让 Vue 去识别这种语法，怎么去封装？
首先我先不用这种 plugin 插件的形式来封装，我先写一个mixin，在mixin里面我们去定义一个方法叫created，
console log 打印一下，mixin ready 保存。
然后我们到页面上刷一下，ta说你的 app 现在不存在:
你要把 mixin 写在 app 的后面:
ta会打印：
那么 mixin 里面 created 的生命周期函数表示当我的组件初始化都差不多结束的时候 才会运行的一个生命周期函数。
在这里面其实我就可以去结合 rules 对我的一些数据做一些判断，我们怎么去写？
我们这么去写我们this点 $options，
它表示的是整个 Vue 实例上的所有东西：
保存到页面上刷新：
没问题，你会发现 age、message、validate都有，那么这个时候我就可以借助于 rules 来做一些事情了，
既然它是一个对象，我可以for let key in 什么?this.$options.rules，
然后我们打印出 item:
我们可以通过this获取到 app 的实例，我们可以打印一下 console点log一下 this：
刷新大家可以看到 Proxy:
就是 Vue 对象的实例，或者说上面根组件的一个实例。在这里既然能获取到实例，我们可以通过this点watch来对实例上的一些内容做监控，对谁做监控？
现在我就对 key 做监控，然后每一次 key 值发生改变的时候，我都让ta打印一下这个 key：
我遍历到 age 这一块，每一次 age 发生改变的时候，我都去打印出age changed，
改成这样：
然后我们现在改一下：
那么每次age发生改变的时候，我就可以去监听到age的改变，这时候我可以怎么做？我可以这么去做，我们说上面的validate会接收 age:
所以我可以用item点validate :
如果非result也就是校验不成功的话，那么我就console点 log一下，
原文始发于微信公众号（基根奋斗营）：【Vue】数据校验插件开发实例
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/104161.html
