Vue响应式原理一：认识响应式逻辑

1. 核心思想：当数据发生变化时，依赖该数据的代码能够自动重新执行
2. Vue中的应用：在data或ref/reactive中定义的数据，当数据变化时template会自动更新
3. template的本质： 是render()函数, 用变化之后的数据重新执行render()函数, 形成新的VNode, 然后对比新旧的VNode,这就是diff算法的一个事情, 然后决定那个VNode需要做实际的dom更新操作

1. 响应式意味着什么?

1. 基本示例:

   // 响应式原理：初始化一个num值，当num值发生变化时，依赖num的代码会自动重新执行，称之为响应式的
   let num = 100;
   
   console.log(num *  2);
   console.log(num * num);
   
   num = 200
   

2. 本质特征：数据变化 → 依赖代码自动执行

2. 对象响应式

1. 实际开发中更多处理对象响应式

   // 对象的响应式 
   const obj = { 
     name: 'bar', 
     age: 18
   }
    // 当obj.name变化时，只重新执行依赖name的代码
    console.log(obj.name);
    // 当obj.age变化时，只重新执行依赖age的代码
    console.log(obj.age);
   

2. 精准响应：
   • 当obj.name变化时，只重新执行依赖name的代码
   • 当obj.age变化时，只重新执行依赖age的代码
3. 依赖收集：需要自动识别哪些代码依赖了对象的哪些属性

3. 响应式函数设计

1. 函数封装：
   • 将依赖代码封装成函数： function foo(){console.log(obj.name)}
   • 当数据变化时执行对应函数
2. 是否需要响应式：
   • 需要响应式的函数：内部使用了响应式数据
   • 不需要响应式的函数：完全独立于响应式数据
   • Vue类比：类似于template最终转为render函数，数据变化时重新执行render

   •    	// 对象的响应式 
       	const obj = { 
       	  name: 'bar', 
       	  age: 18
       	}
       	
       	//当obj.name和obj.age发生改变的时候，重新执行foo()和bar()
       	// 把所有依赖对象obj的代码封装起来，
       	function  foo () { // 响应式函数
       	  console.log(obj.name);
       	  console.log(obj.age);
       	} 
       	
       	
       	function bar () {  // 响应式函数
       	  console.log(obj.age + 100);
       	}
       	// 修改obj对象
       	obj.name = 'kobe'   
       	```
     

   3. 核心机制：
      • 建立数据与函数的依赖关系
      • 数据变化时触发对应函数执行
   4. 实现要点：
      • 自动收集依赖关系
      • 精准触发更新（只触发真正依赖变化的函数）
   5. Vue原理：
      • 通过Proxy/Object.defineProperty监听数据变化
      • 建立"数据属性-依赖函数"的映射关系
      • 变化时通过映射关系找到并执行对应函数

4. 完整代码如下：

	let num = 100;
	
	console.log(num *  2);
	console.log(num * num);
	
	num = 200
	
	// 响应式原理：初始化一个num值，当num值发生变化时，依赖num的代码会自动重新执行，称之为响应式的
	// Vue响应式原理的本质：
	// 通过data()或者ref、reactive定义的数据，也是通过监听数据的变化，当数据发生变化，让template重新执行渲染，就是响应式
	// template的本质是render()函数, 用变化之后的数据重新执行render()函数, 形成新的VNode, 然后对比新旧的VNode,
	//  这就是diff算法的一个事情, 然后决定那个VNode需要做实际的dom更新操作
	
	
	// 对象的响应式 
	const obj = { 
	  name: 'bar', 
	  age: 18
	}
	
	//当obj.name和obj.age发生改变的时候，重新执行foo()和bar()
	function  foo () {
	  console.log(obj.name);
	  console.log(obj.age);
	} 
	
	
	function bar () {
	  console.log(obj.age + 100);
	}
	
	
	// 修改obj对象
	obj.name = 'kobe'