当前位置: 首页 > news >正文

Vue响应式原理四:响应式-监听属性变化

存在的问题

  1. 每次属性修改后需要手动调用dep.notify()
  2. 容易遗漏导致依赖不更新
  3. 多个属性变更时需要多次调用

解决方案:需要实现属性变化的自动监听机制

一 . 响应式监听属性变化

    1. 方案一:Object.defineProperty -> Vue2
    • 1.1. 实现原理:通过Object.defineProperty()劫持对象属性的set操作

    • 1.2. 关键步骤:

      • 1.2.1. 使用Object.keys()遍历对象所有key
      • 1.2.2. 对每个key执行defineProperty
      • 1.2.3. 在setter中保存新值并通知依赖
    • 1.3. 注意事项:不能直接在setter中设置obj[key]=newValue,会导致无限递归

    • 1.4. 示例代码如下:

    •   	Object.keys(obj).forEach(key => {// 这个是一个闭包let value = obj[key];Object.defineProperty(obj, key, {set: function(newValue) {// 不可以这么做,会形成递归(如果把newValue设置给key,相当于又给这个key设置值了,又会调用set, 然后又设置值,又调用set会形成递归调用)// obj[key] = newValue; value = newValue;// 属性发生变化时自动执行对应的响应式函数dep.notify()},get: function() {return value;}})})
      
    • 1.5. 自动通知机制:

      • 属性修改触发setter
        •   // 修改obj的属性console.log('name发生变化时----------------------------------------');obj.name = 'kobe'```
          
      • setter调用dep.notify()
        •   // 关键代码:set: function(newValue) {// 不可以这么做,会形成递归(如果把newValue设置给key,相当于又给这个key设置值了,又会调用set, 然后又设置值,又调用set)// obj[key] = newValue; value = newValue;// 属性发生变化时自动执行对应的响应式函数dep.notify()} ```
          
    • 1.6. 执行效果:修改obj.name或obj.age时,所有依赖函数自动执行并输出最新值,

      • 在这里插入图片描述
        在这里插入图片描述

      • 在这里插入图片描述

    • 1.7. 代码结构:

      • 外层定义Depend类管理依赖
      • 中间使用defineProperty设置监听属性变化
      • 底层通过watchFn收集依赖
    1. 方案二:new Proxy() -> Vue3 (暂时不写,后面在写)
http://www.lryc.cn/news/583021.html

相关文章:

  • 正点原子学习 用户权限管理
  • 【python基础】运算符与布尔值全解析
  • 智慧航天运载体系全生命周期监测 | 图扑数字孪生
  • Shader面试题100道之(41-60)
  • 从0实现线性回归模型
  • vue3.2 前端动态分页算法
  • 「Java案例」打印数字金字塔
  • [Backlog] 核心协调器 | 终端用户界面(TUI)实现 | 多分支任务冲突解决 | 测试验证体系
  • 技术支持丨解决 ServBay 在 Windows 启动时反复提示安装 .NET 的问题
  • Python(30)基于itertools生成器的量子计算模拟技术深度解析
  • 使用LLaMA-Factory微调Qwen2.5-VL-3B 的目标检测任务-数据集格式转换(voc 转 ShareGPT)
  • 【洛谷题单】--顺序结构(一)
  • C++高频知识点(六)
  • [NOIP][C++]洛谷P1376 [USACO05MAR] Yogurt factory 机器工厂
  • LeetCode--42.接雨水
  • C++(STL源码刨析/vector)
  • 从历史航拍图像中去除阴影
  • 11款常用C++在线编译与运行平台推荐与对比
  • 力扣-75.颜色分类
  • Web后端开发-Mybatis
  • qt-C++笔记之setCentralWidget的使用
  • 软件系统测试的基本流程
  • 数据结构*搜索树
  • 从零开始手写嵌入式实时操作系统
  • 牛市来临之际,如何用期权抢占反弹先机?
  • 初识mysql(一)
  • [特殊字符] AlphaGo:“神之一手”背后的智能革命与人机博弈新纪元
  • 【深度学习新浪潮】什么是蛋白质反向折叠模型?
  • 深度学习超参数优化(HPO)终极指南:从入门到前沿
  • FairyGUI 实现 Boss 双层血条动画