Vue源码分析

vue源码分析-挂载流程和模板编译

前面几节我们从newVue创建实例开始，介绍了创建实例时执行初始化流程中的重要两步，配置选项的资源合并,以及响应式系统的核心思想，数据代理。在合并章节，我们对Vue丰富的选项合并策略有了基本的认知，在数据代理章节我们又对代理拦截的意义和使用场景有了深入的认识。按照Vue源码的设计思路，初始化过程还会进行很多操作，例如组件之间创建关联，初始化事件中心，初始化数据并建立响应式系统等，并最终将模板和数据
yyzzabc123·2024-09-11 05:05

Vue源码分析—组件化(五)

组件注册在Vue.js中，除了它内置的组件如keep-alive、component、transition、transition-group等，其它用户自定义组件在使用前必须注册。在开发过程中可能会遇到如下报错信息：'Unknowncustomelement:-didyouregisterthecomponentcorrectly?Forrecursivecomponents,makesureto
oWSQo·2024-01-14 14:54

vue源码分析（二十八）Vue之自定义指令directives

一个指令定义对象可以提供如下几个钩子函数(均为可选)：bind、inserted、update、componentUpdated、unbind具体的说明请参考vue官网的自定义指令说明文档。首先是解析vue实例的directives选项/***将原始函数指令规范化为对象格式。*/functionnormalizeDirectives(options:Object){constdirs=option
vue爱好者·2023-12-29 22:07

vue源码分析-v-model的本质

双向数据绑定这个概念或者大家并不陌生，视图影响数据，数据同样影响视图，两者间有双向依赖的关系。在响应式系统构建的上，中，下篇我已经对数据影响视图的原理详细阐述清楚了。而如何完成视图影响数据这一关联？这就是本节讨论的重点：指令v-model。由于v-model和前面介绍的插槽，事件一致，都属于vue提供的指令，所以我们对v-model的分析方式和以往大同小异。分析会围绕模板的编译，render函数的
yyzzabc123·2023-12-28 13:14

vue源码分析-插槽原理

Vue组件的另一个重要概念是插槽，它允许你以一种不同于严格的父子关系的方式组合组件。插槽为你提供了一个将内容放置到新位置或使组件更通用的出口。这一节将围绕官网对插槽内容的介绍思路，按照普通插槽，具名插槽，再到作用域插槽的思路，逐步深入内在的实现原理,有对插槽使用不熟悉的，可以先参考官网对插槽的介绍。10.1普通插槽插槽将作为子组件承载分发的载体，简单的用法如下10.1.1基础用法varchild=
yyzzabc123·2023-12-24 07:21

ES6之模版字符串基本用法

最近学习webapck相关知识，以及vue源码分析，用到的js全部是ES6语法，所以对此总结了其中一个模块，ES6模板字符串.本博客版权归本人和饥人谷所有，转载需说明来源内容转载自阮一峰老师的ES6入门基本用法传统
海之深处爱之港湾·2023-12-23 09:12

Vue源码分析—响应式原理(三)

派发更新响应式数据依赖收集过程，收集的目的就是为了当我们修改数据的时候，可以对相关的依赖派发更新，我们来详细分析这个过程。我们先来回顾一下setter部分的逻辑：/***DefineareactivepropertyonanObject.*/exportfunctiondefineReactive(obj:Object,key:string,val:any,customSetter?:?Funct
oWSQo·2023-12-21 23:36

vue源码分析之createDocumentFragment()的思考

先看一下关于createDocumentFragment的定义：createDocumentFragment()方法，是用来创建一个虚拟的节点对象，或者说，是用来创建文档碎片节点。它可以包含各种类型的节点，在创建之初是空的。DocumentFragment节点不属于文档树，继承的parentNode属性总是null。它有一个很实用的特点，当请求把一个DocumentFragment节点插入文档树时
时清云·2023-11-29 02:06

Vue源码分析——Vue的引入

文章首发于个人博客小灰灰的空间。新人刚开始写博客记录生活，请多指教Vue的引入Vue构造器Vue本质上是一个函数，在函数内部保证了只能使用new关键字类创建Vue实例functionVue(options){if(process.env.NODE_ENV!=='production'&&!(thisinstanceofVue)){warn('Vueisaconstructorandshouldbe
小灰灰的空间·2023-11-17 03:21

vue源码分析：渲染篇

一、前言Vue.js框架是目前比较火的MVVM框架之一，简单易上手的学习曲线，友好的官方文档，配套的构建工具，让Vue.js在2016大放异彩，大有赶超React之势。前不久Vue.js2.0正式版已出，在体积优化（相比1.0减少了50%）、性能提升（相比1.0提升60%）、API优化等各方面都更上一层楼；本文是系列文章，主要想通过对于Vue.js2.0源码的分析，从代码层面解析Vue.js的实现
mr_japson·2023-11-17 03:17

Vue源码解析系列——响应式原理篇：computed

回顾如果有感兴趣的同学可以看看我之前的源码分析文章，这里呈上链接：《Vue源码分析系列：目录》写在前面computed的内部原理较为复杂，需要对Dep和Watcher类需要有较深的理解，如果还有同学不理解
爱学习的前端小黄·2023-11-17 03:47

Vue源码解析系列——组件篇：组件的patch过程

回顾如果有感兴趣的同学可以看看我之前的源码分析文章，这里呈上链接：《Vue源码分析系列：目录》createElm在之前解析patch(点击查看)的时候，我们在createElm中我们已经见过了createComponent
爱学习的前端小黄·2023-11-17 03:17

Vue源码解析系列——响应式原理篇：派发更新

回顾如果有感兴趣的同学可以看看我之前的源码分析文章，这里呈上链接：《Vue源码分析系列：目录》派发更新前面一篇我们了解到Vue在data的get过程中收集了对应数据的Watcher实例，由这些watcher
爱学习的前端小黄·2023-11-17 03:17

vue源码分析（八）—— update分析(首次渲染)

文章目录前言一、update首次渲染的核心方法__path__二、__path__方法详解1.文件路径2.inBrowser的解析（1）noop的空函数定义：（2）patch的含义3.createPatchFunction的解析4.path方法解析（1）patch方法参数(接收4个参数)（2）思考5.createElm（1）判断vnode是否包含tag（2）createChildren创建子元素（
前端张三·2023-11-17 03:16

vue源码分析【1】-new Vue之前

当前篇：vue源码分析【1】-newVue之前以下代码和分析过程需要结合vue.js源码查看，通过打断点逐一比对。
南城夏季·2023-11-11 22:49

vue源码分析（七）—— createComponent

文章目录前言一、createComponent参数说明二、createComponent源码详解1.baseCtor的实际指向2.extend方法3.判断Ctor是否是函数的判断4.installComponentHooks方法5.返回一个带标识的组件vnode前言createComponent文件的路径：src\core\vdom\create-component.ts一、createCompo
前端张三·2023-10-29 20:52

vue源码分析（一）——源码目录说明

文章目录一、如何下载源码（可忽略）（1）打开地址（2）复制链接（3）gitclone链接二、源码目录说明1.可以根据你下载的源码通过package.json文件查看vue版本2.源码目录说明一、如何下载源码（可忽略）（1）打开地址vue源码git地址：https://github.com/vuejs/vue（2）复制链接（3）gitclone链接找到你要放源码的文件夹，打开gitbash输入命令g
前端张三·2023-10-29 20:22

vue源码分析（五）——vue render 函数的使用

文章目录前言一、render函数1、render函数是什么？二、render源码分析1.执行initRender方法2.vm._c和vm.$createElement调用createElement方法详解（1）区别（2）代码3、原型上的_render方法（1）renderProxy方法（2）initProxy方法①执行initProxy的时机②initProxy的详细说明③warnNonPrese
前端张三·2023-10-29 20:22

vue源码分析（六）——vnode 和 createElement的使用和作用

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、Vnode是什么？二、create-element.ts文件1.createElement方法2._createElement方法（1）createEmptyVNode方法（2）normalizeChildren和simpleNormalizeChildren方法（3）_render函数的返回值3.createElem
前端张三·2023-10-29 19:17

vue源码分析（二十一）Vue事件系统（$on、$once、$off、$emit）

我们在vue源码分析（三）解密newVue()之前做了哪些不为人知工作(第一篇)的时候曾经提到过eventsMixin函数。
vue爱好者·2023-10-27 23:39

vue源码分析（二）——vue的入口发生了什么

文章目录前言（1）vue项目构建的时候，通过package.json文件看到构建入口（2）构建入口页面：导入同级模块config的getAllbuilds方法（3）通过传入参数中的builds对象使用map获取（4）通过builds对象过滤后拿到了引入vue的文件（5）通过第（4）步找到下一个导出vue的文件（6）通过第（5）步找到下一个导出vue的文件（7）通过第（6）步找到下一个导出vue的文
前端张三·2023-10-27 00:19

vue的虚拟dom返回html,Vue源码分析——虚拟dom如何渲染成真实dom

今天我们来说下vue实例的$mount中都发生了什么。$mount是Vue原型上的方法，是Vue实例化的最后一步。$mount分为带编译器版本和不带编译器版本。我们以下面的代码为例，来讲下在$mount时都发生了什么。实例代码如下(来源于codesandbox的默认vue项目代码)：1234567891011121314151617181920212223242526272829303132333
詹西川·2023-10-22 14:01

vue源码分析（二十四）Vue之指令（v-for）

我们打开文件src/core/instance/render-helpers/render-list.js/*@flow*/import{isObject,isDef,hasSymbol}from'core/util/index'/***Runtimehelperforrenderingv-forlists.*/exportfunctionrenderList(val:any,render:(va
vue爱好者·2023-10-16 15:23

vue2-3笔记

26.vue源码分析1.用到的js知识1)伪数组如何转成真数组constlist2=[...list1]constlist3=Array.from(list1)constlist4=Array.prototype.slice.call
weixin_45687657·2023-10-14 04:31

vue源码分析（二十二）Vue之指令（v-text、v-html）

我们先来看看代码“src/platforms/web/compiler/directives”目录下面包含html.js和text.js，代码分别如下：html.js/*@flow*/import{addProp}from'compiler/helpers'exportdefaultfunctionhtml(el:ASTElement,dir:ASTDirective){if(dir.value)
vue爱好者·2023-09-24 21:15

VUE源码分析之子组件向父组件通过$emit传递数据过程

还是从一个简单例子看下这个过程：Vue.component('child-comp',{template:"",mounted:function(){this.$emit("child-event","hereischildmsg");}});constapp=newVue({el:'#app',methods:{handleChildEvent:function(value){console.l
夜跑者·2023-09-15 22:55

VUE源码分析之eventBus原理

VUE中eventBus可以用来进行任何组件之间的通信，我们可以把eventBus当成一个管道，这个管道两端可以接好多组件，两端的任何一个组件都可以进行通信。其实这个管道就是Vue实例，实例中的$on,$off,$emit方法来实现此功能。还是老样子，先通过简单例子看看eventBus怎么用。     vareventBus=newVue();  Vue.component('child-comp
夜跑者·2023-09-07 11:34

vue源码分析（二十六）Vue之指令（v-model）解析model指令

我们先打开文件src\compiler\parser。exportdefaultfunctionmodel(el:ASTElement,dir:ASTDirective,_warn:Function):?boolean{warn=_warnconstvalue=dir.value//v-model绑定的值constmodifiers=dir.modifiers//指令修饰符consttag=el.
vue爱好者·2023-08-30 01:01

vue源码分析（二十三）Vue之指令（v-show）

我们打开文件src/platforms/web/runtime/directives/show.js/*@flow*/import{enter,leave}from'../modules/transition'//recursivelysearchforpossibletransitiondefinedinsidethecomponentrootfunctionlocateNode(vnode:V
vue爱好者·2023-08-15 16:39

vue源码分析（二十五）Vue之指令（v-bind）

我们先打开文件src\compiler\parser。functionprocessAttrs(el){constlist=el.attrsListleti,l,name,rawName,value,modifiers,syncGen,isDynamicfor(i=0,l=list.length;i,use.',list[i])}}addAttr(el,name,JSON.stringify(va
vue爱好者·2023-07-28 06:04

vue源码分析（十九）核心函数之patchVnode

我们先打开文件src/core/vdom/patch.js。代码如下：functionpatchVnode(oldVnode,vnode,insertedVnodeQueue,ownerArray,index,removeOnly){if(oldVnode===vnode){return}if(isDef(vnode.elm)&&isDef(ownerArray)){//clonereusedvn
vue爱好者·2023-07-24 05:39

Vue源码分析之-源码下载和打包调试

目录准备工作1、vue.js源代码获取可以直接网页下载源代码：或者通过gitclone下载：个人推荐的阅读源码的方式：目录结构解读了解Flow调试设置打包安装依赖设置sourcemap执行dev进行开发构建调试打包结果如何调试准备工作1、vue.js源代码获取Vue.js：这里我们演示解读的是Vue.js2.6版本，可以直接网页下载源代码：https://github.com/vuejs/vue.
懒得跟猪打架·2023-06-09 12:03

深入Vue源码分析-computed & watch 源码分析

Vue3.0Object.defineProperty=>ProxyProxy-JavaScript|MDNCompositionAPICompositionAPIFAQ|Vue.jsVue3.0ReactivityAPIsreactiverefreadonly【只读，没有set功能，会报警告】computedwatchEffectwatchCompositionAPIFAQ|Vue.jsVue2
路人i++·2023-06-07 01:46

vue源码分析-diff算法核心原理

这一节，依然是深入剖析Vue源码系列，上几节内容介绍了VirtualDOM是Vue在渲染机制上做的优化，而渲染的核心在于数据变化时，如何高效的更新节点，这就是diff算法。由于源码中关于diff算法部分流程复杂，直接剖析每个流程不易于理解，所以这一节我们换一个思路，参考源码来手动实现一个简易版的diff算法。之前讲到Vue在渲染机制的优化上，引入了VirtualDOM的概念，利用VirtualDO
yyzzabc123·2023-04-05 17:34

vue源码分析 initExtend ---三分一把刀

我是三分一把刀。上一节看了initMixin源码，这节会弄明白initExtend方法的具体逻辑与实现。代码内部没有进行操作，只是定义了vue.extend方法，印象中以前vue.extend(componentConfig)注册主键的时候会用到，就是把vue的一些特性继承复制过来。首先也是如果不是生产环境，会监测组件名称是否有效。constSub=functionVueComponent(opt
三分一把刀·2023-03-27 09:36

Vue源码分析—组件化(六)

异步组件在我们平时的开发工作中，为了减少首屏代码体积，往往会把一些非首屏的组件设计成异步组件，按需加载。Vue也原生支持了异步组件的能力，如下：Vue.component('async-example',function(resolve,reject){//这个特殊的require语法告诉webpack//自动将编译后的代码分割成不同的块，//这些块将通过Ajax请求自动下载。require(['
oWSQo·2023-03-25 19:49

Vue源码分析(一) : new Vue() 做了什么

Vue源码分析(一):newVue()做了什么author:@TiffanysBear在了解newVue做了什么之前，我们先对Vue源码做一些基础的了解，如果你已经对基础的源码目录设计等有基础的了解的话
Tiffany_c4df·2023-03-25 08:12

vue源码分析（二十）核心函数之__patch__（更新视图）

我们打开文件src/core/vdom/patch.js，找到定义Observer函数的代码：returnfunctionpatch(oldVnode,vnode,hydrating,removeOnly){if(isUndef(vnode)){if(isDef(oldVnode))invokeDestroyHook(oldVnode)return}letisInitialPatch=falsec
vue爱好者·2023-03-14 04:28

vue源码分析-从new Vue开始

初学vue，你得知道我们是从newVue开始的：newVue({el:'#app',data:obj,...})那你觉得是不是很有意思，咱们newVue之后，就可以使用他那么多的功能,可见Vue是暴出来的一个一个功能类函数，我们进入源码一探究竟：importVuefrom'./instance/index'import{initGlobalAPI}from'./global-api/index'/
·2023-02-24 08:13

Vue源码分析-项目结构分析

项目结构：scripts:包含与构建相关的脚本和配置文件。scripts/alias.js:模块导入别名用于所有源代码和测试。scripts/config.js:包含在中找到的所有文件的构建配置dist/.如果要查找dist文件的条目源文件，检查此文件dist:包含用于分发的构建文件flow:包含flow的类型声明。这些声明是全局加载的，将在普通源代码中看到它们在类型注释中使用。packages:
程序员清欢·2023-02-02 08:35

vue源码分析（十八）核心函数之patch

我们先打开文件src/core/vdom/patch.js。代码如下：functionpatch(oldVnode,vnode,hydrating,removeOnly){//vnode不存在那就销毁旧的vnodeif(isUndef(vnode)){if(isDef(oldVnode))invokeDestroyHook(oldVnode)return}letisInitialPatch=fal
vue爱好者·2023-01-26 09:54

vue源码分析-动态组件

前面花了两节的内容介绍了组件，从组件的原理讲到组件的应用，包括异步组件和函数式组件的实现和使用场景。众所周知，组件是贯穿整个Vue设计理念的东西，并且也是指导我们开发的核心思想，所以接下来的几篇文章，将重新回到组件的内容去做源码分析，首先会从常用的动态组件开始，包括内联模板的原理，最后会简单的提到内置组件的概念，为之后的文章埋下伏笔。12.1动态组件动态组件我相信大部分在开发的过程中都会用到，当我
yyzzabc123·2022-12-07 07:54

vue源码分析-基础的数据代理检测

简单回顾一下这个系列的前两节，前两节花了大量的篇幅介绍了Vue的选项合并，选项合并是Vue实例初始化的开始，Vue为开发者提供了丰富的选项配置，而每个选项都严格规定了合并的策略。然而这只是初始化中的第一步，这一节我们将对另一个重点的概念深入的分析，他就是数据代理，我们知道Vue大量利用了代理的思想，而除了响应式系统外，还有哪些场景也需要进行数据代理呢？这是我们这节分析的重点。2.1数据代理的含义数
yyzzabc123·2022-11-30 03:56

vue源码分析-动态组件

前面花了两节的内容介绍了组件，从组件的原理讲到组件的应用，包括异步组件和函数式组件的实现和使用场景。众所周知，组件是贯穿整个Vue设计理念的东西，并且也是指导我们开发的核心思想，所以接下来的几篇文章，将重新回到组件的内容去做源码分析，首先会从常用的动态组件开始，包括内联模板的原理，最后会简单的提到内置组件的概念，为之后的文章埋下伏笔。12.1动态组件动态组件我相信大部分在开发的过程中都会用到，当我
·2022-10-31 10:11

vue源码分析-响应式系统(三)

上一节，我们深入分析了以data,computed为数据创建响应式系统的过程，并对其中依赖收集和派发更新的过程进行了详细的分析。然而在使用和分析过程中依然存在或多或少的问题，这一节我们将针对这些问题展开分析，最后我们也会分析一下watch的响应式过程。这篇文章将作为响应式系统分析的完结篇。7.12数组检测在之前介绍数据代理章节，我们已经详细介绍过Vue数据代理的技术是利用了Object.defin
·2022-10-31 10:10

vue源码分析-响应式系统(一)

从这一小节开始，正式进入Vue源码的核心，也是难点之一，响应式系统的构建。这一节将作为分析响应式构建过程源码的入门，主要分为两大块,第一块是针对响应式数据props,methods,data,computed,wather初始化过程的分析，另一块则是在保留源码设计理念的前提下，尝试手动构建一个基础的响应式系统。有了这两个基础内容的铺垫，下一篇进行源码具体细节的分析会更加得心应手。7.1数据初始化回
·2022-10-31 10:38

vue源码分析-响应式系统工作原理

上一章，我们讲到了Vue初始化做的一些操作，那么我们这一章来讲一个Vue核心概念响应式系统。我们先来看一下官方对深入响应式系统的解释:当你把一个普通的JavaScript对象传给Vue实例的data选项，Vue将遍历此对象所有的属性。并使用Object.defineProperty把这些属性全部转为getter/setter。Object.defineProperty是ES5中一个无法shim的特
·2022-10-19 15:49

vue源码分析-从new Vue开始

初学vue，你得知道我们是从newVue开始的：newVue({el:'#app',data:obj,...})那你觉得是不是很有意思，咱们newVue之后，就可以使用他那么多的功能,可见Vue是暴出来的一个一个功能类函数，我们进入源码一探究竟：importVuefrom'./instance/index'import{initGlobalAPI}from'./global-api/index'/
·2022-10-19 15:48

vue源码分析-keep-alive原理（上）

上一节最后稍微提到了Vue内置组件的相关内容，从这一节开始，将会对某个具体的内置组件进行分析。首先是keep-alive，它是我们日常开发中经常使用的组件，我们在不同组件间切换时，经常要求保持组件的状态，以避免重复渲染组件造成的性能损耗，而keep-alive经常和上一节介绍的动态组件结合起来使用。由于内容过多，keep-alive的源码分析将分为上下两部分，这一节主要围绕keep-alive的首
·2022-10-19 15:47

vue源码分析-动态组件

前面花了两节的内容介绍了组件，从组件的原理讲到组件的应用，包括异步组件和函数式组件的实现和使用场景。众所周知，组件是贯穿整个Vue设计理念的东西，并且也是指导我们开发的核心思想，所以接下来的几篇文章，将重新回到组件的内容去做源码分析，首先会从常用的动态组件开始，包括内联模板的原理，最后会简单的提到内置组件的概念，为之后的文章埋下伏笔。12.1动态组件动态组件我相信大部分在开发的过程中都会用到，当我
·2022-10-19 15:17
上一页 1 2 3 4 5 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他