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

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

1. 响应式意味着什么?

  1. 基本示例:

    javascript 复制代码
    // 响应式原理:初始化一个num值,当num值发生变化时,依赖num的代码会自动重新执行,称之为响应式的
    let num = 100;
    
    console.log(num *  2);
    console.log(num * num);
    
    num = 200
  2. 本质特征:数据变化 → 依赖代码自动执行

2. 对象响应式

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

    javascript 复制代码
    // 对象的响应式 
    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
    js 复制代码
       	// 对象的响应式 
      	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'   
      	```
    1. 核心机制:
      • 建立数据与函数的依赖关系
      • 数据变化时触发对应函数执行
    2. 实现要点:
      • 自动收集依赖关系
      • 精准触发更新(只触发真正依赖变化的函数)
    3. Vue原理:
      • 通过Proxy/Object.defineProperty监听数据变化
      • 建立"数据属性-依赖函数"的映射关系
      • 变化时通过映射关系找到并执行对应函数
相关推荐
eggcode2 分钟前
Vue+Openlayers加载OSM、加载天地图
vue.js·openlayers·webgis
前端世界34 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
Xiaouuuuua1 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser1 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
深耕AI1 小时前
【教程】在ubuntu安装Edge浏览器
前端·edge
倔强青铜三1 小时前
苦练Python第4天:Python变量与数据类型入门
前端·后端·python
倔强青铜三1 小时前
苦练Python第3天:Hello, World! + input()
前端·后端·python
上单带刀不带妹1 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript
倔强青铜三2 小时前
苦练Python第2天:安装 Python 与设置环境
前端·后端·python
ningmengjing_2 小时前
在 PyCharm 中安装并配置 Node.js 的指南
开发语言·javascript·ecmascript