[vue]混入与插件开发

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第 11 天，点击查看活动详情。

混入 -- mixin

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

划重点：

• 分发可复用功能, 抽离出常用的功能
• 混入对象选项可以包含任意组件选项
• 混入对象的选项会与组件本身的选项混合

1、选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

1. 数据对象内部进行递归合并，如果发生冲突时，以组件数据优先
2. 同名的钩子函数会合并为一个数组，都会被调用，混入对象钩子会在组件自身钩子之前调用
3. 总之选项发生冲突时，以组件为准

2、使用demo

// 混入对象
const helloMixin = {
    created() {
        console.log('mixin-created')
        this.sayHello()
    },
    mounted() {
        console.log('mixin-mounted')
    },
    methods: {
        sayHello() {
            console.log('hello mixin')
        }
    }
}

// 在组件中通过mixins选项使用
// mixins: [helloMixin],

• 全局混入 使用全局混入，它将影响每一个之后创建的 Vue 实例 (包括第三方组件), 大多数情况下，只应当应用于自定义选项； 使用Vue.mixin()

插件

插件通常用来为 Vue 添加全局功能。

1、开发插件

• 暴露一个install 方法，第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。
• 通过插件可以添加全局方法或 property；添加全局资源；注入组件选项；添加实例方法

// 官方demo
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) {
    // 逻辑...
  }

2、使用插件

通过全局方法 Vue.use() 使用插件，在new Vue() 启动应用之前完成插件注册。

Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。

// 注册一个heading组件
const MyPlugin = {
    install(Vue, options) {
        Vue.component('heading', {
            // ...
        })
    }
}
if( typeof window !== 'undefined' && window.Vue ){
    window.Vue.use(MyPlugin)
}

<!--引入注册插件后使用-->
<script src="./plugins/heading.js"></script>
<!--使用组件-->
<heading level="1" title="fdsafsd" icon="zhongguoditu">标题</heading>