揭秘,Vue3 性能优化之 Non-reactive Object

2022-08-12
阅读 5 分钟
2.3k
在 Vue2 中,有一个老生常谈的话题,如何避免 data 中一个复杂对象(自身或属性对象)被默认被创建为响应式(Non-reactive Object)的过程? 举个例子,有一个 Vue2 的组件的 data:
封面图

Vue3 Ref 语法糖,告别 .value 的写法

2021-09-15
阅读 11 分钟
16.8k
近期,Vue3 提了一个 Ref Sugar 的 RFC,即 ref 语法糖,目前还处理实验性的(Experimental)阶段。在 RFC 的动机(Motivation)中,Evan You 介绍到在 Composition API 引入后,一个主要未解决的问题是 refs 和 reactive 对象的使用。而到处使用 .value 可能会很麻烦,如果在没使用类型系统的情况下,也会很容易错过:
封面图

Vue3 的 SFC Style CSS Variable Injection 提案实现的背后

2021-06-09
阅读 10 分钟
9k
在 5月22日的 Vue Conf 21 上,尤大介绍在介绍单文件组件(SFC)在编译阶段的优化的时候,讲了 SFC Style CSS Variable Injection 这个提案,即 <style> 动态变量注入。简单地讲,它可以让你在 <style> 中通过 v-bind 的方式使用 <script> 中定义好的变量。
封面图

刨根问底,揭开 Vue 中 Scope CSS 实现的幕后(原理)

2021-03-20
阅读 9 分钟
6.8k
我想大家都对 Vue 的 Scope CSS 耳熟能详了,但是说起 Vue 的 Scope CSS 实现的原理,很多人应该会说不就是给 HTML、CSS 添加属性吗 🙃️?
封面图

Vue 3 中 v-if 和 v-show 指令实现的原理

2021-01-17
阅读 9 分钟
15k
又回到了经典的一句话:“知其然,而后使其然”。相信大家对 Vue 提供 v-if 和 v-show 指令的使用以及对应场景应该都滚瓜烂熟了。但是,我想仍然会有很多同学对于 v-if 和 v-show 指令实现的原理存在知识空白。

【前端进阶】使用 Vue3 的 complier-core 玩转模版编译

2020-11-09
阅读 5 分钟
4.3k
近期,在团队内推自动化表单,主要是为了去掉后台项目中繁多的表单代码。众所周知,表单一直都是后台代码的一个痛点,因为它的代码就是一个字 “长”...所以,作为一名 21 世纪的前端工程师,我们要时刻反省如何提效(能不写代码就不写代码)。

Vue3 中实例挂载(mount)过程

2020-10-03
阅读 8 分钟
9.8k
在「Vue3」中,创建一个组件实例由 createApp 「API」完成。创建完一个组件实例,我们需要调用 mount() 方法将组件实例挂载到页面中:

Vue3 内置组件 teleport 是什么“来头”?

2020-09-27
阅读 5 分钟
3.3k
上一篇文章,我们讲了「Vue3」 runtime 和 compile 结合的 patch 过程。似乎,由于文章内容太过晦涩的原因,并没有收到很多同学的反馈。但是,其实这里我想说的是源码就是这样,初见时如陌生人一般,再见时如初恋,既熟悉又怀念。

揭秘,Vue3 compile 和 runtime 结合的 patch 过程

2020-09-24
阅读 10 分钟
6.2k
说起「Vue3」的 patch 过程,其中最为津津乐道的就是靶向更新。靶向更新,顾名思义,即更新的过程是带有目标性的、直接性的。而,这也是和静态节点提升一样,是「Vue3」针对 VNode 更新性能问题的一大优化。

从编译过程,理解 Vue3 静态节点提升

2020-09-20
阅读 10 分钟
8.1k
静态节点提升是「Vue3」针对 VNode 更新过程性能问题而提出的一个优化点。众所周知,在大型应用场景下,「Vue2.x」的 patchVNode 过程,即 diff 过程是非常缓慢的,这是一个十分令人头疼的问题。

Vue3.0 的 reactive API 定义和源码实现

2020-04-05
阅读 5 分钟
6.8k
今年,对于从事前端开发的同学而言,很是期待的一件事就是 Vue3.0 的发布。但是,Vue3.0 离发布还是有点时间的,并且正式发布也不代表我们就马上就可以用于业务开发。它还需要完善相应的生态工具。不过正式使用是一码事,我们自己玩又是一码事(hh)。

4k+ 字分析 Vue 3.0 响应式原理(依赖收集和派发更新)

2020-03-30
阅读 15 分钟
10.2k
前几天写了一篇关于Vue 3.0 reactive API 源码实现的文章,发现大家还是蛮有兴趣对于源码这一块的。阅读的人数虽然不多,不过还是阔以的!但是,在上篇文章中是没有分析 Proxy 是如何配合 Effect 实现响应式的原理,即依赖收集和派发更新的过程。