![](https://img-blog.csdnimg.cn/20200330103928187.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue 3 源码解析
文章平均质量分 96
Vue 3 源码解析
fewuliu
决定一个人成功与否的因素不是你现在站立的高度,而是你的触底反弹力。
展开
-
揭秘,Vue3 性能优化之 Non-reactive Object
在 Vue2 中,有一个老生常谈的话题,如何避免data中一个复杂对象(自身或属性对象)被默认被创建为响应式(Non-reactive Object)的过程?举个例子,有一个 Vue2 的组件的data:原创 2022-08-07 14:41:48 · 603 阅读 · 1 评论 -
Vue3 Ref 语法糖,告别 .value 的写法
前言近期,Vue3 提了一个 Ref Sugar 的 RFC,即 ref 语法糖,目前还处理实验性的(Experimental)阶段。在 RFC 的动机(Motivation)中,Evan You 介绍到在 Composition API 引入后,一个主要未解决的问题是 refs 和 reactive 对象的使用。而到处使用 .value 可能会很麻烦,如果在没使用类型系统的情况下,也会很容易错过:let count = ref(1)function add() { count.value++}原创 2021-09-16 10:26:50 · 6606 阅读 · 7 评论 -
Vue 3 的 SFC Style CSS Variable Injection 提案实现的背后
前言在 5月22日的 Vue Conf 21 上,尤大介绍在介绍单文件组件(SFC)在编译阶段的优化的时候,讲了 SFC Style CSS Variable Injection 这个提案,即 <style> 动态变量注入。简单地讲,它可以让你在 <style> 中通过 v-bind 的方式使用 <script> 中定义好的变量。这么一听,似乎很像 CSS In JS?确实,从使用的角度是和 CSS In JS 很类似。但是,大家都知道的是 CSS In JS 在一些原创 2021-06-07 14:55:42 · 3112 阅读 · 0 评论 -
Vue 3 中 v-if 和 v-show 指令实现的原理(源码分析)
前言又回到了经典的一句话:“知其然,而后使其然”。相信大家对 Vue 提供 v-if 和 v-show 指令的使用以及对应场景应该都滚瓜烂熟了。但是,我想仍然会有很多同学对于 v-if 和 v-show 指令实现的原理存在知识空白。所以,今天就让我们来一起了解一番 v-if 和 v-show 指令实现的原理~v-if在之前 【Vue3 源码解读】从编译过程,理解静态节点提升 一文中,我给大家介绍了 Vue 3 的编译过程,即一个模版会经历 baseParse、transform、generate 这原创 2021-01-17 16:04:26 · 11451 阅读 · 2 评论 -
【前端进阶】使用 Vue3 的 complier-core 玩转模版编译
前言 ????我是五柳,喜欢创新、捣鼓源码,专注于 Vue3 源码、Vite 源码、前端工程化等技术领域分享,欢迎关注我的「微信公众号:Code center」。近期,在团队内推自动化表单,主要是为了去掉后台项目中繁多的表单代码。众所周知,表单一直都是后台代码的一个痛点,因为它的代码就是一个字 “长”…所以,作为一名 21 世纪的前端工程师,我们要时刻反省如何提效(能不写代码就不写代码)。自动化表单的主要设计理念是围绕一个渲染器,通过配置对象来生成对应的表单。那么,这个时候就遇到了一个问题,对象和原创 2020-11-10 22:34:05 · 1894 阅读 · 0 评论 -
深度解读 Vue3 源码 | 组件创建过程
前言在「Vue3」中,创建一个组件实例由 createApp 「API」完成。创建完一个组件实例,我们需要调用 mount() 方法将组件实例挂载到页面中:createApp({ ...}).mount("#app");在源码中整个组件的创建过程:mountComponent() 实现的核心是 setupComponent(),它可以分为两个过程:开始安装,它会初始化 props、slots、调用 setup()、验证组件和指令的合理性。结束安装,它会初始化 computed、原创 2020-10-03 18:43:41 · 1359 阅读 · 0 评论 -
深度解读 Vue3 源码 | 内置组件 teleport 是什么“来头”?
前言上一篇文章,我们讲了「Vue3」 runtime 和 compile 结合的 patch 过程。似乎,由于文章内容太过晦涩的原因,并没有收到很多同学的反馈。但是,其实这里我想说的是源码就是这样,初见时如陌生人一般,再见时如初恋,既熟悉又怀念。所以,这一篇文章,我打算讲个「Vue3」中轻松愉快的设计点——内置组件 teleport。那么,这次我们将会从使用角度和源码角度去深入了解 teleport 组件是如何实现的?什么是 teleport 组件当然,如果已经懂得怎么使用 teleport 组件原创 2020-09-27 02:32:06 · 851 阅读 · 1 评论 -
揭秘,Vue3 compile 和 runtime 结合的 patch 过程(源码分析)
前言在上一篇文章中,我们分析了在编译过程静态节点的提升。并且,在文章的结尾也说了,下一篇文章将会介绍 patch 过程。说起「Vue3」的 patch 过程,其中最为津津乐道的就是靶向更新。靶向更新,顾名思义,即更新的过程是带有目标性的、直接性的。而,这也是和静态节点提升一样,是「Vue3」针对 VNode 更新性能问题的一大优化。那么,今天,我们就来揭秘「Vue3」compile 和 runtime 结合的 patch过程 究竟是如何实现的!什么是 shapeFlag说起「Vue3」的 patc原创 2020-09-24 12:45:12 · 962 阅读 · 0 评论 -
从编译过程,理解 Vue3 静态节点提升过程(源码分析)
前言静态节点提升是「Vue3」针对 VNode 更新过程性能问题而提出的一个优化点。众所周知,在大型应用场景下,「Vue2.x」的 patchVNode 过程,即 diff 过程是非常缓慢的,这是一个十分令人头疼的问题。虽然,对于面试常问的 diff 过程在一定程度上是减少了对 DOM 的直接操作。但是,这个减少是有一定成本的。因为,如果是复杂应用,那么就会存在父子关系非常复杂的 VNode,而这也就是 diff 的痛点,它会不断地递归调用 patchVNode,不断堆叠而成的几毫秒,最终就会造成 VN原创 2020-09-20 12:38:38 · 1312 阅读 · 0 评论 -
Vue3.0 的 reactive API 定义和源码实现
引言今年,对于从事前端开发的同学而言,很是期待的一件事就是 Vue3.0的发布。但是,Vue3.0离发布还是有点时间的,并且正式发布也不代表我们就马上就可以用于业务开发。它还需要完善相应的生态工具。不过正式使用是一码事,我们自己玩又是一码事(hh)。Vue3.0特地准备了一个尝鲜版的项目供大家体验 Vue3.0即将会出现的一些 API,例如 setup、reactive、toRefs、read...原创 2020-03-23 11:24:51 · 1675 阅读 · 0 评论 -
4k+ 字分析 Vue 3.0 响应式原理(依赖收集和派发更新)
引言前几天写了一篇关于Vue 3.0 reactive API 源码实现的文章,发现大家还是蛮有兴趣对于源码这一块的。阅读的人数虽然不多,但是 200 多次阅读,还是阔以的!并且,在当时阿里的一位前辈也指出了文章存在的不足,就是没有分析 Proxy 是如何配合 Effect 实现响应式的原理,即依赖收集和派发更新的过程。所以,这次我们就来彻底了解一下,Vue 3.0 依赖收集和派发更新的整个过...原创 2020-03-30 10:36:31 · 697 阅读 · 1 评论