vue的extend和mixin和mixins

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

extend 是vue构造一个子类的实例构造器，通俗的讲也可以把这个方法当成一个扩展组件的方法，但是比较特殊的事，用这个方式扩展的组件不再vue的实例内部，而是在外部，需要我们自己把扩展出来的组件，挂在到你想你想的地方去

简单用法

// tep.vue

<template>
  <div>{{text}}</div>
</template>
<script>
export default {
  name: 'hello',
  data () {
    return {
      text: ''
    }
  }
}
</script>

// a.js

import Vue from 'vue';
import HelloTemplate from './tep.vue';

// 使用extend方法创建vue的子类
const HelloConstructor = Vue.extend(HelloTemplate);

// 使用这个方法调用hello组件
function Hello(options) {
  options = options || {};
  if (typeof options === 'string') {
    options = {
      text: options
    }
  }
  
  // 实例化子组件，
  const helloInstence = new HelloConstructor({data: options});
  // 方式一挂在到body伤
    helloInstence.vm = helloInstence.$mount();
  console.log(helloInstence.vm)
  document.body.appendChild(helloInstence.vm.$el);
  // 方式2 用$mount()挂载到对应节点上
  
 helloInstence.$mount("#app")
}
export default Hello;

最后有两种方式挂载到目标节点

拿到组件的dom节点自己追加到body上像我上面的例子
用vue自带的 $mount()方法，把id或者class名以参数的形式传到函数里这两种方式都不能挂载到vue根节点的子节点如果你挂载到子节点会直接替换掉的vue你之前设置的实例

mixin 是全局注册一个混入，一般都是在vue的插件中进行一会混入操作，把插件混入到vue的实例中，方便其他开发者调用 mixin方式需要传入一个对像里面也是有相对应的钩子函数的 beforeCreate，create,等钩子函数 mixin简单的使用方式

vue.mixin({
  beforeCreate: ()=>{},
  create: () =>{}
})

// 实现vue插件的方式

a.install = function(_Vue) {
  Vue = _Vue;
  Vue.mixin({
    //
    beforeCreate: function () { 
     // 写入逻辑你自己的方法和属性
     // 全局实例就可以都用了
    }
})
}

mixin和extend在vue实现全局插件的方式上有所不同，但是结果是一样的，使用方式也不一样。

在实现插件上也可以用extend

还是以tep.vue为例 // a.js

import tep from './tep.vue'
prompt.install = function (Vue) {
    const promptConstructor = Vue.extend(tep)
    // 生成一个该子类的实例
     instance = new promptConstructor();
     // 把组件就直接挂到了body
     document.body.appendChild( instance.$mount().$el)
}
return prompt

调用 // main.js

import vue from 'vue'
improt prompt from './a.js'
// 上面的写的逻辑就生效
vue.use(prompt)

大体思路是这样的

mixins 是混入一个对象

这个对象可以包含vue组件用到所有钩子函数如：crate，beforeCreate,beoforeMount,mounted,beforeUpdata,updata,destory,beforedestory,metdods,data，fifter，等方法，回和你当前混入的组件的options进行一个合并，同一个钩子函数会合并成一个数组依次调用，如果是methods里有相同的见键名当前组件键名会直接覆盖mixins里面的键名 // 简单用法

export default {
  data: function() {
     return {}
  },
  create() {
    console.log("1111")
  },
  methods: {
     a: function() {
        consoe.log(“我会被覆盖”)
     }
  },
}

// 混入mixins

import a from './a.js'
export default {
   mixins: [a],
   create() {
      consoe.log(“2222”)
   },
   methods() {
     a: function() {
         consoe.log(“我要覆盖”)
     }
   }
}

// 组件执行先打印 111 在打印 222 被混入的methods的a方法覆盖之前的方法，data里的数据也是可以公用的，

mixins 方便之处就是大家可以一些公共方法和一些公共的数据都放在一起，会减少大量的工作量