VeeValidate 中文文档-Concepts

本篇总结 Concepts
	
Concepts
	VeeValidate 是 Vue.js 的一个复杂的验证库，它涵盖了很多方面的知识以及用例，因此需要注意一些警告和注意事项。从以下几个方向展开叙述：
		验证 Vue 组件
		自定义注入属性
		与后端验证集成
		打包尺寸控制

Validating Custom Components
	VeeValidate 允许我们像 HTML5 input 元素一样，验证自定义组件。但是自定义组件有一些注意事项，因为它们没有标准，因此验证自定义组件可能会有所不同。本主题介绍了验证自定义组件时需要注意的事项。

	它如何工作
		那么通常 vee-validate 如何验证自定义组件呢？

		充当 input 输入框的自定义组件，通常使用 v-model 来传达它的值，VeeValidate 尝试使用 $watch API 来监听 model，但 $watch 有它的局限性。例如，它不能监听 v-for 迭代器的值，因为它在 Vue 实例上并不存在，它只存在于 v-for 的循环上下文中。

		VeeValidate 回退到监听自定义组件的 value 属性。如果我们的组件自定义了 model constructor 属性，VeeValidate 将检测正确的属性名，并验证监听。

		这里有一个小型演示，验证流行的 Vuetify UI 框架的输入框组件。(https://vuetifyjs.com/en/components/forms#example-vee-validate)

		这涵盖了大多数情况，除了组件不使用 v-model 传递其当前值的情况。我们可以使用下面章节中介绍的 ctor 选项，来进一步提升 VeeValidate 与我们组件的集成，这让我们可以更好地控制组件的验证行为。

	组件构建器选项
		对于 '充当 input 输入框' 的自定义组件，我们可以自定义，验证器与组件交互的方式，从而大大减少 '使组件可验证' 所需的属性数量。

		我们可以通过在组件选项定义中，定义一个 $_veeValidate 字段来使用它：

			export default {
			  	// ...
			  	$_veeValidate: {
			    	// 从定义在组件 data 中的 innerValue 获取当前值
			    	value () {
			  	    	return this.innerValue;
			    	}
			  	},
			  	data: () => ({
			    	innerValue: 'initial'
			    	// ...
			  	})
			}

		除了定义 value getter 外，我们还可以定义以下内容：

			属性 - 类型 - 默认值 - 描述
			name - () => string - undefined - 一个 '返回要在验证器中注册的组件名' 的函数，不能是箭头函数，因为它的上下文只能是组件本身

			value - () => any - undefined - 一个 '返回组件当前值' 的函数，当验证器需要时，用来解析字段值，例如，在不传值的情况下，调用 validate

			rejectsFalse - boolean - false - 当组件根据 required 规则验证时，将 false 定义为无效值

			events - string - input|blur - 触发验证的、以 '管道符' 分隔的事件名列表

			validator - string - new|null - 确定组件如何获取其验证器实例，'new' 意味着它将始终实例化自己的验证器实例，默认情况下，它将实例化一个实例，除非它请求一个 $validator 注入。我们可以使用 Vue 的 Provide/Inject API 来注入父级树的验证器实例。

		这些选项允许我们使用 vee-validate 配置自定义组件的行为

Component Injections
	每个组件都有自己的验证器作用域，可以防止一个组件的字段被另一个组件所访问，我们可能希望能够跨组件共享字段, 以传达错误或显示 UI 状态。

	注入父级验证器
		在这种情况下，我们可以依赖 Vue 的 Provide/Inject API，下面是它如何工作的：

			export default {
				inject: ['$validator'],
				// ...
			};

			// 或使用对象语法
			export default {
				inject: {
					$validator: '$validator'
				},
				// ...
			};

		这将使组件继承它的父级验证器作用域，从而共享所有错误和验证状态。这意味着它也可以访问相同的 errors 和 fields 计算属性。

		提示：
			如果直接父级不能提供一个验证器作用域，API 将向上遍历树，直到找到一个父级验证器作用器。

	禁用自动注入
		我们也可能希望停止所有的自动注入，来减少插件的内存占用。

			import Vue from 'vue';
			import VeeValidate from 'vee-validate';

			Vue.use(VeeValidate, { inject: false });

		这将使插件停止为每个组件实例，实例化一个新的验证器作用域，除了根实例。但是我们需要管理，在需要时，组件如何获取它的验证器实例。因此，它可以从父级中注入，也可以请求隔离的验证器作用域。

		提示：
			无论自动注入状态如何，使用 Inject API 注入父级验证器作用一样。组件将始终从 '可以提供它的第一个父级' 获取其验证程序实例。

		请求一个新的验证器作用域
			通过在组件的 VeeValidate Constructor 选项上，设置一个 validator 属性：

				export default {
					// ...
					$_veeValidate: {
						validator: 'new'	// 给我，我自己的验证器作用域
					}
					// ...
				}

			通常，组件出于各种原因，需要一个新的验证器作用域；常见的例子是，它是一个 vue-router 路由组件或一个 nuxt 页面组件。请求你一个新的验证器作用域，将使组件成为，它的子级组件的验证器实例的唯一提供者。

			警告：
				对于像 Nuxt 这样的 SSR 框架，建议禁用自动注入，因为它可能导致内存泄露，因为每个组件都创建了所有的验证器实例，这是不需要的，并且可能会降低我们站点的速度。

Backend Validation
	出于多种原因，我们可能还需要使用 Laravel/Express 或任何后端，作为我们的验证程序提供者，例如，检查 email 是否唯一，因为它很难在客户端实现，我们可以使用自定义规则和 reasoning 功能来实现这一点：

		import axios from 'axios'; // 非常棒的 ajax 库
		import { Validator } from 'vee-validate';

		const isUnique = (value) => {
			return axios.post('/api/validate/email', { email: value }).then((response) => {
				// 注意，我们返回一个包含了 valid 和 data 属性的对象
				return {
					valid: response.data.valid,
					data: {
						message: response.data.message
					}
				};
			});
		};

		// 消息的 getter 也可以接受第三个参数，包含了我们之前返回的数据。
		Validator.extend('unique', {
			validate: isUnique,
			getMessage: (field, params, data) => {
				return data.message;
			}
		});

		下面的演示展示了在实际中它是如何工作的，注意，只要当用户输入有效的 email 时它才会触发，因为验证器会在第一次失败时提前退出。

			异步后端验证示例(https://baianat.github.io/vee-validate/examples/async-backend-validation.html)

		由于此示例中没有真实的 DB，使用动态数组模拟。

Bundle Size
	Vee-Validate 做了许多繁重的工作，并提供了大量的功能，从而导致了较大的打包尺寸，在生产环境中，vee-validate 经 gzip 压缩后，占用大约 30kb 空间，且所有功能都是完整的。(就是完整版，gzip 压缩后 30kb)

	实现自定义解决方案或使用更轻量级的库，来实现相同的功能也将增加您的打包尺寸。记住，vee-validate 不仅验证，而且还生成错误消息，并提供了我们需要的大部分验证规则。

	打包最小化
		有一个剥离了所有的验证规则和消息的打包, 这个打包的大小大约是完整打包的一半。gzip 压缩后，大约 15kb 的大小, 但是我们需要从提供的 rules 打包以及这些 rules 对应的 messages 本地化语言包中挑选所需的规则，下面是一个小例子：

			import Vue from 'vue';
			import { Validator, install as VeeValidate } from 'vee-validate/dist/vee-validate.minimal.esm.js';
			import { required, min, max } from 'vee-validate/dist/rules.esm.js';
			import veeEn from 'vee-validate/dist/locale/en';

			// 添加我们需要的规则
			Validator.extend('required', required);
			Validator.extend('min', min);
			Validator.extend('max', max);

			// 合并消息
			Validator.localize('en', veeEn);

			// 安装插件
			Vue.use(VeeValidate);

		提示：
			rules 在内部作为一个单例对象来维护，这意味着在代码的任何位置，添加到验证器的任何规则，对于整个应用中的所有其他验证器实例都是可用的。不过，为了避免副作用，建议在应用的入口文件中添加规则。

	模块化方法
		在未来，vee-validate 将采用更加模块化的方法，同时仍保持相同的功能，它将为更小的打包尺寸提供一个模块化 API。例如，vee-validate 处理：模型验证，HTML5 验证和组件验证。我们可能只对基于模型的验证感兴趣，其想法是提供类似于 passport 的验证策略等功能。因此，我们只需要选择应用中需要的策略即可。

		但是我们仍然没有确实开发时间，但是很可能会在下个主版本引入。