【金秋打卡】第 4 天 vue基础入门（下）| 1-8 数据校验插件开发实例

学习内容：
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一下，