vue3.0学会Vueデータ応答式原理Proxy

 
  
  
  
  
  
  
 
 
	  

		

		
	  
	  
		//       ,        
		let oParagraph = document.querySelector('#paragraph'),
			oInput = document.querySelector('#input');
		//         
		const data = {
			message:'hello world'
		};
		const handdle = {
			//  data  text    
			get: function (target, key, receiver) {

				console.log(`getting ${key}!`);
				//return Reflect.get(target, key, receiver);
			},
			set: function (target, key, value, receiver) {
				if(key == 'message'){
					//   
					oInput.value = value;
					oParagraph.innerHTML = value;
					return true;
				}else{
					return false;
				}
				
				console.log(key)
				//    
				
				console.log(`setting ${key}!`);
				return Reflect.set(target, key, value, receiver);
			}
			
		}
		console.log(handdle)
		//   proxy  
		const myText = new Proxy(data,handdle);
		//  input    
		oInput.addEventListener('input',function(e){
			//  myText  
			myText.message = e.target.value
		},false)
		
		//    
		myText.message = data.message;
		//      Proxy  myText  
		//    myText 


		//console.log(app);