![](https://img-blog.csdnimg.cn/0546117c64cc4d49bfd3c4f3e3e0bf72.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue.js 3.0源码
文章平均质量分 90
Vue.js 3.0源码
吉帅振的网络日志
前端开发
展开
-
【Vue.js 3.0源码】Vue Router:如何实现一个前端路由?
相信对有一定基础的前端开发工程师来说,路由并不陌生,它最初源于服务端,在服务端中路由描述的是URL与处理函数之间的映射关系。而在Web前端单页应用SPA中,路由描述的是URL与视图之间的映射关系,这种映射是单向的,即URL变化会引起视图的更新。相比于后端路由,前端路由的好处是无须刷新页面,减轻了服务器的压力,提升了用户体验。目前主流支持单页应用的前端框架,基本都有配套的或第三方的路由系统。......原创 2022-08-02 09:53:14 · 910 阅读 · 0 评论 -
【Vue.js 3.0源码】Transition 组件:过渡动画的实现原理是怎样的?
作为一名前端开发工程师,平时开发页面少不了要写一些过渡动画,通常可以用CSS脚本来实现,当然一些时候也会使用JavaScript操作DOM来实现动画。那么,如果我们使用Vue.js技术栈,有没有好的实现动画的方式呢?Vue.js提供了内置的Transition组件,它可以让我们轻松实现动画过渡效果。Transition组件是如何渲染的,如何执行过渡动画和相应的钩子函数的,以及当两个视图切换时,模式的工作原理是怎样的。...原创 2022-08-01 10:55:46 · 924 阅读 · 0 评论 -
【Vue.js 3.0源码】KeepAlive 组件:如何让组件在内存中缓存和调度?
当flag为true的时候,就会触发组件A的渲染,然后我们点击按钮把flag修改为false,又会触发组件A的卸载,及组件B的渲染。?0})1}),onClick_ctx.flag)}我们使用了KeepAlive组件对这两个组件做了一层封装,KeepAlive是一个抽象组件,它并不会渲染成一个真实的DOM,只会渲染内部包裹的子节点,并且让内部的子组件在切换的时候,不会走一整套递归卸载和挂载DOM的流程,从而优化了性能。nametrue,true,?}...原创 2022-07-29 11:28:39 · 534 阅读 · 0 评论 -
【Vue.js 3.0源码】Teleport 组件:如何脱离当前组件渲染子组件?
Vue.js的核心思想之一是组件化,组件就是DOM的映射,我们通过嵌套的组件构成了一个组件应用程序的树。但是,有些时候组件模板的一部分在逻辑上属于该组件,而从技术角度来看,最好将模板的这一部分移动到应用程序之外的其他位置。一个常见的场景是创建一个包含全屏模式的对话框组件。在大多数情况下,我们希望对话框的逻辑存在于组件中,但是对话框的定位CSS是一个很大的问题,它非常容易受到外层父组件的CSS影响。data(){...原创 2022-07-28 10:04:02 · 369 阅读 · 0 评论 -
【Vue.js 3.0源码】v-model双向绑定的实现过程
很多人会把Vue.js的响应式原理误解为双向绑定,其实响应式原理是一种单向行为,它是数据到DOM的映射。而真正的双向绑定,除了数据变化,会引起DOM的变化之外,还应该在操作DOM改变后,反过来影响数据的变化。v-model也不是可以作用到任意标签,它只能在一些特定的表单标签如input、select、textarea和自定义组件中使用。"onUpdate])}''value'change'return}}})})}if(!lazy){}},return。...原创 2022-07-27 10:27:22 · 554 阅读 · 0 评论 -
【Vue.js 3.0源码】指令完整的生命周期
Vue.js的核心思想之一是数据驱动,数据是DOM的映射。在大部分情况下,不用操作DOM的,但是这并不意味着你不能操作DOM。有些时候,我们希望手动去操作某个元素节点的DOM,比如当这个元素节点挂载到页面的时候通过操作底层的DOM来做一些事情。为了支持这个需求,Vue.js提供了指令的功能,它允许我们自定义指令,作用在普通的DOM元素上。//注册全局v-focus指令//挂载的钩子函数}})//当然,我们也可以在组件内部局部注册directives{focus。...原创 2022-07-26 09:59:32 · 303 阅读 · 1 评论 -
【Vue.js 3.0源码】插槽实现内容分发
有些时候我们希望子组件模板中的部分内容可以定制化,这个时候使用Props就显得不够灵活和易用了。因此,Vue.js受到WebComponent草案的启发,通过插槽的方式实现内容分发,它允许我们在父组件中编写DOM并在子组件渲染时把DOM添加到子组件的插槽中,使用起来非常方便。了解插槽的实现原理,知道父组件和子组件在实现插槽feature的时候各自做了哪些事情。...原创 2022-07-25 10:49:55 · 267 阅读 · 0 评论 -
【Vue.js 3.0源码】Props 的初始化和更新流程
页面可以由一个个组件构建而成,组件是一种抽象的概念,它是对页面的部分布局和逻辑的封装。为了让组件支持各种丰富的功能,Vue.js设计了Props特性,它允许组件的使用者在外部传递Props,然后组件内部就可以根据这些Props去实现各种各样的功能。了解Props是如何被初始化的,如何被校验的,区分Props配置和Props传值这两个概念。...原创 2022-07-22 12:09:41 · 718 阅读 · 0 评论 -
【Vue.js 3.0源码】模板解析构造 AST 抽象语法树完整流程
Vue.js3.0的编译场景分服务端SSR编译和web编译,本文我们只分析web的编译。null}))}compile函数支持两个参数,第一个参数template是待编译的模板字符串,第二个参数options是编译的一些配置信息。compile内部通过执行baseCompile方法完成编译工作,可以看到baseCompile在参数options的基础上又扩展了一些配置。//解析template生成ASTtemplate//AST转换[],)...原创 2022-07-20 11:42:38 · 299 阅读 · 0 评论 -
【Vue.js 3.0源码】依赖注入子孙组件共享数据
Vue.js为我们提供了很多组件通讯的方式,常见的是父子组件通过prop传递数据。但是有时,我们希望能跨父子组件通讯,比如,无论组件之间嵌套多少层级,我都希望在后代组件中能访问它们祖先组件的数据。providereturn{foothis.foo}}}inject['foo']}这样,我们就可以在子孙组件中通过this.foo访问祖先组件提供的数据,以达到组件通讯的目的。}}return{theme}}}...原创 2022-07-19 13:32:37 · 165 阅读 · 0 评论 -
【Vue.js 3.0源码】各个生命周期的执行时机和应用场景
Vue.js组件的生命周期包括创建、更新、销毁等过程。在这些过程中也会运行叫生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。在Vue.js2.x中,我们通常会在组件对象中定义一些生命周期钩子函数,到了Vue.js3.0,依然兼容Vue.js2.x生命周期的语法,但是CompositionAPI提供了一些生命周期函数的API,让我们可以主动注册不同的生命周期。//Vue.js2.x定义生命周期钩子函数//做一些初始化工作},//可以拿到DOM节点。...原创 2022-07-18 15:58:38 · 939 阅读 · 0 评论 -
【Vue.js 3.0源码】响应式之侦听器的实现原理和使用场景(下)
回调函数是以一种调度的方式执行的,特别是当flush不是sync时,它会把回调函数执行的任务推到一个异步队列中执行。接下来,我们就来分析异步执行队列的设计。侦听器内部实现原理,了解侦听器支持的几种配置参数的作用,以及异步任务队列的设计原理。常见应用场景如何用watchAPI观测数据的变化去执行一些逻辑,如何利用watchEffectAPI去注册一些副作用函数,如何去注册无效回调函数,以及如何停止一个正在运行的watcher。...原创 2022-07-15 09:41:30 · 275 阅读 · 0 评论 -
【Vue.js 3.0源码】响应式之侦听器的实现原理和使用场景(上)
自我介绍:大家好,我是吉帅振的网络日志;微信公众号:吉帅振的网络日志;前端开发工程师,工作4年,去过上海、北京,经历创业公司,进过大厂,现在郑州敲代码。在平时的开发工作中,我们经常使用侦听器观察某个数据的变化然后去执行一段逻辑。在 Vue.js 2.x 中,可以通过 watch 选项去初始化一个侦听器,称作 watcher:当然你也可以通过 $watch API 去创建一个侦听器:与 watch 选项不同,通过 $watch API 创建的侦听器 watcher 会返回一个 unwatch 函数,可以随原创 2022-07-14 11:33:43 · 242 阅读 · 0 评论 -
【Vue.js 3.0源码】响应式之计算属性computed
自我介绍:大家好,我是吉帅振的网络日志;微信公众号:吉帅振的网络日志;前端开发工程师,工作4年,去过上海、北京,经历创业公司,进过大厂,现在郑州敲代码。计算属性是 Vue.js 开发中一个非常实用的 API ,它允许用户定义一个计算方法,然后根据一些依赖的响应式数据计算出新值并返回。当依赖发生变化时,计算属性可以自动重新计算获取新值,所以使用起来非常方便。我们举个简单的例子:从代码中可以看到,我们先使用 ref API 创建了一个响应式对象 count,然后使用 computed API 创建了另一个响应原创 2022-07-13 11:53:45 · 680 阅读 · 0 评论 -
【Vue.js 3.0源码】响应式之内部实现原理(下)
自我介绍:大家好,我是吉帅振的网络日志;微信公众号:吉帅振的网络日志;前端开发工程师,工作4年,去过上海、北京,经历创业公司,进过大厂,现在郑州敲代码。【Vue.js 3.0源码】响应式之内部实现原理(上) 中说到 Vue.js 3.0 中引入 reactive API,它可以把对象数据变成响应式,收集依赖的 get 函数,接下来我们来分析 reactive API 中需要关注的另一个内容——派发通知的过程。派发通知发生在数据更新的阶段 ,由于我们用 Proxy API 劫持了数据对象,所以当这个响应式对象原创 2022-07-12 10:48:50 · 200 阅读 · 0 评论 -
【Vue.js 3.0源码】响应式之内部实现原理(上)
自我介绍:大家好,我是吉帅振的网络日志;微信公众号:吉帅振的网络日志;前端开发工程师,工作4年,去过上海、北京,经历创业公司,进过大厂,现在郑州敲代码。除了组件化,Vue.js 另一个核心设计思想就是响应式。它的本质是当数据变化后会自动执行某个函数,映射到组件的实现就是,当数据变化后,会自动触发组件的重新渲染。响应式是 Vue.js 组件化更新渲染的一个核心机制。在 Vue.js 2.x 中,Watcher 就是依赖,有专门针对组件渲染的 render watcher。注意这里有两个流程,首先是依赖收集流程原创 2022-07-11 10:24:01 · 147 阅读 · 0 评论 -
【Vue.js 3.0源码】Composition API之组件渲染初始化过程(下)
自我介绍:大家好,我是吉帅振的网络日志;微信公众号:吉帅振的网络日志;前端开发工程师,工作4年,去过上海、北京,经历创业公司,进过大厂,现在郑州敲代码。我们具体来看一下 callWithErrorHandling 函数的实现:可以看到,它其实就是对 fn 做的一层包装,内部还是执行了 fn,并在有参数的时候传入参数,所以 setup 的第一个参数是 instance.props,第二个参数是 setupContext。函数执行过程中如果有 JavaScript 执行错误就会捕获错误,并执行 handle原创 2022-07-09 09:34:21 · 254 阅读 · 0 评论 -
【Vue.js 3.0源码】Composition API之组件渲染初始化过程(上)
自我介绍:大家好,我是吉帅振的网络日志;微信公众号:吉帅振的网络日志;前端开发工程师,工作4年,去过上海、北京,经历创业公司,进过大厂,现在郑州敲代码。一、前言:Vue.js 3.0 设计了一个很强大的 API —— Composition API,它主要用来优化代码逻辑的组织和复用。从语法上看,它提供了一个 setup 启动函数作为逻辑组织的入口,暴露了响应式 API 为用户所用,也提供了生命周期函数以及依赖注入的接口,这让我们不依托于 Options API 也可以完成一个组件的开发,并且更有利于代码逻原创 2022-07-08 11:35:47 · 301 阅读 · 0 评论 -
【Vue.js 3.0源码】直击Vue核心的实现之组件更新完整的DOM diff流程(下)
自我介绍:大家好,我是吉帅振的网络日志;微信公众号:吉帅振的网络日志;前端开发工程师,工作4年,去过上海、北京,经历创业公司,进过大厂,现在郑州敲代码。Vue.js 3.0源码专栏【Vue.js 3.0源码】一文看懂Vue.js 3.0的优化【Vue.js 3.0源码】直击Vue核心的实现之组件渲染vnode到真实DOM一、前言新子节点数组相对于旧子节点数组的变化,无非是通过更新、删除、添加和移动节点来完成,而核心 diff 算法,就是在已知旧子节点的 DOM 结构、vnode 和新子节点的 vnode 情原创 2022-07-07 11:42:26 · 290 阅读 · 0 评论 -
【Vue.js 3.0源码】直击Vue核心的实现之组件更新完整的DOM diff流程(上)
自我介绍:大家好,我是吉帅振的网络日志;微信公众号:吉帅振的网络日志;前端开发工程师,工作4年,去过上海、北京,经历创业公司,进过大厂,现在郑州敲代码。Vue.js 3.0源码专栏【Vue.js 3.0源码】一文看懂Vue.js 3.0的优化【Vue.js 3.0源码】直击Vue核心的实现之组件渲染vnode到真实DOM一、前言组件是由模板、组件描述对象和数据构成的,数据的变化会影响组件的变化。组件的渲染过程中创建了一个带副作用的渲染函数,当数据变化的时候就会执行这个渲染函数来触发组件的更新。那么接下来,我原创 2022-07-06 11:31:14 · 508 阅读 · 0 评论 -
【Vue.js 3.0源码】直击Vue核心的实现之组件渲染vnode到真实DOM
自我介绍:大家好,我是吉帅振的网络日志;微信公众号:吉帅振的网络日志;前端开发工程师,工作4年,去过上海、北京,经历创业公司,进过大厂,现在郑州敲代码。Vue.js 3.0源码专栏【Vue.js 3.0源码】一文看懂Vue.js 3.0的优化相信作为一个 Vue.js 的开发者,最熟悉的应该就是组件了,我们开发 Vue.js 的项目,大部分时间都是在写组件,组件系统是 Vue.js 的一个重要概念,它是一种对 DOM 结构的抽象,我们可以使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的原创 2022-07-05 11:17:25 · 648 阅读 · 0 评论 -
【Vue.js 3.0源码】一文看懂Vue.js 3.0的优化
自我介绍:大家好,我是吉帅振的网络日志;微信公众号:吉帅振的网络日志;前端开发工程师,工作4年,去过上海、北京,经历创业公司,进过大厂,现在郑州敲代码。一、源码优化首先是源码优化,也就是小右对于 Vue.js 框架本身开发的优化,它的目的是让代码更易于开发和维护。源码的优化主要体现在使用 monorepo 和 TypeScript 管理和开发源码,这样做的目标是提升自身代码可维护性。接下来我们就来看一下这两个方面的具体变化。首先,源码的优化体现在代码管理方式上。Vue.js 2.x 的源码托管在 src 目原创 2022-07-04 15:48:04 · 424 阅读 · 0 评论