Vue如何使用混合mixin和插件开发详解

官网:混合(混合)是一种分Vue组发件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。
　　个人:混入就是用来对vue组件中的公共部分,包括数据对象,钩子函数,方法等所有选项,进行提取封装,以达到代码的复用,混合用处挺大的,然我们来看看实际用法。 　　

　　 　　//这是在main.js根文件中使用,在组中使用也是一样 　　从“进口Vue Vue '; 　　var mixin={ 　　数据(){ 　　返回{ 　　名称:“www.vipbic.com”, 　　作者:“羊先生” 　　} 　　}, 　　创建:函数(){ 　　控制台。日志(“网站:”+ this.name) 　　}, 　　方法:{ 　　foo:函数(){ 　　控制台。日志(“+ this.author) 　　}, 　　冲突:函数(){ 　　控制台。日志(从mixin ') 　　} 　　} 　　} 　　 　　新Vue ({ 　　mixin(混合):, 　　呈现:h=比;h(应用程序), 　　创建(){ 　　让选项=options.doNotInit美元 　　控制台。日志(选择:"); 　　this.foo () 　　} 　　})。美元山(“#应用”)//在组建中使用 　　& lt; template> & lt; div> & lt;/div> & lt;/template> 　　& lt; script> 　　var mixin={ 　　数据(){ 　　返回{ 　　名称:“www.vipbic.com”, 　　作者:“羊先生” 　　} 　　}, 　　创建:函数(){ 　　控制台。日志(“网站:”+ this.name) 　　}, 　　方法:{ 　　foo:函数(){ 　　控制台。日志(“+ this.author) 　　} 　　} 　　} 　　出口默认{ 　　mixin(混合):, 　　创建(){ 　　this.foo () 　　} 　　} 　　& lt;/script> 　　 　　

效果如下,都一样,可以看出<代码>混合mixin中创建的代码> 组件创建执行优先级

　　

　　

　　

main.js中直接注册

　　 　　 　　从“进口Vue Vue '; 　　var mixin={ 　　数据(){ 　　返回{ 　　名称:“www.vipbic.com”, 　　作者:“羊先生” 　　} 　　}, 　　创建:函数(){ 　　控制台。日志(“网站:”+ this.name) 　　}, 　　方法:{ 　　foo:函数(){ 　　控制台。日志(“+ this.author) 　　} 　　} 　　} 　　 　　Vue.mixin(混合) 　　新Vue ({ 　　呈现:h=比;h(应用) 　　})。山美元(#应用) 　　 　　

效果如下,我们先不调用,看看控制台是否有打印结果,可以发现我们并未调用,就打印了两次,按照大家常规考虑可能会想到执行一次,是正常的,即初始化一次,但却执行了两次

　　

　　

　　

我在网上看到都是这么做的,都说是从官网上看到的,但是我在官网上并没有看的到,不过的确能解决问题

　　 　　 　　var mixin={ 　　数据(){ 　　返回{ 　　名称:“www.vipbic.com”, 　　作者:“羊先生” 　　} 　　}, 　　创建:函数(){ 　　我们选择=这options.doNotInit美元; 　　console.log(选项)//第一次执行真正第二次为定义 　　如果选择(!){//可以放置一些你的逻辑,比如一开始就要调用的方法 　　控制台。日志(“网站:”+ this.name) 　　} 　　}, 　　方法:{ 　　foo:函数(){ 　　控制台。日志(“+ this.author) 　　}, 　　} 　　} 　　 　　Vue.mixin(混合); 　　新Vue ({ 　　doNotInit:真的,//添加一个状态 　　呈现:h=比;h(应用程序), 　　})。山美元(#应用) 　　 　　

效果如下

　　

　　

　　

刚上面解释了如何解决调用两次的问题

　　 　　//main.js 　　从“进口Vue Vue '; 　　var mixin={ 　　数据(){ 　　返回{ 　　名称:“www.vipbic.com”, 　　作者:“羊先生” 　　} 　　}, 　　创建:函数(){ 　　我们选择=这options.doNotInit美元; 　　如果选择(!){ 　　控制台。日志(“网站:”+ this.name) 　　} 　　}, 　　方法:{ 　　foo:函数(){ 　　控制台。日志(“+ this.author) 　　}, 　　} 　　} 　　 　　Vue.mixin(混合); 　　新Vue ({ 　　doNotInit:没错, 　　呈现:h=比;h(应用程序), 　　})。美元山(“#应用”)//在组件中调用 　　& lt; script> 　　出口默认{ 　　创建(){ 　　this.foo () 　　}, 　　} 　　& lt;/script>

Vue如何使用混合mixin和插件开发详解