Vue 进阶【2】— plugin（插件编写）

插件的本质

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象 options

MyPlugin.install = function(Vue, options) {
  //....code
}

接下来我们自己来实现一个简单的插件

提示

1. The plugin should install a global mixin （这个插件应该注册一个全局 mixin）
2. The global mixin contains a "created" hook （全局 mixin 包含一个 created 钩子函数）
3. In the hook, check for this.$options.rules (在钩子函数里，检查this.$options.rules)

vue.mixin 方法

• 参数：

  • {Object} mixin

• 用法：

  全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。

• 参考：全局混入

vm.$options 实例属性

• 类型：Object

• 只读

• 详细：

  用于当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处：

  new Vue({
    customOption: 'foo',
    created: function () {
      console.log(this.$options.customOption) // => 'foo'
    }
  })
  

目标

Create a plugin that teaches Vue components to handle a custom "rules" option. The "rules" option expects an object that specifies validation rules for data in the component.

创建一个插件去实现 Vue 组件处理自定义 rules 项。这个 rules 项接收一个对象去进行数据验证

预期效果:

const vm = new Vue({
  data: { foo: 10 },
  rules: {
    foo: {
      validate: value => value > 1,
      message: 'foo must be greater than one'
    }
  }
})

vm.foo = 0 // should log: "foo must be greater than one"

具体实现

//需要先导入 vue
const RulesPlugin = {
    install(Vue) {
      Vue.mixin({
        created() {
          // console.log(this.$options);
          if (this.$options.hasOwnProperty("rules")) {
            let rules = this.$options.rules
            for (let key in rules) {
              const rule = rules[key]
              this.$watch(key, newVal => {
                // console.log("newVal", newVal);
                const res = rule.validate(newVal)
                if (!res) {
                  console.log(rule.message);
                }
              })
            }
          }
        }
      })
    }
  }

使用效果

  //需要先导入 vue
  Vue.use(RulesPlugin)
  const vm = new Vue({
    data: { foo: 2 },
    rules: {
      foo: {
        validate: value => value > 1,
        message: 'foo must be greater than one'
      }
    }
  })
  vm.foo = 0 //===> foo must be greater than one

总结

1. 官方对插件的定义已经很详细了：插件本质上就是一个暴露 install 方法的对象，且 install 方法接收的第一个参数是 Vue，第二个可选参数是 options 选项对象
2. 在 install 方法里可以
   • 添加全局方法 或 prototype

      Vue.myGlobalMethod = function () {
          // 逻辑...
      }
   

   • 添加全局资源

       Vue.directive('my-directive', {
          bind (el, binding, vnode, oldVnode) {
            // 逻辑...
          }
        ...
      })
   

   • 通过 mixin 注入组件选项

      Vue.mixin({
        created: function () {
          // 逻辑...
        }
        ...
      })
   

   • 添加实例方法

    Vue.prototype.$myMethod = function (methodOptions) {
      // 逻辑...
    }
   

3. 通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
  // ...组件选项
})