vue2响应式原理理解

已于 2023-10-09 14:14:16 修改
阅读量130 收藏
点赞数
文章标签： javascript vue.js
于 2023-07-21 16:49:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yusun1234/article/details/131789390
版权

1、一句话，vue2的响应式是通过Object.defineProperty添加get和set方法，把data中的数据变成响应式的，然后使用发布订阅模式（观察者模式）进行依赖追踪。

添加get和set方法老生长谈，现在说发布订阅模式进行追踪

主要有几个部分

Observe 封装的方法，把data中的属性转为响应式的。

Dep 依赖收集，读取属性时，记录谁使用了。属性发生了变化，通知使用到该属性的地方

watcher 监听，让dep知道谁在用它，也就是当用到响应式数据时，该数据不知道哪个方法用到了它。

(29条消息) 【Vuejs】952- 一文带你了解vue2之响应式原理_pingan8787的博客-CSDN博客

一文聊聊Vue响应式实现原理-Vue.js-PHP中文网

Vue面试考点之响应式原理 - 简书 (jianshu.com)

落魄小二
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅谈Vue2.0响应式原理
qq_38019052的博客
10-11 496
Vue2.0响应式原理学习笔记
Vue响应式原理详解
08-30
下面我们将详细探讨Vue响应式原理的各个方面。 首先，Vue通过`Object.defineProperty`方法实现了数据响应化。当你将一个普通的JavaScript对象传递给Vue实例的`data`选项时，Vue会遍历这个对象的所有属性，并用`...
Vue 数据响应式原理
weixin_45449964的博客
06-02 725
Vue 数据响应式原理 Vue2 中的数据响应式原理用的是观察者模式，下面用一张流程图来简单说明一下观察者模式的原理。 从流程图不难看出，观察者模式的核心就是 Dep 和 Watcher 这两个对象。Dep 负责收集依赖（这里的依赖实际就是 watcher），并在监听到数据变化的时候发送通知。发送通知的过程实际就是调用 watcher.update() 方法。从而更新视图内容。 下面我们来详细看看 Vue 具体是如何实现数据响应式的。 我将 Vue 实现数据响应式的过程分为三步： 创建响应式数据，也就是
【Vue 响应式原理】发布订阅模式、观察者模式
zimeng303的博客
12-13 4276
响应式原理 课程目标 模拟 Vue 响应式原理。 准备工作 数据驱动 数据响应式 数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM 操作，提高开发效率。 双向绑定 数据改变，视图改变；视图改变，数据也随之改变 我们可以使用 v-model 在表单元素上创建双向数据绑定 数据驱动（Vue 最独特的特性之一） 开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图 响应式的核心原理 Vue 2.x – 基于 Object.d
vue2/vue3分别使用观察者模式和发布订阅模式的区别
weixin_65644264的博客
06-24 581
观察者模式是一种行为设计模式，它定义了对象间的一对多依赖关系。当一个对象的状态发生变化时，所有依赖于它的对象都会得到通知并自动更新。Vue 2主要使用观察者模式实现响应式系统，通过实现数据属性的拦截和依赖收集。Vue 3使用Proxy结合观察者模式和发布订阅模式，实现更高效和灵活的响应式系统，同时通过组合式 API 提供更强大的响应式数据处理能力。
Vue2与Vue3响应式原理与依赖收集详解
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
03-17 924
前言继 Angular 和 React 之后，尤大在 2016 年发布了如今“前端三剑客”之一的 Vue 2.0，并凭借其简单易用、轻量高效的特点受到了广泛的欢迎，特别是在国内环境中。然而 Vue 2 中基于Object.defineProperty实现的响应式系统，随着 JavaScript 与浏览器技术的不断升级，其缺陷也愈加明显~所以 Vue 团队在 Vue 2 的基础上，通过基于Pr...
VUE源码学习第十篇--响应式原理(观察者与发布器)
恰恰虎的博客
07-21 509
一、总述 vue实现了响应式的双向绑定，相对于传统的dom操作，我们仅需要关心model的逻辑处理，vue将帮助我们完成view端的映射和渲染，这种模式大大提高了编程的效率。接下来的两个章节我们将一起了解下vue响应式的实现，在学习源码前，建议先阅读VUE探索第一篇--双向绑定原理了解响应式的原理。 vue的响应式采用的是观察者+发布订阅相结合的模式来实现。模型的示意图如下：...
从Vue层面 - 解析发布订阅模式和观察者模式区别
铁锤妹妹的博客
07-26 3183
观察者模式和发布订阅模式作为日常开发中经常使用到的模式，我一直不能做到很好的区分。最近在看Vue的源码，里面设计到了观察者模式，比较感兴趣，就去学习了下，这里做个总结吧。
Vue响应式原理探究之“发布-订阅”模式
weixin_42296161的博客
08-26 3292
在面试题中经常会出现与“发布订阅”模式相关的题目，比如考察我们对Vue响应式的理解，也会有题目直接考验我们对“发布订阅”模式或者观察者模式的理解，甚至还会有一些手写算法题。笔者就在今年三月参加某安全公司的面试时被要求手写代码实现“发布订阅”模式，当时由于没有准备没有回答上来，悔不该当初。由此可见“发布订阅”模式是一个非常重要的设计模式，接下来我们一起学习下吧。...
浅谈Vue的响应式原理
10-16
让我们深入探讨Vue响应式原理及其底层实现。 首先，Vue采用的是MVVM（Model-View-ViewModel）架构模式。在Vue中，View层是DOM对象的HTML，ViewModel层是Vue实例的vm对象，而Model层则包含data、computed、methods等...
Vue响应式原理Observer、Dep、Watcher理解
01-19
相信很多同学或多或少都了解Vue的响应式原理是通过Object.defineProperty实现的。被Object.defineProperty绑定过的对象，会变成「响应式」化。也就是改变这个对象的时候会触发get和set事件。进而触发一些视图更新。...
详细分析vue响应式原理
10-15
在理解了这些类和方法的具体作用后，可以看到Vue响应式原理是通过闭包、原型链、发布订阅模式等技术实现的。这样的设计让Vue可以高效且灵活地响应数据变化并更新视图。开发者通过阅读源码并结合实际使用，可以更深刻...
vue2响应式原理----发布订阅模式
qq_42931285的博客
04-13 1116
vue2响应式原理----发布订阅模式
Vue双向绑定
m0_56131422的博客
09-01 498
简单来说，双向绑定就是数据改变影响视图，视图改变也会影响数据。Vue 的双向绑定主要通过v-model。
跨页面进行数据通讯
最新发布
榴莲不好吃的专栏
09-02 292
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
【基础】Three.js加载纹理贴图、加载外部gltf格式文件
stay hungry, stay foolish
09-02 929
.gltf（JSON文件）: 描述模型的主要结构，包括几何体、材质、动画、场景等。.bin（二进制文件）: 存储顶点数据、法线、UV坐标等二进制数据。纹理（.png, .jpg）: 存储模型使用的纹理贴图。。
vue3+vite 通过js引入的src，在打包后为什么不能显示
肖肖肖丽珠的博客
09-02 112
页面有个图片我是动态设置的。但是打包之后一直没有找到。我本来使用的绝对定位发现不行，改成了相对的也不行，最后改成下面的这种就可以啦。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2213
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1203
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值