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'