Conceptos básicos de VUE (4): realice la unión bidireccional

1. ¿Cómo logra Vue la unión bidireccional?
Use Object.defineProperty para secuestrar el descriptor de acceso del objeto. Cuando el valor de la propiedad cambia, podemos obtener el cambio y luego hacer las respuestas posteriores basadas en el cambio (se realizan operaciones similares a través del objeto proxy en vue3.0).

// 这是将要被劫持的对象 
const data = {
    
     name: '', };

function say(name) {
    
     
	if (name === ' 古 天 乐 ') {
    
     console.log('给⼤家推荐⼀款超好玩的游戏 '); } 
	else if (name === '渣渣辉') {
    
     console.log('戏我演过很多,可游戏我只玩贪玩懒⽉'); } 
	else {
    
     console.log('来做我的兄弟'); } }

// 遍历对象,对其属性值进⾏劫持
 Object.keys(data).forEach(function(key) {
    
     
 	Object.defineProperty(data, key, {
    
     
 		enumerable: true, 
 		configurable: true, 
 		get: function() {
    
     console.log('get'); },
 		set: function(newVal) {
    
     
 		// 当属性值发⽣变化时我们可以进⾏额外操作 
 		console.log(` ⼤ 家 好 , 我 系 ${
      
      newVal}`); 
 		say(newVal); },
 	}); 
 }); 
 data.name = '渣渣辉'; 
 //⼤家好,我系渣渣辉 
 //戏我演过很多,可游戏我只玩贪玩懒⽉