整个过程如下
首先，在跟组件里面定义一个规则（这个规则是自定义属性）rules={},规则里面包含用来校验输入的变量，这里是姓名和年龄，如果不符合规则，就返回定义的错误消息。注意：在vue中，所有定义的属性，都可以用$options获取到。
定义一个全局混入mixin,里面写生命周期函数
mounted(){},（意思是挂载完成之后自动执行），使用mounted函数的属性，就可以在mounted里面遍历定义好的校验规则。同时，在mounted函数里面使用this.watch来监听，当数据发生变化，就把最新的值传到自定义的规则里面去。
在vue中，因为所有的内容都可以写入插件里面去，所有，定义好规则，定义好混入之后，把这些内容都复制放到vue的插件里面去。
在vue中使用这个组件即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 定义一个插件，所有的内容都可以写到插件里面去
const validatePlugin = {
install(app, options) {
// 所有的内容都写到插件的install里面，包括混入mixin也写到插件里面去
// 定义一个全局混入mixin
app.mixin({
// 用生命周期函数mounted，挂载之后自动执行
//
mounted() {
// vue中定义的所有的属性都在$options里面，包括rules
// 用for in 遍历定义好的规则 key意思是规则里面的第几项
for (const key in this.$options.rules) {
// 用item来接收里面的各个规则
const item = this.$options.rules[key];
// 使用$watch来监控数据的变化
// 数据改变会触发校验，如果不符合规则，就返回定义的message
this.$watch(key, (value) => {
// value可以获取最新的值，传到校验规则里面的函数中去
const result = item.validate(value);
// 如果没有通过，（result取反），那么返回消息
if (!result) {
console.log(item.message);
}
});
}
},
});
},
};
// 定义根组件
const app = Vue.createApp({
// 定义一个变量
data() {
return {
name: "zhangsan",
age: 18,
};
},
// 自定义属性，里面包含了校验规则（函数），以及不通过的时候返回的消息
// 这个rules是自定义的属性，vue里面自定义的属性都写到了$options里面去了
rules: {
age: {
// 校验规则是age要大于25.不然就返回“太年轻了”
validate: (age) => {
return age > 25;
},
message: "太年轻了",
},
// 也可以校验name
name: {
// 校验规则是name长度要小于5，不然姓名输入错误
validate: (name) => {
return name.length < 5;
},
message: "姓名格式输入错误",
},
},
// 模板
template: `<div>
用户名: {{name}}, 年龄: {{age}}
</div>`,
});
// 使用定义好的插件
app.use(validatePlugin);
// 把跟组件挂载到div里面
const vm = app.mount("#root");
</script>
</html>
