Vue Plugin

1.插件简介

插件本质是一个普通函数，第一个参数是Vue，第二个参数是可选参数叫options

function (Vue, options) {
  //...插件代码
}
1
2
3

插件往往结合vue.mixin(options)使用，mixin本质上是把重复的代码片段混入到Vue组件中，供组件复用逻辑。但是vue.mixin是一个全局api，它会应用到所有实例，所以不要在这个API做疯狂的事情。

使用vue.mixin更好的办法是使用插件包裹，因为插件会自动删除，而且就算多次调用Vue.use应用同一个插件，它会防止重复应用，但是vue.mixin就不行了。另外使用Vue.use会让代码更好理解，可以清楚知道应用使用了哪些插件。

2.$.options属性

很多人可能不太清楚$.options属性，其实每个组件都有$.options属性它表示实例组件的配置项，配置项可以是组件自身的配置也可以是继承过来的配置项或者是vue.mixin混入的。

3.编写一个插件

插件实现的功能：每个组件在created之后，监听检查某些数据是否合规，若不合规打印出不合规提示信息。

src/plugins/check.js

export default {
    install: (Vue, options) => {
        Vue.mixin({
            created() {
                const rules = this.$options.rules;
                if(rules) {
                    Object.keys(rules).forEach((key) => {
                        const rule = rules[key];
                        this.$watch(key, (newValue) => {
                            const valid = rule.validate(newValue);
                            if(!valid) {
                                console.log(rule.message);
                            }
                        })
                    })
                }
            }
        })
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

src/main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import check from './plugins/check';

Vue.config.productionTip = false;
Vue.use(check);

new Vue({
  router,
  store,
  render: function (h) { return h(App) }
}).$mount('#app');
1
2
3
4
5
6
7
8
9
10
11
12
13
14

src/App.vue

<template>
  <div id="app">
    <nav>
      <input type="text" v-model="name">
      <input type="checkbox" value="Sunny" v-model="people">Sunny
      <input type="checkbox" value="Tiffany" v-model="people">Tiffany
      <input type="checkbox" value="Jessica" v-model="people">Jessica
      <h2>你的偶像有：{{ people }}</h2>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script>

export default {
  name: "App",
  data() {
    return {
      name: "fireworks99",
      people: []
    };
  },
  rules: {
    name: {
      validate: value => value.indexOf("99") !== -1,
      message: "Must include 99"
    },
    people: {
      validate: value => value.length < 3,
      message: "Number of idols must be less than 3"
    }
  }
}

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23