Vue源码学习笔记（2）

编写一个简单插件

Vue中有一个强大的功能就是提供插件的使用:

Vue.use(Plugin)

通过简单的use命令就可以调用各种各样的插件，极大方便了我们的日常开发。那么如何编写一个插件呢？

插件（Plugin）本质上就是一个函数，它接受一个参数是Vue构造器，另一个参数是可选的选项对象options。

另一个需要了解的技术是Vue.mixin:

Vue.mixin(options)

mixins本质上是一段可重复利用的代码段，Vue.mixin(options)是一个全局的api，所以它可以应用到所有实例之中。注意！因为它可以混入到所有实例中，所以我们在使用它的时候要格外的小心。

如果你想使用一些全局上的功能，可能会用到mixin，但是如果你需要反复调用mixin，最好的办法是将其用插件接口包装，这样插件会防止被反复应用。

最后一个知识点是$options:

$options

$options是一个对象，他会收集包括

1.全局mixins

2.组件自定义的mixin

3.你传递给他的选项（options）

4.你添加到组件的任何自定义项

利用上面说到的知识，就可以编写一个简单的插件了：

const RulesPlugin = {
    //加载vue插件，稍后使用Vue.use注册它
  install (Vue) {
      //全局混入，注意，它将影响之后创建的每一个vue实例！
    Vue.mixin({
        //在created生命周期钩子处注册函数
      created () {
          //在data外定义的属性和方法可以用$options调用
        if (this.$options.hasOwnProperty('rules')) {
          const rules = this.$options.rules
          Object.keys(rules).forEach(key => {
            const rule = rules[key]
              //监听rules对象中的每一个属性变化
            this.$watch(key, newValue => {
              const result = rule.validate(newValue)
              if (!result) {
                console.log(rule.message)
              }
            })
          })
        }
      }
    })
  }
}

Vue.use(RulesPlugin)

这个插件的作用是监听一个Vue实例中data的属性值，当其中的属性值发生改变的时候，就会检查对应的规则，并进行校验。

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

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

 参考视频：尤雨溪教你写vue 高级vue教程 源码分析 中文字幕翻译完毕_哔哩哔哩_bilibili

参考github：https://github.com/zhengguorong/vue-advanced-workshop