vue mixins混合配置

我就是我 2021-07-24 18:52 588阅读 0赞

一个混入对象可以包含任意组件选项,当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项
    
    1、使用
    	Vue.extend()中也使用同样的策略进行合并。
    	(1)定义mimins对象:
    		可以定义多个,一起混入
    		var mixins={
    			data(){
    				return{
    					...
    				}
    			},
    			...
    			和组件中的配置项相同
    		}
    		组件中:
    		mixins:[混入对象1,混入对象2,...]
    	
    	(2)混入data数据:
    		数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。
    	
    	(3)混入生命周期钩子:
    		同名钩子函数将合并为一个数组,因此都将被调用。
    		混入对象的钩子将在组件自身钩子之前调用。
    		var mixin = {
    		 created: function () {
    		    console.log('混入对象的钩子被调用')
    		  }
    		}
    		
    		new Vue({
    		  mixins: [mixin],
    		  created: function () {
    		    console.log('组件钩子被调用')
    		  }
    		})
    		
    	 (4)混入methods、components和directives
    	 	两个对象键名冲突时,取组件对象的键值对。
     
    2、全局混入
    	一旦使用全局混入,它将影响每一个之后创建的Vue实例(包括第三方组件),建议应用于自定义选项
    	Vue.mixin({
    	  created: function () {
    	    var myOption = this.$options.myOption	获取自定义选项
    	    if (myOption) {
    	      console.log(myOption)
    	    }
    	  }
    	})
     	new Vue({
    	  myOption: 'hello!'	创建后将会打印=> "hello!"
    	})
    
    3、自定义混入规则
    	会对所有Vue实例的属性生效,所以建议只读自定义的属性配置
    	合并策略选项分别接收在父实例和子实例上定义的该选项的值作为第一个和第二个参数,Vue实例上下文被作为第三个参数传入。
    	
    	Vue.config.optionMergeStrategies.属性名=function(toVal,fromVal,vm){
    		
    		return 结果;		结果会覆盖指定的属性内容
    	}
    	如:
    		const app = Vue.createApp({
    		  custom: 'hello!'
    		})
    		
    		app.config.optionMergeStrategies.custom = (toVal, fromVal) => {
    		  console.log(fromVal, toVal)
    		  // => "goodbye!", undefined
    		  // => "hello", "goodbye!"
    		  return fromVal || toVal
    		}
    		
    		app.mixin({
    		  custom: 'goodbye!',
    		  created() {
    		    console.log(this.$options.custom) // => "hello!"
    		  }
    		})
    
    		Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {
    		  return child + 1
    		}
    		
    		const Profile = Vue.extend({
    		  _my_option: 1
    		})
    		
    	    =>Profile.options._my_option 输出2

代码示例:

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script src='js/vue.js'></script>
    	</head>
    	<body>
    		<div id='app'> 
    			hello
    			{ { msg}}
    			{ { age}}
    			<test/>
    		</div>
    		<script>
    			//封装生命函数到对象中
    			let options={ 
    				created:function(){ 
    					console.log('vue生命周期created');
    					console.log(this)
    				},
    				beforeMount(){ 
    					console.log("生命周期beforeMount");
    				},
    				mounted(){ 
    					console.log('生命周期mounted');
    				},
    				data:{ 
    					age:17,
    					msg:'world'
    				}
    			}
    			let options2={ 
    				created:function(){ 
    					console.log('vue生命周期created');
    					console.log(this)
    				},
    				beforeMount(){ 
    					console.log("生命周期beforeMount");
    				},
    				mounted(){ 
    					console.log('生命周期mounted');
    				},
    				data:function(){ 
    					
    					return { age:17,msg:'world'}
    				}
    			}
    			
    			Vue.component('test',{ 
    				template:'<div>{ {msg}}</div>',
    				mixins:[options2]
    			})
    
    			let app=new Vue({ 
    				el:'#app',
    				data:{ 
    					msg:'hello'
    				},
    				mixins:[options]
    			})
    		</script>
    	</body>
    </html>