Vue相关
文章平均质量分 89
玉案轩窗
这个作者很懒,什么都没留下…
展开
-
Vue3源码之watch相关
前言Vue3版本中关于定义watch相关的有4处,具体有watch、watchEffect、$watch、watch选项。实际上$watch和watch选项这两种方式与Vue2中并没有什么不同,实际上也是为了兼容Vue2.x版本的处理。本文主要关注于watch和watchEffect这两个函数式API,旨在了解相关处理逻辑以及加深对Vue3中副作用effect的细节理解。watchwatch API本身是一个函数,实现对指定数据源的侦听,其源码如下:function watch(source, cb原创 2021-07-20 22:35:04 · 603 阅读 · 1 评论 -
Vue3源码之setup
前言组合式API是Vue3一个非常亮眼的功能,它的出现是为了解决复杂组件代码的可复用性、可阅读性和可理解性的问题。当说起组合式API,实际上最先想起的就是setup选项,组件中的setup选项就是组合式API的基础,它充当组合API的入口点。区别于Vue2中使用选项组织代码,组合式实际上是对在setup中使用API这种方式的一种描述,如果你愿意实际上你可以在setup选项中完成绝大多数的功能逻辑,例如注册生命周期、定义computed和watch等等。本文旨在梳理setup具体的执行逻辑、返回的结果存储原创 2021-07-19 13:56:11 · 706 阅读 · 0 评论 -
Vue3源码之Refs
前言Vue3的响应性API除了reactive、readonly等基础的,还提供了相关Refs API其中包括ref、customRef等。在之前的[响应系统](https://blog.csdn.net/s1879046/article/details/118757873)的文章中,对reactive的逻辑有较为详细的分析,本文会对梳理相关API的逻辑,对比reactive API看看二者的不同,加强对Refs API使用的理解。原创 2021-07-18 14:49:06 · 947 阅读 · 1 评论 -
Vue3源码之响应系统
前言实际上在Vue3项目未发布之前,作者就说明了使用Proxy来替换Object.defineProperty来重构Vue的响应式原理,Proxy具有更高的控制粒度,可以解决Object.defineProperty存在的一些问题,例如动态属性添加、数组length设置等带来的响应式问题。Vue2中采用发布订阅模式(通过Dep对象与Watcher对象建立联系)构建整个响应式系统,而Vue3这个过程是如何建立的呢?本文就是通过理清这个过程,同时聊聊官方提供的不同的响应式API。data选项的响应式处理原创 2021-07-17 17:29:32 · 468 阅读 · 1 评论 -
Vue3源码之mount挂载
前言当调用Vue.createApp后就会生成一个应用上下文实例,该实例暴露了相关功能API,其中就包含mount函数,该函数实现组件挂载。简易实例如下:const Counter = { data() { return { counter: 0 } }}Vue.createApp(Counter).mount('#counter')本文就是梳理mount函数的逻辑,对比Vue2来聊聊二者的不同处理。mount处理逻辑在之前的文章Vue3源码之creat原创 2021-07-14 11:55:16 · 12351 阅读 · 0 评论 -
Vue3源码之createApp
前言Vue3版本源码架构与Vue2版本存在非常大的不同,从使用方式的角度来讲,对它们可以简单概括为:Vue2版本是命令方式使用,通过new Vue去创建Vue实例,组件中使用选项组合代码逻辑Vue3版本将命令和功能API函数化,通过createApp去创建应用实例,组件中通过组合式API和选项组合代码这里需要区分与Vue2中的一些概念,Vue2中Vue实例实际上就是组件实例,而Vue3中createApp则是创建一个上下文,称之为应用实例。组件实例是通过其他方式来获得的,例如Vue3中mount原创 2021-07-13 16:22:14 · 10392 阅读 · 1 评论 -
简单聊聊Vue3项目结构及其源码阅读方式
前言Vue3版本相对于Vue2版本底层做了许多的优化,相关的兼容性和不兼容性功能的改变在其官网有明确的说明,这里就不多说了。本文主要是对比Vue2聊聊下面两个方面:vue3项目结构相关vue3源码阅读方式项目结构对于Vue3项目本身的结构,个人觉得主要关注点有两点:使用TypeScriptMonorepo项目管理形式使用TypeScriptVue2项目使用Flow(Flow是JavaScript代码的静态类型检查工具),而Vue3中则使用TypeScript(JavaScript的原创 2021-07-12 20:01:49 · 718 阅读 · 0 评论 -
Vue之异步更新细节
前言 Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的原创 2021-02-01 15:55:01 · 882 阅读 · 0 评论 -
vue-cli@2.x源码阅读
前言vue-cli是vue项目的脚手架工具,使用vue-cli可以快速创建项目。vue-cli的2.x版本和3.x版本在使用上有很大的不同,本篇文章旨在通过vue-cli源码学习了解脚手架的构成实现,所以选择相对简单的vue-cli的2.x版本(具体版本是2.9.6)。在2.x版本最常用的命令是vue和vue init,下面的流程梳理主要就是针对这两个命令来梳理的。vue命令的逻辑在vue-cli项目的package.json文件中定义了命令对应的文件位置,具体如下:"bin": { "vue"原创 2021-01-19 14:39:56 · 566 阅读 · 1 评论 -
Vue之watch监听的原理
前言 vue选项中props、data、watch、methods、computed,其中props、data、computed都通过Object.defineProperty进行数据拦截从而实现响应式。对于选项watch,知道其作用是监听对应key做相关处理,之前一系列文章都没有关注watch背后的实现逻辑,这也是本文的目的。原创 2020-10-16 15:34:36 · 5579 阅读 · 0 评论 -
Vue细节之$data的细节
前言$data是Vue实例中的实例属性,表示Vue实例观察的数据对象。实际上在Vue官网对这部分有较为详细的描述,这里就不再赘述了(具体可看官网的描述Vue选项/数据)。本篇文章从源码层次来梳理$data背后的逻辑,实际上就是一个问题:假设存在属性name,为什么修改vm.$data.name与vm.name可以达到相同效果?实例属性$data假设存在属性name,为什么修改vm.$data.name与vm.name可以达到相同效果?以此问题为出发点,假设data中存在name,实际上就是原创 2020-09-16 12:52:16 · 9356 阅读 · 0 评论 -
Vue源码之指令细节
前言 指令是Vue提供的复用手段之一,除了内置的v-if、v-show、v-text等还支持自定义指令。Vue中代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。本文是通过源码来梳理指令的执行流程,从而加深对指令的理解。原创 2020-08-02 13:53:51 · 326 阅读 · 0 评论 -
Vue源码之transition细节
前言 transition是Vue提供的内置组件,用于定义单个元素或组件的过渡效果。transition组件只会把过渡效果应用到其包裹的内容上,而不会额外渲染 DOM 元素,也不会出现在可被检查的组件层级中。原创 2020-07-31 14:10:28 · 964 阅读 · 0 评论 -
Vue源码之生命周期细节
前言 Vue实例被创建过程中会经历一系列的初始化过程,同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。Vue官网的生命周期流程图有着非常重要的参考意义,基本上概括了整个vue实例创建过程中重要点。原创 2020-07-28 11:55:33 · 181 阅读 · 0 评论 -
Vue之keep-alive细节
前言 keep-alive组件是Vue的内部组件,Vue官方对于keep-alive的描述是:keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。keep-alive是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。当组件在keep-alive内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行原创 2020-07-23 19:40:06 · 840 阅读 · 1 评论 -
Vue之内部组件的生成
前言 Vue提供一些内部组件用于相关处理,例如keep-alive、transition等。不同的内部组件有不同的处理方式,通过Vue官网对不同内部组件的描述信息得到一些重要说明。本文主要通过源码层次来看Vue对于内部组件的处理,这里不具体看某一个内部组件的具体处理,而且从Vue整个过程看内部组件的生成,实际上就是看三种情况的处理:原创 2020-07-18 13:12:24 · 953 阅读 · 0 评论 -
Vue之HookEvent
前言 什么是HookEvent?实际上是Vue中提供的一类与生命周期相关的事件,这些事件的触发与生命周期函数调用存在关联。我们知道Vue2.x提供了一些生命周期函数,用于提供开发者对于特殊逻辑点的逻辑处理。本文内容实际上分为2个部分原创 2020-07-16 17:39:17 · 1274 阅读 · 0 评论 -
Vue之diff算法
前言Vue通过双向绑定来实现数据驱动视图更新,当数据更新会触发Dep对象notify通知所有的订阅者Watcher对象,Watcher对象最后会调用run来执行Watcher对象的getter方法。其中需要注意的是在挂载阶段创建的一个Watcher对象的getter就是用于updateComponent,其中最主要方法就是调用Vue.prototype._update,而该实例方法主要进行调用patch函数进行节点的diff比较。patch函数逻辑通过阅读Vue源码可知,patch函数的逻辑实际上主原创 2020-06-26 15:45:05 · 1353 阅读 · 1 评论 -
Vue之v-model
前言上一篇文章主要了解Vue的数据对象的构建,实际主要是attrs、props和DomProps的比较,而在template形式中有个关键点就是特殊属性的处理,而数据属性中特殊属性的处理实际上就会涉及到v-model语法糖。本文的目标有两个:v-model语法糖的实现逻辑涉及特殊属性的v-model的特殊处理v-model实现逻辑从简单实例出发,来梳理v-model的处理逻辑:&...原创 2019-07-24 20:50:31 · 3299 阅读 · 0 评论 -
Vue之数据对象
前言本篇文章旨在学习Vue对于相关属性或特性的处理,同时学习HTML特性和DOM属性的区别和联系,实际上涉及到以下内容:HTML特性和DOM属性之间的联系与区别Vue的数据对象中涉及的HTML特性、DOM属性、组件prop、特殊特性Vue中对于4种属性或特性处理所涉及的相关逻辑HTML特性和DOM属性实际上对于HTML特性和DOM属性,之前对于其的理解是相同的东西,实际上它们是不同...原创 2019-07-20 13:05:24 · 3457 阅读 · 0 评论 -
Vue UI库之基本构建配置说明
前言目前正在着手构建的Vue UI库vui目前已完成主要的webpack构建过程,故以此文章说明构建过程中关键点。具体说明还是依据package.json的配置来逐一说明,package.json的主要配置如下:{ "files": [ "dist", "src", "packages" ], "srcipts": { "dev": "webpa...原创 2019-05-30 21:00:41 · 935 阅读 · 0 评论 -
Vue UI库之初始构建项目结构
前言之前梳理了Vue以及Element框架的基本项目结构,就是为了之后构建个人的Vue UI(PC端)库做准备,即vui库的构建主要是学习参考vue和element(也会参考其他框架和库)。本篇文章主要是初始化构建项目结构以及规范化提交信息的配置。该类文章是一系列的,旨在打造个人UI库,会对每一个关键点做详细的梳理和分析,目标是通过实践加深对相关知识点的学习。主要涉及到知识点如下:持续构...原创 2019-04-04 23:53:55 · 573 阅读 · 1 评论 -
Vue框架结构解析
前言之前Element框架项目具体的梳理了项目结构以及所使用的打包构建工具,可以知道还是采用webpack来打包,支持yarn和npm来管理依赖。本文就介绍Vue的项目结构以及打包构建过程(一些相关的构建会与Element项目做些比较),Vue版本2.6.8。具体结构|-- Vue|-- .circleci // 持续集成相关...原创 2019-03-10 16:07:09 · 3411 阅读 · 0 评论 -
Element UI项目构建浅析
前言之前分析Element框架的项目结构,实际上主要是分析package.json中script中相关的命令,依此分析了命令中主要的构建过程。本文着眼于package.json中相关的依赖以及项目中涉及的相关工具,从而了解更深入理解Element以及框架构建工具。具体逻辑Element项目结构如下:|-- Element|-- .babelrc ...原创 2019-03-02 16:04:23 · 809 阅读 · 0 评论 -
Vue之slot相关
前言本篇文章slots的知识点进行Vue的源码逻辑梳理,旨在理解slots背后的实现逻辑。实际上本篇文章梳理slots相关的逻辑主要是2点:构建成render函数的过程中slot是如何处理的?slot插槽数据是如何合并的?作用域slot的特殊处理Slot具体逻辑梳理结合简单实例来梳理slots相关知识,实例如下: <div id="app"> <...原创 2019-02-13 22:22:22 · 3354 阅读 · 0 评论 -
Vue之生命周期相关
前言本篇是从源码逻辑中看Vue.js的生命周期函数,实际上就是Vue.js官网上生命周期图示详细解释。具体逻辑梳理首先看看Vue.js官网上给出的生命周期图示,如下图:通过之前的Vue逻辑的大致梳理,实际上再看上面的生命周期会认识的更加深入。但是本篇文章会对每一个生命周期被调用处理之前的相关的处理做一个较为明确和详细的梳理。beforeCreated从上面的生命周期图示中也会知道整个...原创 2019-01-29 20:49:08 · 377 阅读 · 0 评论 -
Vue之事件相关
前言本篇文章带来Vue.js的事件机制,具体的分析点如下:$emit、$on、$off、$once背后的处理逻辑@click形式背后的处理逻辑具体逻辑梳理实际上在 Vue初始化 这篇文章中就提及了事件相关实例方法的创建,这里就在具体说下。在Vue.js文件加载执行,其中会执行eventsMixin函数,该函数的作用就是:创建事件相关的的原型方法,即$on、$once、$off、...原创 2019-01-26 10:02:47 · 877 阅读 · 0 评论 -
Element UI框架项目结构解析
前言因为对于工程化相关的了解涉猎很少,今后也是打算对webpack等工程化构建加深下了解。这篇文章就是详细分析下Element UI项目组成以及相关的打包步骤等,旨在加深对工程化构建相关的知识点了解。Element UI项目结构|-- Element |-- .babelrc // babel配置文件 |-- ...原创 2018-12-21 21:07:25 · 8146 阅读 · 5 评论 -
Element中自定义组件校验的背后
前言场景:自定义组件在Element UI form组件中支持校验处理方法:使用el-form中提及的validateField方法主动触发在对应的el-form-item调用$emit分发事件this.$refs['formItem'].$emit('el.form.blur')这是最近有个需求点引发了我对于Element UI框架中el-form校验相关的处理。...原创 2018-12-19 21:34:53 · 8000 阅读 · 2 评论 -
Vue之Vue.component解析
前言本篇文章打算分析梳理下Vue提供的创建组件的方法,打开Vue官网,在API中只有Vue.component和Vue.extend提供组件的创建。严格意义上是这么说,但是在实际项目中常使用局部注册以及文件即组件这种方式来实现开发,这里先不讨论这种方式背后的处理,主要放在Vue.component和Vue.extend这两个API的逻辑处理。具体梳理结合简单实例来梳理下整个的处理逻辑,实例...原创 2018-12-01 18:43:41 · 42275 阅读 · 5 评论 -
Vue之简易MVVM实现
总结本篇文章主要是总结以及简易MVVM实现的推荐。自从看Vue源码之后,写了几篇相关的文章,针对于Vue有如下的了解:响应式原理部分data、computed的双向绑定以及依赖的实现data与computed响应式原理过程实现的区别computed是如何收集依赖的computed是如何具有缓存的render函数部分Vue解析template得到ast的处理由...原创 2018-10-11 23:40:34 · 444 阅读 · 0 评论 -
Vue之patch
前言前几篇文章介绍了html转换成vnode的过程以及vnode创建的过程,分析上面的过程都是基于最简单的实例来分析的,而且仅仅是分析处理HTML以及文本部分,对于Vue中指令、过滤器等都没有涉及到,不过差强人意,达到我学习Vue源码的初衷。本文介绍vnode创建之后的逻辑处理,如何比较替换真实DOM,就是Vue中的diff算法。具体分析还是已最基本的简单实例为示例,贯穿整篇文章,即:&...原创 2018-10-09 22:24:24 · 4874 阅读 · 1 评论 -
Vue之vnode创建
前言上一篇文章中分析了html-&amp;gt;vnode主要的处理过程,实际上主要是parse + generate解析template构建render函数的过程,实际上vnode的创建是在render执行过程中触发的。本文主要分析render调用过程以及该过程vnode的创建。具体分析在render构建和调用那篇文章中,就提及render的调用实际上是Watcher实例对象创建触发的,主要的处...原创 2018-10-01 10:53:52 · 8991 阅读 · 0 评论 -
Vue之render函数生成细节
前言 上篇文章分析了Vue中render函数的构建以及调用过程,在整体上梳理了构建出render以及调用的逻辑。知其然也知其所以然,本文就主要分析html -> vnode的过程。原创 2018-09-29 20:48:04 · 3011 阅读 · 0 评论 -
Vue之render构建、调用整体流程
前言 本篇文章是想要探寻下Vue中是如何处理html到vnode以及vnode转换为html的过程,主要是梳理其大概流程,一些细节流程会在单独文章的细究。原创 2018-09-28 20:38:21 · 3447 阅读 · 0 评论 -
Vue之computed
前言上篇文章就new Vue()过程中的基本处理流程有了了解,并对data和挂载部分进行了分析,本次就针对于computed进行具体的分析。 计算属性computed的提出三个问题点:Vue对于computed的具体处理computed与data有何区别computed是如何收集依赖的computedcomputed的处理逻辑都是由initComputed而起,具体的处理...原创 2018-09-04 21:15:35 · 3635 阅读 · 2 评论 -
Vue之data选项
前言本篇是分析new Vue()过程中对于data的处理细节以及响应式原理,主要了解如下两点:Vue实例的data选项具体的逻辑Vue响应式原理学习data处理逻辑下面是Vue实例创建中initState的处理逻辑:initState的处理逻辑是处理组件中选项即props、data、computed、watch、methods,而关于data部分的处理逻辑,具体如下:opts.data ? initData(vm) : observe(vm._data = {}, true);首先看原创 2021-01-30 05:32:27 · 3308 阅读 · 0 评论 -
Vue之Vue实例创建整体流程
前言上篇文章是Vue初始化加载的过程,主要的处理是对Vue实例方法以及静态方法的定义。 本篇是分析调用Vue构造函数的过程,实际上是主要分析大致流程、props、methods、data。具体逻辑使用Vue构造函数创建Vue实例,具体的处理逻辑如下图: 从上图中可以看出,Vue实例的具体处理是定义相关的内部属性包括props、data、methods、computed都会在创建...原创 2018-09-03 20:40:09 · 7741 阅读 · 4 评论 -
Vue之初始化
前言之前分析过Moon的源码,对于Moon实现的双向绑定、computed、事件分发、生命周期有了比较详细的阅读分析,学到了很多。不足之处也比较明显,对于component、虚拟DOM、模板解析不够深入,之后会逐渐完善,这个高仿库是非常值得深入学习的。本文会介绍Vue.js加载过程中主要的初始化工作,vue版本是2.5.16。具体分析Vue源码中使用rollup来实现多种环境的打包...原创 2018-08-25 14:08:44 · 1624 阅读 · 0 评论 -
Vue之nextTick内部实现
前言最近开始阅读Vue相关源码,Vue整个实现比较复杂,所以这个系列的文章打算采用以点到面的方式来介绍Vue背后相关的实现,开篇就介绍nextTick。具体细节首先看看Vue中nextTick的使用,具体如下: Vue.nextTick(function() {}) Vue.nextTick().then(() => {}) 实例中$nextTick跟上面的使...原创 2018-07-31 14:40:59 · 565 阅读 · 0 评论