Vue为什么没有类似于React中shouldComponentUpdate的生命周期？

最新推荐文章于 2023-10-28 21:27:39 发布
最新推荐文章于 2023-10-28 21:27:39 发布
阅读量727 收藏 2
点赞数 1
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LuckXinXin/article/details/108595150
版权

考点: Vue的变化侦测原理

前置知识: 依赖收集、虚拟DOM、响应式系统

根本原因是Vue与React的变化侦测方式有所不同

  • React是pull的方式侦测变化,当React知道发生变化后,会使用Virtual Dom Diff进行差异检测,但是很多组件实际上是肯定不会发生变化的,这个时候需要用shouldComponentUpdate进行手动操作来减少diff,从而提高程序整体的性能.
  • Vue是pull+push的方式侦测变化的,在一开始就知道那个组件发生了变化,因此在push的阶段并不需要手动控制diff,而组件内部采用的diff方式实际上是可以引入类似于shouldComponentUpdate相关生命周期的,但是通常合理大小的组件不会有过量的diff,手动优化的价值有限,因此目前Vue并没有考虑引入shouldComponentUpdate这种手动优化的生命周期.
LuckXinXin
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue生命周期和react生命周期对比【推荐】
10-18
本文通过实例代码给大家介绍了vue生命周期和react生命周期对比 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
浅谈vue生命周期共有几个阶段？分别是什么？
10-14
Vue实例在生命周期中的不同阶段，执行不同的操作，例如数据绑定、DOM操作、事件处理等。了解Vue的生命周期对于优化应用性能和编写高效的组件至关重要。 Vue实例的生命周期分为以下几个阶段： 1. **beforeCreate**...
Vue为什么没有类似React中shouldComponentUpdate的生命周期
weixin_62548988的博客
08-03 238
进行差异检查,但是很多组件肯定不会发生改变，这个时候就需要使用shouldComponentUpdate进行手动操作来减少diff，以提升程序的性能。的方式侦测变化，它在一开始就知道哪些组件发生了变化，所以不需要手动减少diff，并且，在内部组件可以添加手动减少diff类似的。但是合理大小的组件不会有过量的diff，手动优化的价值有限，所以Vue目前不考虑引入此生命周期。的方式，当React知道发生变化了之后，会使用。
一份vue面试知识点梳理清单
bb_xiaxia1998的博客
11-15 226
指令本质上是装饰器，是 vue 对 HTML 元素的扩展，给 HTML 元素增加自定义功能。vue 编译 DOM 时，会找到指令对象，执行指令的相关方法。自定义指令有五个生命周期（也叫钩子函数），分别是 bind、inserted、update、componentUpdated、unbind1. bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。2. inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
shouldComponentUpdate 是做什么的？
最新发布
A12536365214的博客
10-28 255
在深入了解之前，我们需要先了解 React 的渲染机制和生命周期。React 通过比较组件的前后状态来决定是否需要更新 DOM，这个过程称为 Reconciliation。在这个过程中，扮演了重要的角色，它决定了组件是否需要进入更新流程。是 React 类组件中一个非常有用的生命周期方法，用于优化组件的渲染性能。通过合理地使用这个方法，我们可以阻止不必要的渲染，提高应用的性能。然而，也需要注意不要过度使用这个方法，以避免引入复杂性和潜在的错误。
你是如何理解Vue的响应式系统的
weixin_30707875的博客
09-26 435
1.响应式系统简述: 任何一个 Vue Component 都有一个与之对应的 Watcher 实例。 Vue 的 data 上的属性会被添加 getter 和 setter 属性。 当 Vue Component render 函数被执行的时候, data 上会被 触碰(touch), 即被读, getter 方法会被调用, 此时 Vue 会去记录此 Vue component...
解决Vue中的生命周期beforeDestory不触发的问题
10-15
主要介绍了解决Vue中的生命周期beforeDestory不触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-reactflow:在 Vue.js 应用程序中渲染 React 组件的实验
08-04
这是一个演示项目，用于展示在 Vue.js 应用程序中使用的 React 组件 。 在 Vue 中使用 React 绝对是一种反模式，但有时可能需要使用它。 在这种情况下，我尝试在 Vue 应用程序中组合一个子 React 类组件。 不幸的...
vue和react（shouldComponentUpdate ）性能异同
高山景行，一尘不染
08-27 1572
React 和 Vue 有许多相似之处，它们都有： 使用 Virtual DOM 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。 由于有着众多的相似处，我们会用更多的时间在这一块进行比较。这里我们不只保证技术内容的准确性，同时也兼顾了平衡的考量。我们需要承认 React 比 Vue...
vue 组件的生命周期怎么只执行一次_Vue 为什么没有 shouldComponentUpdate 的生命周期？...
weixin_33015139的博客
02-11 246
目前的几个回答都说得挺好，尤其是 @方正 说的，点出了本质。目前流行的一些框架：react: 数据变化之后，用户通过 setState 主动通知框架更新视图vue：数据变化之后，框架通过对原生对象和数组类型变更方法的劫持自动发现更新的部分，刷新视图，用户没有手动过程angular:1.x 数据变化之后，通过 $digest 主动通知框架更新视图(框架劫持了大部分异步行为，自动做这个事情)2 以后版...
shouldComponentUpdate
m0_60676278的博客
12-29 880
shouldComponentUpdate作用
VUE基础（7）：VUE的变化侦测原理
imagine_tion的博客
12-06 664
一、既然Vue通过数据劫持可以准确探测数据的变化，为什么还需要虚拟DOM进行diff检测差异？ 现代前端框架有两种方式侦测变化，一种是pull，一种是push。 **1.pull：**其代表为React，我们可以回忆一下React是如何侦测到变化的，我们通常会用 setState API 显式更新，然后React会进行一层层的Virtual Dom Diff 操作找出差异，然后 Patch 到 DOM 上，React从一开始就不会知道到底哪里发生了变化，只是知道 “有变化了”，然后再进行比较暴力的 Diff
shouldComponentUpdate机制
覃大畅的博客
02-23 1万+
文章目录shouldComponentUpdate机制机制使用 ReactNative系列-文章 https://segmentfault.com/a/1190000016494335?utm_source=tag-newest shouldComponentUpdate机制 机制 在react开发中，经常需要对数据state状态进行改变，但是这种方式每当setState的时候都会将所有的组件重新...
react 生命周期详解
weixin_34387284的博客
07-25 202
state有时候很不听话，在某些时候，我不想他渲染，偏偏react非常智能的帮我们重复渲染。 比如最常见的就是传递的对象为空，组件依旧渲染了一次或者多次。 更多场景不举例了，对症下药。 shouldComponentUpdate是react提供的生命周期函数，他发生在接收到新的props的时候。简单介绍一下各个生命周期函数。 componentWillMount：组件挂载之前执行，只执...
vue知识浅析
konglei1996的博客
06-09 843
本文翻译自这里哦http://vuejsdevelopers.com/2017/05/28/switch-from-react-to-vue-js/ react和Vue有哪些区别？ react和Vue相较于不同点，它们实则有许多相似点： 都是一种构建ui的js框架； 都是轻量级的； 都是基于组件化的设计思想； 都采用了虚拟Dom（Vue应该指的2）； 都能被webpack打包成一个单独的html
前端框架用vue还是react？清晰对比两者差异
changyanmanman的专栏
07-19 1645
前言 近两年前端技术层出不穷，目前市面上已经有了很多供前端人员使用的开发框架，转眼19年已过大半，前端框架领域日趋成熟，实现了三足鼎立的局面，截止到10月22日，Angular，react和vue数据统计如下图所示: 最近在学习使用框架的时候，分别使用vue和react开发了两个移动端产品，对这两个框架的学习曲线有了一些感悟，这两个都是现在比较热门的js框架，它俩在使用方式上和学习复杂度上还是有很大区别的，这里简单总结下两者的差异。 主要从以下几个方面入手方面展开： 框架的诞生...
reactjs性能优化之shouldComponentUpdate
热门推荐
Jason's Word
11-16 3万+
更多内容请关注：性能优化每当开发者选择将react用在真实项目中时都会先问一个问题：使用react是否会让项目速度更快，更灵活，更容易维护。此外每次状态数据发生改变时都会进行重新渲染界面的处理做法会不会造成性能瓶颈？而在react内部则是通过使用一些精妙的技巧来最小化每次造成ui更新的昂贵的dom操作从而保证性能的。避免直接作用于DOMreact实现了一层虚拟dom，它用来映射浏览器的原生dom树...
7.react的生命周期？vue生命周期？
10-18
React和Vue都有自己的生命周期。下面是它们的生命周期方法： React生命周期方法： 1. constructor() 2. static getDerivedStateFromProps() 3. render() 4. componentDidMount() 5. shouldComponentUpdate() 6. getSnapshotBeforeUpdate() 7. componentDidUpdate() 8. componentWillUnmount() Vue生命周期方法： 1. beforeCreate() 2.React和Vue都有自己的生命周期。下面是它们的生命周期方法： React生命周期方法： 1. constructor() 2. static getDerivedStateFromProps() 3. render() 4. componentDidMount() 5. shouldComponentUpdate() 6. getSnapshotBeforeUpdate() 7. componentDidUpdate() 8. componentWillUnmount() Vue生命周期方法： 1. beforeCreate() 2. created() 3. beforeMount() 4. mounted() 5. beforeUpdate() 6. updated() 7. beforeDestroy() 8. destroyed() 需要注意的是，React和Vue的生命周期方法有些不同，但是它们的作用都是相似的，都是为了在组件的不同阶段执行不同的操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值