VueHowusemixinsandpluginsdevelopment

官网：Mixins（混入）是在Vue组件中分发可重用功能的一种非常灵活的方式。Mixin对象可以包含任意组件选项。当使用带有组件的混合对象时，所有混合对象的选项都将混合到组件自己的选项中。个人：Mixing用于抽取封装Vue组件的公共部分，包括数据对象、钩子函数、方法等所有选项，实现代码复用。混音还是蛮有用的，下面就来看看实际使用吧。基本用法//这个是在main.js根文件中使用的，在groups中也是用到的importVuefrom'vue';varmixin={data(){return{名称：'www.vipbic.com'，作者：'先生。Sheep'}},created:function(){console.log('Website:'+this.name)},methods:{foo:function(){console.log('Author:'+this.author)},冲突：function(){console.log('frommixin')}}}newVue({mixins:[mixin],render:h=>h(App),created(){letoption=this.$options.doNotInitconsole.log('option:',);this.foo()}}).$mount('#app')//在构建中使用>script>varmixin={data(){return{名称：'www.vipbic.com'，作者：'先生。Sheep'}},created:function(){console.log('Website:'+this.name)},methods:{foo:function(){console.log('Author:'+this.author)}}}exportdefault{mixins:[mixin],created(){this.foo()}}效果如下，都是一样的。可以看出在混合mixin中创建比组件创建的执行优先级更高全局注册main.js直接注册importVuefrom'vue'；varmixin={data(){return{名称：'www.vipbic.com'，作者：'先生。Sheep'}},创建:function(){console.log('Website:'+this.name)},methods:{foo:function(){console.log('Author:'+this.author)}}}Vue.mixin(mixin)newVue({render:h=>h(App)}).$mount('#app')效果如下，先不调用，看看有没有打印结果在控制台，我们可以发现我们并没有调用它，而是打印了两次，按照你的一般考虑，你可能会想到执行一次，这很正常，就是初始化了一次，但是执行了两次.如何解决执行两次的问题？不过在官网上没看到，不过确实解决了问题varmixin={data(){return{name:'www.vipbic.com',author:'Mr.绵羊'}},创建:function(){letoption=this.$options.doNotInit;console.log(option)//第一次执行true，第二次执行undefinedif(!option){//可以放你的一些逻辑，比如方法console.log('Website:'+this.name)}},methods:{foo:function(){console.log('Author:'+this.author)},}}Vue.mixin(mixin);newVue({doNotInit:true,//添加一个staterender:h=>h(App),}).$mount('#app')效果如下如何调用只是上面解释了如何解决调用两次的问题//main.jsimportVuefrom'vue';varmixin={data(){return{name:'www.vipbic.com',author:'Mr.绵羊'}},创建:function(){letoption=this.$options.doNotInit;if(!option){console.log('Website:'+this.name)}},方法：{foo:function(){console.log('作者:'+this.author)},}}Vue.mixin(mixin);newVue({doNotInit:true,render:h=>h(App),}).$mount('#app')//在组件中调用模块注册新建一个单独的mixin.js文件importVuefrom'vue';varmixin={数据（）{return{name:'www.vipbic.com',author:'先生.绵羊'}},创建:function(){letoption=this.$options.doNotInit;if(!option){console.log('Website:'+this.name)}},方法:{foo:function(){console.log('Author:'+this.author)},冲突:function(){console.log('frommixin')}}}exportdefault{install(Vue){Vue.mixin(mixin)}}//通过use在main.js中注册Vue.use(myMixin);newVue({doNotInit:true,render:h=>h(App),}).$mount('#app')//调用在组件中以与main.js注册方式相同的方式开发插件上面提到的使用也讲解了使用相关的知识，在开发中经常看到如Vue.use(VueRouter)。Vue.js需要注意的是插件开发过程中有一个公共方法install。第一个参数是Vue构造函数，第二个参数是一个可选的选项对象。插件通常会向Vue添加全局函数。插件的范围没有限制——一般有以下几种：1.添加全局方法或属性，如：vue-element]2.添加全局资源：instructions/filters/transitions等，比如vue-touch3，通过全局mixin方法添加一些组件选项，比如：vuex4，添加Vue实例方法，通过将它们添加到Vue.prototype中。5.一个库，提供自己的API，提供一个或多个上面提到的功能，比如vue-routerletMyPlugin={}MyPlugin.install=function(Vue,options){//1.添加全局方法或属性Vue.prototype.$myMethod=function(options){//logic...}//2.添加全局资源指令Vue.directive('my-directive',{bind(el,binding,vnode,oldVnode){//Logic...}})//3.注入组件，也就是上面说的mix-in，Vue很灵活，就看你怎么挖了Vue.mixin({created:function(){//逻辑...}})}添加全局方法或属性importVuefrom'vue';//根据install函数，传入Vue的第一个实例，第二个参数为可选选项对象，即参数MyPlugin可以通过.install=function(Vue,options){console.log(options)//打印参数Vue.prototype.myName=options.nameVue.prototype.myAuthor=function(){returnoptions.author}}Vue.使用（MyPlugin，{名称：'www。vipbic.com'//传参author:'Mr.Sheep'});newVue({render:h=>h(App),}).$mount('#app')inCall在组件中。效果如下//通过vue添加全局资源可以在全局添加指令，也可以在组件中添加){console.log(options)el.style["color"]=bingind.value;console.log("1-bind");},inserted:function(){console.log("2-insert");},update:function(){console.log("3-update");},componentUpdated:function(){console.log('4-componentUpdated');},unbind:function(){console.log('5-unbind');}})}//传参Vue.use(MyPlugin,{name:'www.vipbic.com',author:'羊先生'});newVue({render:h=>h(App),}).$mount('#app')在组中使用页面效果分析结果，在分析结果之前，我们先看一下Vue.directiveapi，解释自官网el:指令绑定的元素，可用于直接操作DOMbinding:包含以下属性的对象name:指令的名称，不包括v-prefixvalue:指令的绑定值，例如：上面例子中的值为红色oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用，值是否改变expression：指令表达式的字符串形式arg：传递给指令的参数，可选.modifiers：包含修饰符的对象自定义指令有5个生命周期（也叫钩子函数）：bind、inserted、update、componentUpdate、unbind//也就是上面例子中的bind只调用了一次，指令执行时调用第一次绑定到元素。通过这个钩子，你可以定义一个初始化动作，在绑定时执行一次。inserted：绑定元素插入到父节点时调用（如果父节点存在即可调用，文档中不需要存在）update：绑定和元素所在模板更新时调用，并且无论绑定值是否发生变化，通过比较更新前后的Binding值，忽略不必要的模板更新commandmonth元素未绑定时图片的黄色框，是组件使用v-hello命令后初始化的数据，同时打印接受的参数。点击解除绑定后，在点击开始处加1，会使注入的组件失效。让MyPlugin={}MyPlugin.install=function(Vue,options){Vue.mixin({data(){return{name:options.name}},methods:{getUser(){returnoptions.author}}})}Vue.use(MyPlugin,{name:'www.vipbic.com',author:'Mr.Sheep'})newVue({render:h=>h(App),}).$mount('#app')useexportdefault{data(){returninthecomponent{}},created(){//这里的name和getUser来自于全局注入的console.log(this.name)console.log(this.getUser())}}效果Vue.use会自动阻止多次注册同一个插件，此时插件只会被注册一次。参考我的文章Web前端开发-混合Vue.directive说明