Vue 响应式的核心原理

最新推荐文章于 2024-06-24 23:34:14 发布

Seric.

最新推荐文章于 2024-06-24 23:34:14 发布

阅读量197

点赞数 1

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/Seric_xiao/article/details/120427424

版权

本文深入探讨Vue.js的响应式原理，重点解析如何通过Object.defineProperty实现数据响应，并通过实例展示如何将对象属性转换为响应式。同时，文章比较了Vue 2.x与Vue 3.x在响应式实现上的差异，指出Vue 3.x使用proxy直接监听对象的改进，使得代码更简洁。

摘要由CSDN通过智能技术生成

1. `Vue2.x`响应式原理

关于Vue2.x的响应式原理在官方文档中也有介绍。

https://cn.vuejs.org/v2/guide/reactivity.html

在该文档中，我们注意如下一段内容：

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

通过以上的文字，我们可以看到，在Vue2.x中响应式的实现是通过Object.defineProperty来完成的，注意该属性无法降级(shim)处理，所以Vue不支持IE8以及更低版本的浏览器的原因。

下面我们来看一下Object.defineProperty基本使用

修改data对象中的msg属性的值，实现视图的更新.(这也就是我们所说的响应式)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <me

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Seric.

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue响应式核心原理手写源码

01-11

本文将深入探讨Vue响应式原理，并通过手写源码的方式帮助你理解这一关键机制。 Vue响应式系统的核心在于数据绑定和依赖追踪。当Vue实例创建时，它会遍历所有声明的data属性，并对它们进行观测（Observation）。这个...

vue3：JS、TS关于doucument.querySelector()的基本使用

qq_44670228的博客

08-18

2443

【代码】vue3：JS、TS、小程序，关于doucument.querySelector()的基本使用。

参与评论您还未登录，请先登录后发表或查看评论

vue mounted周期中document.querySelectorAll()获取不到元素的问题

luoxuebinfei的博客

04-21

7482

在mounted阶段，若需要获取的元素或组件有v-if，v-for属性。 v-if的初始化结果为false。v-for遍历的数组初始化阶段无值。（即mounted阶段后，根据获得的后台数据来动态操作dom）这两种情况都会导致mounted阶段获取元素的语句获取不到dom。解决方案：把获取元素的语句放在异步获取到数据，赋值给data中的key之后进行。同时需要给获取元素的语句加上setTimeout。因为setTimeout是宏任务，会在vue的render函数执行之后再执行。把获取元素的语句放到

VUE的底层原理分析vue框架的来龙去脉，和技术要点及难点和应用场景，小白的进阶之道

最新发布

zhang9880000的博客

06-24

1845

Vue.js 支持自定义指令，允许开发者在普通 DOM 元素上应用自定义行为。自定义指令的生命周期钩子包括bindinsertedupdateunbind。创建自定义指令el.focus();});

vue中如何操作真实dom

很多时候犯错都是在不知情的情况下发生的

06-13

1658

原生操作dom a = document.getElementById('elea');// 获取a elementList = document.querySelectorAll(selectors);//获取多个dom元素如ul中的li element = document.querySelector(selectors)//获取dom元素中的第一个元素 1 2 3 还有很多这样的dom操作方法。 Vue中一般不操作dom,如果想要获取dom元素，该如何操作？ Vue中操作dom Vue 1.x.

Vue 简单模拟 - 响应式原理

皮蛋很白的博客

07-26

627

模拟Vue响应式原理 Vue响应式原理模拟的目的了解响应式原理从原理层面解决实际项目中的问题学习Vue响应式原理，为学习Vue源码做铺垫准备工作（前置知识）：数据驱动 响应式核心原理发布订阅模式和观察者模式数据驱动 Vue中经常出现3个词：数据响应式、双向绑定、数据驱动。数据响应式 数据响应式中的“数据”，指的是数据模型。基于Vue开发时，数据模型就是普通的 JavaScript 对象。数据响应式的核心是：当修改数据时，试图会自动进行更新，避免了繁琐的 DOM 操作，提高开发效率

一遍就会的的vue的双向数据绑定的原理

preserveXing的博客

05-23

224

一遍就会的的vue的双向数据绑定的原理1.前提知识[不会不要急,里面都会提到]1.1浅拷贝深拷贝的理解1.2Object.defineProperty的使用2.代码实现[defineProperty]3.上面代码逻辑分析4.vue3.0的双向数据绑定的方式[proxy] 1.前提知识[不会不要急,里面都会提到] 1.1浅拷贝深拷贝的理解之所以利用到拷贝是因为需要复制一个对象并进行操作 1.2Object.defineProperty的使用可以给对象的属性例如obj={ x:12}的x进行修改

详细分析vue响应式原理

10-15

Vue响应式原理是Vue.js框架中的核心概念之一，它主要实现了数据驱动视图更新的机制。在Vue中，这一原理主要是通过数据劫持（data劫持）的方式完成的，通过定义一个对象的属性为响应式，当属性值变化时，视图会自动...

Vue响应式原理详解

08-30

下面我们将详细探讨Vue响应式原理的各个方面。首先，Vue通过`Object.defineProperty`方法实现了数据响应化。当你将一个普通的JavaScript对象传递给Vue实例的`data`选项时，Vue会遍历这个对象的所有属性，并用`...

浅谈Vue的响应式原理

10-16

让我们深入探讨Vue响应式原理及其底层实现。首先，Vue采用的是MVVM（Model-View-ViewModel）架构模式。在Vue中，View层是DOM对象的HTML，ViewModel层是Vue实例的vm对象，而Model层则包含data、computed、methods等...

Vue3.0数据响应式原理详解

10-16

Vue3.0的数据响应式原理是其核心特性之一，它极大地优化了开发体验并提高了性能。在Vue3中，响应式系统的实现主要依赖于ES6的`Proxy`和`Reflect`对象，这两个新特性使得Vue能够更加精细地监控数据的变化。 1. **ES6...

[vue] document.querySelector(‘.xx‘).clientWidth 等于0

qq_14993591的博客

05-19

787

showAdd() { setTimeout(()=>{ console.log(this.$refs.input.$el.clientWidth) }, 400) } 为什么在打开模式时’$el.clientWidth‘等于0？(Vue.js)

Vue的一些原理总结

wang13679201813的博客

05-30

4109

文章目录1、双向绑定原理Object.defineProperty()2、Vue3的Proxy（数据代理）3、虚拟DOM、diff算法4、vue是如何渲染和更新的5、data为啥必须是函数6、模板编译7、前端路由 1、双向绑定原理Object.defineProperty() 通过Object.defineProperty()来劫持对象属性的setter和getter操作，在数据变动时做你想要做的事情 Object.defineProperty的缺点深度监听需要递归到底，一次性计算量大无法监听新增属性、

Vue 原理整理

gxll499294075的博客

03-22

1万+

1. 组件化基础=>（MVVM模型）传统组件，知识静态渲染，更新依赖于操作DOM。 Vue的核心理念是数据驱动的理念，所谓的数据驱动的理念：当数据发生变化的时候，用户界面也会发生相应的变化，开发者并不需要手动的去修改dom。优点：不需要在代码中去频繁的操作dom了，这样提高了开发的效率，同时也避免了在操作Dom的时候出现的错误。 Vue.js的数据驱动是通过MVVM这种框架来实现的，MVVM 框架主要包含三部分：Model, View, ViewMode 数据驱动视图...

VUE-原理解析

qq_27909209的博客

09-07

664

如果我们在 JavaScript 写类似的逻辑：当我们更改 A0 后，A2 不会自动更新。那么我们如何在 JavaScript 中做到这一点呢？let A2这个 update() 函数会产生一个副作用，或者就简称为作用，因为它会更改程序里的状态。A0 和 A1 被视为这个作用的依赖，因为它们的值被用来执行这个作用。因此这次作用也可以说是一个它依赖的订阅者。我们需要一个魔法函数，能够在 A0 或 A1 (这两个依赖) 变化时调用 update() (产生作用)。

Vue原理解析

fmk1023的博客

02-13

3499

VUE响应式原理

深入理解vue

Vue 响应式的核心原理

1. Vue2.x响应式原理

1. `Vue2.x`响应式原理