vue响应式的本质

已于 2024-06-25 14:01:24 修改
阅读量186 收藏
点赞数 3
文章标签： vue.js 前端 javascript 响应式 vue2 vue3
于 2024-05-15 09:58:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15325579/article/details/138894056
版权

参考b站视频：vue响应式的本质【渡一教育】_哔哩哔哩_bilibili

一、响应式本质

是函数和数据的关联；在数据发生变化时，调用关联的函数。

那是不是所有函数和数据关联都是响应式呢？那显然不是

二、响应式条件

怎么样的函数和数据才是响应式呢

函数

必须是被监控的函数

vue2是被watch监控的函数

vue3是被effect监控的函数，如下：

  • render
  • watchEffect
  • watch
  • computed

数据

  • 必须是响应式数据
  • 响应式数据必须在被监控的函数中使用(比如，在template中引用响应式数据，就是在render中使用响应式数据)

88再见孙悟空
关注
Vue响应式本质和原理
单口相声Jay
07-04 73
其次，实现原理是：Vue内部的Object.defineProperty()方法把数据/data设置为getter和setter的访问形式，当数据被修改时在setter方法设置监视修改页面信息进行同步，也就是说只要数据被修改，就会触发对应的set方法，由set方法去调用操作dom的方法。即针对的是数据和页面同步刷新，数据更新同步页面，页面更新也会同步数据/data（这就是vue的双向数据绑定，即MVVM模式）。Compile解析模板，把模板中变量换成数据，绑定更新函数，添加订阅者，收到通知就执行更新函数。
Vue响应式的原理
HHR_hr的博客
07-28 1090
handler（操作者）可以接收事件对象作为参数，‌并根据需要传入其他参数组合式API避免代码重复和冗余，‌提高代码的重用性和可维护性。
vue-vue响应式编程
m0_53614495的博客
09-21 920
setup中的生命周期定义方法需要在周期函数前加上on，注意：setup方法执行时机与beforeCreate和created执行时机基本一致。组合和setup方法中窦定义了同样的生命周期方法，他们之间并不会冲突。setup() {console.log("setup中定义的mounted方法");})},console.log('组件内定义的mounted方法');
Vue响应式原理全解析
CRMEB小程序商城的博客
03-20 764
大家好，我是程序员蒿里行。浅浅记录一下面试中的高频问题，请你谈一下Vue响应式原理。必备前置知识，​​Vue2​​官方文档中​​深入响应式原理​​​及​​Vue3​​官方文档中​​深入响应式系统​​。响应式本质是当数据变化的时候，会自动执行一些相关函数。price: 2,amount: 3假设去水果店买苹果，价格为两元，买三个，总价是六元。但是苹果价格调整后，我还得重新计算一遍总价，即调用totalPrice函数。
Vue响应式系统的作用与实现（三）
Zzh1110的博客
12-06 665
前面讨论了非原始值的响应式实现，接下来这节将讨论原始值的响应式实现。原始值指的是：等类型的值。在JS中，原始值是按值传递的，而非按引用传递。这意味着如果一个函数接收原始值作为参数，那么形参和实参之间没有引用关系，它们是两个完全独立的值，对形参的修改不会影响实参。另外JS中的Proxy无法提供对原始值的修改，因此想要将原始值变成响应式数据，就需要做一层包裹，vue.js里面是借助ref实现的，接下来就让我们来认识它。由于Proxy的代理目标必须是非原始值，所以我们没有任何手段拦截对原始值的操作，例如： 对于这
Vue响应式系统的作用与实现（一）
Zzh1110的博客
12-04 881
Vue2的响应式实现是借助 通过重写getter和setter方法来进行的数据劫持，Vue3通过Proxy代理拦截对象中任意属性的变化，通过Reflect反射对源对象的属性进行操作。上面中的这句话应该都知道，那我们先来了解一下什么是副作用函数，以及它有什么用？它和响应式数据又有什么关系？举例：当一个函数修改了全局变量。 响应式数据：当值发生变化后，副作用函数会自动重新执行。 那么怎么才能让数据变成响应式数据呢？上代码前请看两个地方：上图中Set数据结构所存储的副作用函数集合我们称为 key的依赖集合。
Vue 数据响应式
qq937654393的博客
02-28 3919
Vue2 侦测数据变化使用的是 Object.defineProperty() 方法，通过定义对象属性上的 get 和 set 方法，在 get 方法中收集观察者，在 set 方法中通知观察者们进行更新视图或处理其他事务
vue响应式系统的基本原理
sumisu666的博客
12-27 1752
vue响应式系统的基本原理 我们使用vue时，对数据进行操作，就能影响对应的视图。那么这种机制是怎么实现的呢？ 思考一下，是不是就好像我们对数据的操作 被“某人”监视了？一旦我们对数据进行了更改，“某人”就能感应到，并帮我们更新视图 那么这个“某人”到底是谁呢？其实它很普通，就是我们基础里面有学过的 Object.defineProperty，使用它来对数据进行一下加工，就能实现当数据被读时，执行“读”的回调函数；数据被写时，执行“写”的回调函数。 接下来，我们将简单回顾该方法的使用，再用几个实战小
Vue3响应式内部原理
Wu_whiteHyacinth的博客
03-27 1288
响应式内部原理
Vue3响应式
cookie-y的博客
06-21 169
Vue3响应式实现原理
vue源码分析-响应式系统(一)
yyzzabc123的博客
10-31 327
从这一小节开始，正式进入Vue源码的核心，也是难点之一，响应式系统的构建。这一节将作为分析响应式构建过程源码的入门，主要分为两大块,第一块是针对响应式数据初始化过程的分析，另一块则是在保留源码设计理念的前提下，尝试手动构建一个基础的响应式系统。有了这两个基础内容的铺垫，下一篇进行源码具体细节的分析会更加得心应手。
vue2响应式通过数组下标赋值响应式问题
Lxh19980906的博客
02-07 979
通过学习vue2响应式，我写的不知道为什么，直接通过数组下标赋值它也是响应式的。下面是源码，你们可以试试。 直接复制新建一个html通过控制台测试 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor
Vue2响应式原理
a877969729的博客
09-13 521
一步一步地把vue2的响应式实现。
vue 中如何实现鼠标拖动出发滚动条的跟随移动？
sinat_33255495的博客
09-20 421
如果要实现鼠标辅助触发滚动条的移动，需要借助 mousedown，mouseup，mousemove 三个事件，通过鼠标的移动来动态修改滚动条的scrollLeft和scrollTop,来模拟实现滚动条的位置变更。在做弹窗、表单或 tab 切换需求的时候，有时候因为内容过长会导致出现滚动条，但是只能拖动滚动条时会导致操作不便，我们会希望实现通过拖动内容区实现滚动条的滑动。这样操作就会简单多了。为方便复用，我们可以创建一个类来封装鼠标事件，使用时把事件挂载到指定容器即可。这样就实现啦，就是如此简单！
VuePress搭建文档网站/个人博客（详细配置）主题配置-导航栏配置
分享式获得也是一种学习的态度
09-16 1644
每个人都有惰性，但不断学习是好好生活的根本，共勉！
小明，谈谈你对Vue nextTick的理解
wujiayu31415的博客
09-19 395
是一个重要的异步操作工具，用于在 DOM 更新完成后执行回调函数。，Vue 提供了一种高效的方式来处理异步更新，帮助开发者在数据变更后正确执行逻辑。在使用一些依赖于 DOM 状态的第三方库时，确保它们在 Vue 更新后执行，可以避免潜在的错误。这种实现机制确保了 Vue 的响应式特性可以平滑运行，并保证了数据与视图之间的高度一致性。：在 Vue 的响应式系统中，当数据发生变化时，相关的组件会被标记为需要更新。的回调会在 DOM 更新完成后被执行，从而确保了在 DOM 变化之后获取最新的状态。
文件系统设计 - 开发文件系统 Store (上篇)
最新发布
qq_44746132的博客
09-21 312
本章以一个基础的响应式Store类开始，对编辑器最核心的基础模块-文件系统管理进行开发设计，遵循面向接口编程的理念，设计文件系统的相关接口类型定义。
基于python+django+vue的美术馆预约系统
计算机学姐的博客
09-18 1332
【2025最新】基于协同过滤+python+django+vue+MySQL的美术馆预约系统，前后端分离。
Vue中实现localStorage响应式：实战与原理探索
首先，理解Vue响应式的本质是关键。Vue的核心机制是基于数据劫持和依赖收集，它在初始化组件时会监听data选项中的所有属性变化。当这些属性被改变时，Vue会自动更新视图，这是通过在属性上添加getter和setter实现的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值