前言
在vue原理学习系列(一)：响应性中我们介绍了响应性的原理以及简单实现，本期为大家vue中插件的作用原理和编写一个简单的插件。
中文翻译的视频地址：尤雨溪教你写vue
vue原理学习系列往期文章：
- 系列（一）：响应性
⚡「内容速览」⚡
- 插件Plugin的作用
- Vue.use做了什么？
- minix
- 实现一个简单的plugin
插件Plugin的作用
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制，一般有下面5种：
- 添加全局方法或者 property，如：vue-custom-element
- 添加全局资源：指令/过滤器/过渡等，如 vue-touch
- 通过全局混入来添加一些组件选项，如 vue-router
- 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现
- 一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如 vue-router
一般情况下，我们通过全局方法Vue.use()来使用插件，Vue.use需要在new Vue({})之前进行调用，那么Vue.use这个方法究竟做了什么呢？
Vue.use做了什么？
// Vue.use方法
Vue.use(MyPlugin, { someOption: true })
首先我们可以看到Vue.use可以接受两个参数，一个是插件，另一个是选项对象，其中关键点在于MyPlugin中。
MyPlugin作为Vue的插件，Vuejs要求它应该暴露一个install的方法，也就是说当我们Vue.use(MyPlugin)，vue会调用MyPlugin.install(Vue)方法。
install方法接受两个参数，第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。
在install方法中，我们可以实现上面所说的插件功能：
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或property
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}
minix
如果有不知道minix的同学可以看vue上关于minix的知识：混入 - Vue.js
mixin本质上是可重复使用的代码片段，通过混合到Vue组件中，来分发 Vue 组件中的可复用功能。
Vue的插件通常是结合Vue.mixin(options)来实现相应的功能的，但在使用的时候需要注意是Vue.mixin会应用到所有实例当中。
// 简单的mixin例子
var mixin = {
data: function() {
return {
name: 'mixin'
}
}
created: function() {
console.log('hello, mixin')
},
methods: {
say: function () {
console.log('say mixin')
}
}
}
实现一个简单的plugin
通过上面的了解，实际上编写vue插件非常简单，我们只需要在对象中实现install方法，在该方法中通过对Vue添加方法或混入，实现相应的功能。
接下来我们实现一个插件，使得Vue组件可接收一个自定义属性"rules"，该选项设置验证规则用于验证组件的data数据。
const RulesPlugin = {
// 暴露install方法
install(Vue) {
// 全局注入
Vue.mixin({
created() {
// 如果组件中有rules配置项
if(this.$options.hasOwnProperty('rules')) {
const rules = this.$options.rules;
Object.keys(rules).forEach(key => {
const rule = rules[key];
// rules的key设置了我们在data中需要监听的数据，通过watch监听值的变化
this.$watch(key, newValue => {
const result = rule.validate(newValue);
if(!result) {
console.log(rule.message);
}
})
})
}
}
})
}
}
Vue.use(RulesPlugin)
// 测试代码
const vm = new Vue({
data: { foo: 10 },
rules: {
foo: {
validate: value => value > 1,
message: "foo的值必须大于1"
}
}
})
vm.foo = 0 // "foo的值必须大于1"
自己前端博客：前端学习笔记
