vue2与vue3差别之响应式数据

最新推荐文章于 2024-06-07 23:26:45 发布
最新推荐文章于 2024-06-07 23:26:45 发布
阅读量370 收藏 8
点赞数 7
分类专栏： 前端学习专栏 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64863035/article/details/136633407
版权

由于笔者记性比较差，学了新的忘了旧的，但都是非常重要的知识点。决定开个贴记录下vue2与vue3的差别，重点放在vue3

首先什么是响应式数据，响应式数据我认为就是可以通过操作更改的数据

比如下面这个例子，一个用ref函数包裹，一个直接用常量，结果当点击按钮的时候，前者不会随着click函数改变，依然为0，后者随着函数发生变化

Vue3声明响应式数据的方法就是ref函数，组件中访问ref函数包裹的数据需要.value,在一些模板中则不需要

Vue2声明响应式的方法就是data函数的返回值中，由于Vue2环境与Vue3环境并不兼容，导致笔者无法运行此项目，不进行具体显示

十七只碗.
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
稍微学一下Vue的数据响应式（Vue2及Vue3区别）
10-15
主要介绍了稍微学一下 Vue 的数据响应式（Vue2 及 Vue3），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue data的数据响应式到底是如何实现的
10-15
主要介绍了Vue data的数据响应式到底是如何实现的，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue2 - 数据响应式原理
qq_40147756的博客
01-03 1157
Vue2 - 数据响应式原理。observer，Dep，Watcher，Schedule
vue3之实现响应式数据ref和reactive
前端啤酒屋
12-07 1350
vue3 实现响应式数据 ref 和 reactive
VUE3响应式原理，及与VUE2响应式的区别
qq_56427830的博客
03-13 857
响应式原理和vue响应原理的相关概念，在vue3的响应式实现是基于ES6中的proxy和Reflect实现的，与vue2借助有所不同。要想理解vue3的响应式实现，必须要先了解proxy和Reflect的作用。
vue2与vue3的响应式原理及区别
qq_41570246的博客
09-07 845
vue2与vue3的响应式原理及区别
看完就懂的vue2与vue3响应式的区别
老电影故事的博客
04-25 1701
数据响应式所谓数据响应式就是建立响应式数据与依赖（调用了响应式数据的操作）之间的关系，当响应式数据发生变化时，可以通知那些使用了这些响应式数据的依赖操作进行相关更新操作，可以是DOM更新，也可以是执行一些回调函数。从Vue2到Vue3都使用了响应式，那么它们之间有什么区别？Vue2响应式：基于Object.defineProperty()实现的。Vue3响应式：基于Proxy实现的。那么它们之间有什么区别？为什么Vue3会选择Proxy替代defineProperty？请听我娓娓道来~~
vue2与vue3响应式原理介绍
m0_70730767的博客
04-12 979
vue2与vue3响应式原理的区别
vue2和vue3的响应式数据原理和区别
hkduan的博客
02-21 1858
vue2用defineProperty({},key,handel) 缺点：Object.defineProperty() 无法监控到数组下标的变化，对象的增加。对于新增加的属性，需要再手动初始化才能被监测。通过 Vue.set()和 Vue.delete来实现响应式的。 需要重新执行observe(arr)，遍历，影响性能。 function defineReactive(data, key, value) { Object.defineProperty(data, key, { enumerable
vue2与vue3的响应式原理
韩旭不会敲代码吧的博客
12-07 3515
vue2 1、对象类型 原理：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。 1、定义数据： const vm = new Vue({ el: '#root', data: { person:{ name: '张三', age: 18 } } }) 2、加工数据：为了实现响应式，vue会给data中的每一组key:value都形成了get和set的写法 只要data中的属性发生改变，就会调用set方法，然后重新解析模板，生成虚拟DOM，新旧虚拟DOM
Vue2和Vue3的响应式原理及区别
m0_45219210的博客
11-04 3419
响应式数据的声明。以下内容帮助理解，不建议死记硬背
Vue3.0数据响应式原理详解
10-16
主要介绍了Vue3.0数据响应式原理详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
基于Vue2的响应式大屏数据可视化项目源码.zip
08-10
基于Vue2的响应式大屏数据可视化项目源码.zip 基于Vue2的响应式大屏数据可视化项目源码.zip 基于Vue2的响应式大屏数据可视化项目源码.zip 1、该资源内项目代码都是经过测试运行成功，功能ok的情况下才上传的，请放心...
前端性能优化：提升网站加载速度的终极指南
最新发布
喔的嘛呀的博客
06-07 733
综上所述，通过以上优化方案和具体措施，我们可以有效地提升网站的加载速度，改善用户体验，提高转化率，从而在激烈的市场竞争中脱颖而出，取得更好的业绩和口碑。作为前端工程师，我们应该不断学习和探索，不断优化和提升网站性能，为用户创造更好的上网体验。
浏览器阻止屏幕息屏,js阻止浏览器息屏,Web网页阻止息屏
lianmindiandi
06-04 168
比如打开一个浏览器页面(比如大屏),想让它一直显示着,而不是过几分钟不操作就屏幕黑了.(电脑有设置电脑不操作就会多长时间就会息屏睡眠,如果要求每个客户都去操作一下电脑设置一下从不睡眠,这很不友好和现实.而且我也只想客户在大屏的时候才这样,其他页面就正常,按电脑设定走)如果想看看效果,可以试试,最好把电脑息屏改成1分钟,要不然等太久了, 累啊…(除非等待时间玩把手游😁)这是看了前端css大佬张鑫旭写的一波文章,观后有感😄,如果大家不认识,百度一波。是不是很简单,但是这里面还有一些注意点,
Typescript高级: 深入理解extends keyof语法
Wang的专栏
06-02 821
在TypeScript中，extends关键字是类型系统中一个极其重要的组成部分它不仅用于类的继承，也是类型兼容性检查和泛型约束的关键机制特别是当它与keyof关键字结合，形成的结构时它为类型系统带来了强大的灵活性和表达能力，让我们能够在泛型中对对象的属性进行操作和约束。
NSSCTF WEB 题解（一）
2301_81105268的博客
06-04 1015
题目提示：F12下发环境，打开网址，进入网页后点击F12查看源代码直接查找flag可以得到flag。
区块链部署笔记（Centos7）包含fisco bcos与webase！
weixin_74163644的博客
06-03 989
使用已有链时需配置# 已有链的路径，start_all.sh脚本所在路径# 路径下要存在sdk目录（sdk目录中包含了SSL所需的证书，即ca.crt、sdk.crt、sdk.key和gm目录（包含国密SSL证书，gmca.crt、gmsdk.crt、gmsdk.key、gmensdk.crt和gmensdk.key）最后一步是关键，要么开放mysql使用的（默认3306）端口，要么关闭windows防火墙（比赛时推荐），不然很可能访问不了，在控制面板设置即可，开放端口的话，需要配置一个入站规则；
vue2和vue3数据响应式原理区别
08-19
Vue 2 和 Vue 3 在数据响应式原理上有一些区别。以下是它们之间的主要区别： 1. Reactivity API（响应式 API）： - Vue 2：Vue 2 使用 Object.defineProperty() 来追踪属性的变化，并通过 getter 和 setter 来劫持属性的访问和修改，从而实现数据的响应式。 - Vue 3：Vue 3 引入了一个新的响应式系统，使用 Proxy 对象来实现数据的响应式。Proxy 可以拦截对象上的各种操作，包括属性的读取、设置、删除等。 2. 引入了 Proxy 对象： - Vue 2：Vue 2 中没有使用 Proxy 对象。 - Vue 3：Vue 3 使用 Proxy 对象来代替 Vue 2 中的 Object.defineProperty()。Proxy 具有更强大和灵活的功能，可以捕获更多类型的操作，并且可以直接监听整个对象或数组，而不需要遍历每个属性。 3. 响应式侦听（Reactivity Tracking）： - Vue 2：Vue 2 使用递归遍历来追踪数据的变化，这意味着在大型对象或数组上可能会有性能问题。 - Vue 3：Vue 3 使用了基于依赖图的跟踪机制，只追踪实际使用的属性，而不是整个对象。这样可以提高性能并减少不必要的侦听。 4. 静态树优化（Static Tree Optimization）： - Vue 2：Vue 2 中的虚拟 DOM 对比算法是基于深度优先遍历的，无法识别静态子树，导致在重新渲染时可能会重复创建和销毁组件。 - Vue 3：Vue 3 引入了静态树优化，通过标记和提升静态节点，可以跳过对它们的对比和渲染过程，从而提高性能。 总的来说，Vue 3 在数据响应式上采用了 Proxy 对象和基于依赖图的跟踪机制，提供了更强大和高效的响应式系统，并引入了一些优化技术来提高性能。这些改进使得 Vue 3 在处理大型应用程序和复杂数据结构时更加高效和灵活。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值