vue 渲染函数处理slot_面试官:Vue 和 React 对于组件的更新粒度有什么区别?
前言
我们都知道 Vue 对于响应式属性的更新,只会精确更新依赖收集的当前组件
,而不会递归的去更新子组件,这也是它性能强大的原因之一。
例子
举例来说 这样的一个组件:
<div> {{ msg }}<ChildComponent />div>template>
我们在触发 this.msg = 'Hello, Changed~'
的时候,会触发组件的更新,视图的重新渲染。
但是 这个组件其实是不会重新渲染的,这是 Vue 刻意而为之的。
React的更新粒度
而 React 在类似的场景下是自顶向下的进行递归更新的
,也就是说,React 中假如 ChildComponent
里还有十层嵌套子元素,那么所有层次都会递归的重新render(在不进行手动优化的情况下),这是性能上的灾难。(因此,React 创造了Fiber
,创造了异步渲染
,其实本质上是弥补被自己搞砸了的性能)。
他们能用收集依赖的这套体系吗?不能,因为他们遵从Immutable
的设计思想,永远不在原对象上修改属性,那么基于 Object.defineProperty
或 Proxy
的响应式依赖收集机制就无从下手了(你永远返回一个新的对象,我哪知道你修改了旧对象的哪部分?)
同时,由于没有响应式的收集依赖,React 只能递归的把所有子组件都重新 render
一遍,然后再通过 diff算法
决定要更新哪部分的视图,这个递归的过程叫做 reconciler
,听起来很酷,但是性能很灾难。
Vue的更新粒度
那么,Vue 这种精确的更新是怎么做的呢?其实每个组件都有自己的渲染 watcher
,它掌管了当前组件的视图更新,但是并不会掌管 ChildComponent
的更新。
那么有同学可能要问了,如果我们把 msg
这个响应式元素通过props传给 ChildComponent
,此时它怎么更新呢?
其实,msg
在传给子组件的时候,会被保存在子组件实例的 _props
上,并且被定义成了响应式属性
,而子组件的模板中对于 msg
的访问其实是被代理到 _props.msg
上去的,所以自然也能精确的收集到依赖,只要 ChildComponent
在模板里也读取了这个属性。
这里要注意一个细节,其实父组件发生重渲染的时候,是会重新计算子组件的 props
的,具体是在 updateChildComponent
中的:
// update propsif (propsData && vm.$options.props) { toggleObserving(false)// 注意props被指向了 _propsconst props = vm._propsconst propKeys = vm.$options._propKeys || []for (let i = 0; i < propKeys.length; i++) {const key = propKeys[i]const propOptions: any = vm.$options.props // wtf flow?// 就是这句话,触发了对于 _props.msg 的依赖更新。 props[key] = validateProp(key, propOptions, propsData, vm) } toggleObserving(true)// keep a copy of raw propsData vm.$options.propsData = propsData }
那么,由于上面注释标明的那段代码,msg
的变化通过 _props
的响应式能力,也让子组件重新渲染了,到目前为止,都只有真的用到了 msg
的组件被重新渲染了。
这也是为什么我们说:Vue 的响应式更新粒度是精细到组件级别的。
正如官网 api 文档中所说:
vm.$forceUpdate
:迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。—— vm-forceUpdate文档
我们需要知道一个小知识点,vm.$forceUpdate
本质上就是触发了渲染watcher
的重新执行,和你去修改一个响应式的属性触发更新的原理是一模一样的,它只是帮你调用了 vm._watcher.update()
(只是提供给你了一个便捷的api,在设计模式中叫做门面模式
)
注意这里也提到了一个细节,也就是 插入插槽内容的子组件
:
举例来说
假设我们有父组件parent-comp
:
<slot-comp><span>{{ msg }}span>slot-comp>div>
子组件
slot-comp
:
<slot>slot>div>
组件中含有
slot
的更新 ,是属于比较特殊的场景。
这里的
msg
属性在进行依赖收集的时候,收集到的是 parent-comp
的`渲染watcher。(至于为什么,你看一下它所在的渲染上下文就懂了。)
那么我们想象
msg
此时更新了,
<slot-comp><span>{{ msg }}span>slot-comp>div>
这个组件在更新的时候,遇到了一个子组件
slot-comp
,按照 Vue 的精确更新策略来说,子组件是不会重新渲染的。
但是在源码内部,它做了一个判断,在执行
slot-comp
的 prepatch
这个hook的时候,会执行 updateChildComponent
逻辑,在这个函数内部会发现它有 slot
元素。
prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {const options = vnode.componentOptions// 注意 这个child就是 slot-comp 组件的 vm 实例,也就是咱们平常用的 thisconst child = vnode.componentInstance = oldVnode.componentInstance updateChildComponent( child, options.propsData, // updated props options.listeners, // updated listeners vnode, // new parent vnode options.children // new children ) },
在
updateChildComponent
内部
const hasChildren = !!(// 这玩意就是 slot 元素 renderChildren || // has new static slots vm.$options._renderChildren || // has old static slots parentVnode.data.scopedSlots || // has new scoped slots vm.$scopedSlots !== emptyObject // has old scoped slots )
然后下面走一个判断
if (hasChildren) { vm.$slots = resolveSlots(renderChildren, parentVnode.context) vm.$forceUpdate() }
这里调用了
slot-comp
组件vm实例上的 $forceUpdate
,那么它所触发的渲染watcher
就是属于slot-comp
的渲染watcher
了。
总结来说,这次
msg
的更新不光触发了 parent-comp
的重渲染,也进一步的触发了拥有slot的子组件 slot-comp
的重渲染。
它也只是触发了两层渲染,如果
slot-comp
内部又渲染了其他组件 slot-child
,那么此时它是不会进行递归更新的。(只要 slot-child
组件不要再有 slot 了)。
比起 React 的递归更新,是不是还是好上很多呢?
后记
后记
如果你对于
渲染watcher
等概念一头雾水,关于响应式原理,我写了一篇最简实现 Vue 响应式的文章,欢迎阅读:
手把手带你实现一个最精简的响应式系统来学习Vue的data、computed、watch源码
https://juejin.im/post/5db6433b51882564912fc30f
本文也存放在我的Github博客仓库中,欢迎订阅和star。
https://github.com/sl1673495/blogs
鸣谢
鸣谢
感谢 嵇智大佬 对于本文一些细节的纠正。
https://github.com/theniceangel
vue 渲染函数处理slot_面试官:Vue 和 React 对于组件的更新粒度有什么区别?相关推荐
- vue 渲染函数处理slot_详解Vue的slot新用法
摘要: 理解Vue插槽. Fundebug经授权转载,版权归原作者所有. 为了保证的可读性,本文采用意译而非直译. 最近发布不久的Vue 2.6,使用插槽的语法变得更加简洁. 对插槽的这种改变让我对发 ...
- vue 渲染函数处理slot_解决vue同一slot在组件中渲染多次的问题
{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],&q ...
- Vue - 渲染函数render
一.render函数是什么 简单的说,在vue中我们使用模板HTML语法来组建页面的,使用render函数我们可以用js语言来构建DOM.因为vue是虚拟DOM,所以在拿到template模板时也要转 ...
- 【面试题】面试官:vue的这些原理你了解吗?
前言 在之前面试的时候我自己也经常会遇到一些vue原理的问题, 我也总结了下自己的经常的用到的,方便自己学习,今天也给大家分享出来, 欢迎大家一起学习交流, 有更好的方法欢迎评论区指出, 后序我也将持 ...
- 面试官:vue的这些原理你了解吗?
前言 努力! 奋斗! 爱折腾的程序员, 不会没关系, 最重要的是我们一起学习! 在之前面试的时候我自己也经常会遇到一些vue原理的问题, 我也总结了下自己的经常的用到的,方便自己学习,今天也给大家分享 ...
- vue 渲染函数处理slot_vue render 渲染函数
vue render 渲染函数 经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...
- Vue渲染函数render
渲染函数render render 函数 跟 模板(template) 都是用来创建 html 模板的,但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复,这时候就可以用 rend ...
- 面试官:你封装过组件吗?说一下你是在vue项目里如何封装组件的?
你封装过组件吗?? 说一下组件封装???? 你在项目中是如何封装组件的????? 以上问题是面试官,最常问到的问题?那么你应该如何回答呢? 答: 我用vue开发的所有项目,都是采用组件化的思想开发的. ...
- vue渲染函数h的使用
h的使用 渲染函数参数 {title: '操作',dataIndex: 'action',customRender ({ text, record, index, column }) {return ...
最新文章
- android datepicker使用方法,android DatePicker
- 开源中国app说什么 旁边的那个图标是什么drawable
- pytorch dataloader num_workers参数设置导致训练阻塞
- 华为云客户端_效果图云渲染已成趋势,云渲染如何选择?
- MyBatis中动态SQL
- 【华为云动态】华为云开放日发布云专家激励计划,要将开发者“宠”上天
- 松下抛却Jungle掌机研发项目
- 在QT中使用同步阻塞式HTTP请求的方法
- 牛逼!在IDEA里搞Spring Boot Mybatis反向工程,太爽咯~
- 比较好用的mysql可视化工具-----pycharm连接mysql图文教程
- 蓝屏,BAD_SYSTEM_CONFIG_INFO,0x00000074故障
- 地统计之检查空间自相关
- tif(tiff)图片格式批量转换JPG图片格式转换器
- 硕士论文结构分析与如何写作
- 汉诺塔问题模拟实现代码
- 抖音app开发时,在录制视频添加背景音乐功能实现流程
- 上门洗车软件的核心功能和技术选型
- SMBIOS信息概述 -- DMI
- 非线性方程求根——牛顿迭代法
- 如何获取网页高度、屏幕高度、滚动高度?