一起养成写作习惯！这是我参与「掘金日新计划 · 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 方便之处就是大家可以一些公共方法和一些公共的数据都放在一起，会减少大量的工作量
