vue响应式的本质

已于 2024-06-25 14:01:24 修改
阅读量209 收藏
点赞数 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响应式原理和本质 - 实现一个完善的响应式系统
m0_71485750的博客
10-30 571
本篇文章代码思路来自Vue3.0源码, 部分理解来源于霍春阳 《Vue.js设计与实现》这本书的理解, 感兴趣的小伙伴可以自行购买阅读。可以非常明确的感受到作者对 Vue 的深刻理解以及用心, 富含非常全面的 Vue 的知识点, 强烈推荐给大家。
Vue响应式本质和原理
单口相声Jay
07-04 92
其次，实现原理是：Vue内部的Object.defineProperty()方法把数据/data设置为getter和setter的访问形式，当数据被修改时在setter方法设置监视修改页面信息进行同步，也就是说只要数据被修改，就会触发对应的set方法，由set方法去调用操作dom的方法。即针对的是数据和页面同步刷新，数据更新同步页面，页面更新也会同步数据/data（这就是vue的双向数据绑定，即MVVM模式）。Compile解析模板，把模板中变量换成数据，绑定更新函数，添加订阅者，收到通知就执行更新函数。
Vue响应式的原理
HHR_hr的博客
07-28 1462
handler（操作者）可以接收事件对象作为参数，‌并根据需要传入其他参数组合式API避免代码重复和冗余，‌提高代码的重用性和可维护性。
vue-vue响应式编程
m0_53614495的博客
09-21 954
setup中的生命周期定义方法需要在周期函数前加上on，注意：setup方法执行时机与beforeCreate和created执行时机基本一致。组合和setup方法中窦定义了同样的生命周期方法，他们之间并不会冲突。setup() {console.log("setup中定义的mounted方法");})},console.log('组件内定义的mounted方法');
Vue 响应式的本质
weixin_52648900的博客
10-09 1008
Vue 响应式本质是 数据和函数的关联，而不是说，数据改变之后页面刷新，这是表象，因此可以理解为什么有时候数据改变，但是页面不会刷新了。
Vue响应式原理全解析
CRMEB小程序商城的博客
03-20 803
大家好，我是程序员蒿里行。浅浅记录一下面试中的高频问题，请你谈一下Vue响应式原理。必备前置知识，​​Vue2​​官方文档中​​深入响应式原理​​​及​​Vue3​​官方文档中​​深入响应式系统​​。响应式本质是当数据变化的时候，会自动执行一些相关函数。price: 2,amount: 3假设去水果店买苹果，价格为两元，买三个，总价是六元。但是苹果价格调整后，我还得重新计算一遍总价，即调用totalPrice函数。
Vue响应式系统的作用与实现（三）
Zzh1110的博客
12-06 686
前面讨论了非原始值的响应式实现，接下来这节将讨论原始值的响应式实现。原始值指的是：等类型的值。在JS中，原始值是按值传递的，而非按引用传递。这意味着如果一个函数接收原始值作为参数，那么形参和实参之间没有引用关系，它们是两个完全独立的值，对形参的修改不会影响实参。另外JS中的Proxy无法提供对原始值的修改，因此想要将原始值变成响应式数据，就需要做一层包裹，vue.js里面是借助ref实现的，接下来就让我们来认识它。由于Proxy的代理目标必须是非原始值，所以我们没有任何手段拦截对原始值的操作，例如： 对于这
【VUE】一文向您详细介绍~Vue响应式基础（选项式API）
一起寻找DX3906-探索未知
06-29 1075
基于 选项式API 的Vue响应式基础-必知必会
Vue响应式系统的作用与实现（一）
Zzh1110的博客
12-04 915
Vue2的响应式实现是借助 通过重写getter和setter方法来进行的数据劫持，Vue3通过Proxy代理拦截对象中任意属性的变化，通过Reflect反射对源对象的属性进行操作。上面中的这句话应该都知道，那我们先来了解一下什么是副作用函数，以及它有什么用？它和响应式数据又有什么关系？举例：当一个函数修改了全局变量。 响应式数据：当值发生变化后，副作用函数会自动重新执行。 那么怎么才能让数据变成响应式数据呢？上代码前请看两个地方：上图中Set数据结构所存储的副作用函数集合我们称为 key的依赖集合。
vue源码分析-响应式系统(一)
yyzzabc123的博客
10-31 350
从这一小节开始，正式进入Vue源码的核心，也是难点之一，响应式系统的构建。这一节将作为分析响应式构建过程源码的入门，主要分为两大块,第一块是针对响应式数据初始化过程的分析，另一块则是在保留源码设计理念的前提下，尝试手动构建一个基础的响应式系统。有了这两个基础内容的铺垫，下一篇进行源码具体细节的分析会更加得心应手。
vue2响应式通过数组下标赋值响应式问题
Lxh19980906的博客
02-07 1008
通过学习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 560
一步一步地把vue2的响应式实现。
Vue3 响应式系统 - 4 - object的响应式方案
undefined_521的博客
05-04 559
总结《Vue.js设计与实现》一书内容，结合自身理解 仅供记录&交流~
后端SpringBoot及vue proxyTable解决跨域
qq_42059717的博客
11-06 397
昨天上线项目遇到了一个奇怪的问题，本来服务实在腾讯云的轻量应用服务器的，但是迁移到一个香港的服务器之后就出现了各种各样的问题。Nginx 开启Https Springboot开启Https，先后出现了噔噔蹬蹬但是我其实已经部署了一个项目了的，那个用的proxyTable,新部署的这个用的是里边的env控制的。后来改成proxyTable就好了。
Vue 状态管理工具vuex
gklcsdn的博客
11-07 571
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 解决了多个组件共享状态时，状态的可维护性和可预测性问题。
fastapi_socketio连接vue的socktio.client
u014220146的博客
11-06 431
所以默认配置是客户端连接时使用的路径时ws，而不是http， 并且路径还要带上socketio.io。提示：如果遇到跨域问题自行解决。
Vue Cli的配置中configureWebpack和chainWebpack的主要作用及区别是什么？
friend_ship的博客
11-08 719
Vue Cli提供的两种方案，一种是基于configureWebpack项直接覆盖同名配置；另一种是chainWebpack直接修改默认配置。
vue2 -- el-form组件动态增减表单项及表单项验证
King Saj
11-06 253
在数据录入场景（如订单信息录入）中，可根据实际情况（如商品种类增加）动态添加表单项（如商品相关信息）。包含必填项验证和数据格式验证（如邮箱、电话格式），防止错误数据提交。// 此处执行错误的逻辑。// 执行父组件回调。
第三十七章 Vue之编程式导航及跳转传参
最新发布
Calvin的博客
11-10 1351
前面的章节我们学习了声明式导航的路由跳转，简单理解就是通过链接形式的路由跳转，本章节我们来学习下编程式导航跳转，即点击按钮来实现页面的跳转。在Vue中提供了两种实现方式。Home.vue的代码在前者基础上稍做调整即可，获取方式等代码一样。编程式导航两种跳转方式对于两种传参方式也都支持。跳转方法中通过name属性指定路由即可。2.1.1. 查询参数传参（简写）2.2. name命名路由跳转传参。1.2. name 命名路由跳转。2.1. path路径跳转传参。2.2.1. 查询参数传参。
Vue中实现localStorage响应式：实战与原理探索
首先，理解Vue响应式的本质是关键。Vue的核心机制是基于数据劫持和依赖收集，它在初始化组件时会监听data选项中的所有属性变化。当这些属性被改变时，Vue会自动更新视图，这是通过在属性上添加getter和setter实现的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值