vue源码

Vue 源码解读（10）—— 编译器 之 生成渲染函数

前言这篇文章是Vue编译器的最后一部分，前两部分分别是：Vue源码解读（8）——编译器之解析、Vue源码解读（9）——编译器之优化。
李永宁·2022-03-07 10:00

前端面试笔记-Vue篇

Vue组件通信Vuediff策略Vue虚拟DOMVue计算属性vue-router实现懒加载vueloader的工作原理如果你自己设置vueloader该怎么做vue的响应式怎么实现的Vue好处的理解对vue
教练，我也想学·2022-03-05 10:53

petite-vue源码剖析-从静态视图开始

代码库结构介绍examples各种使用示例scripts打包发布脚本tests测试用例srcdirectivesv-if等内置指令的实现app.tscreateApp函数block.ts块对象context.ts上下文对象eval.ts提供v-if="count===1"等表达式运算功能scheduler.ts调度器utils.ts工具函数walk.ts模板解析若想构建自己的版本只需在控制台执行n
·2022-03-04 15:48

petite-vue源码剖析-从静态视图开始

代码库结构介绍examples各种使用示例scripts打包发布脚本tests测试用例srcdirectivesv-if等内置指令的实现app.tscreateApp函数block.ts块对象context.ts上下文对象eval.ts提供v-if="count===1"等表达式运算功能scheduler.ts调度器utils.ts工具函数walk.ts模板解析若想构建自己的版本只需在控制台执行n
^_^肥仔John·2022-03-04 14:00

Vue 源码解读（9）—— 编译器 之 优化

前言上一篇文章Vue源码解读（8）——编译器之解析详细详解了编译器的第一部分，如何将html模版字符串编译成AST。今天带来编译器的第二部分，优化AST，也是大家常说的静态标记。目
·2022-03-04 09:49

Vue 源码解读（9）—— 编译器 之 优化

前言上一篇文章Vue源码解读（8）——编译器之解析详细详解了编译器的第一部分，如何将html模版字符串编译成AST。今天带来编译器的第二部分，优化AST，也是大家常说的静态标记。
李永宁·2022-03-04 08:00

petite-vue源码剖析-为什么要读源码？

什么是petite-vue？根据官方解释，petite-vue是专门为非前后端分离的历史项目提供和Vue相近的响应式开发模式。与完整的Vue相比最大的特点是，面对数据的变化petite-vue采取直接操作DOM的方式重新渲染。具体的使用方式请参考GitHub，在这里我想展示两个示例:示例1-在线渲染[v-cloak]{display:none;}import{createApp}from'http
·2022-03-03 14:35

petite-vue源码剖析-为什么要读源码？

什么是petite-vue？根据官方解释，petite-vue是专门为非前后端分离的历史项目提供和Vue相近的响应式开发模式。与完整的Vue相比最大的特点是，面对数据的变化petite-vue采取直接操作DOM的方式重新渲染。具体的使用方式请参考GitHub，在这里我想展示两个示例:示例1-在线渲染[v-cloak]{display:none;}import{createApp}from'http
^_^肥仔John·2022-03-03 14:00

Vue 源码解读（8）—— 编译器 之 解析（下）

特殊说明由于文章篇幅限制，所以将Vue源码解读（8）——编译器之解析拆成了两篇文章，本篇是对Vue源码解读（8）——编译器之解析（上）的一个补充，所以在阅读时请同时打开Vue源码解
·2022-03-03 08:08

Vue 源码解读（8）—— 编译器 之 解析（下）

特殊说明由于文章篇幅限制，所以将Vue源码解读（8）——编译器之解析拆成了两篇文章，本篇是对Vue源码解读（8）——编译器之解析（上）的一个补充，所以在阅读时请同时打开Vue源码解读（8）——编译器之解析
李永宁·2022-03-03 08:00

Vue 源码解读（8）—— 编译器 之 解析（上）

特殊说明由于文章篇幅限制，所以将Vue源码解读（8）——编译器之解析拆成了上下两篇，所以在阅读本篇文章时请同时打开Vue源码解读（8）——编译器之解析（下）一起阅读。前言Vue源码
·2022-03-02 09:24

Vue 源码解读（8）—— 编译器 之 解析（上）

特殊说明由于文章篇幅限制，所以将Vue源码解读（8）——编译器之解析拆成了上下两篇，所以在阅读本篇文章时请同时打开Vue源码解读（8）——编译器之解析（下）一起阅读。
李永宁·2022-03-02 08:00

Vue 源码解读（6）—— 实例方法

前言上一篇文章Vue源码解读（5）——全局API详细介绍了Vue的各个全局API的实现原理，本篇文章将会详细介绍各个实例方法的实现原理。目标深入理解以下实例方法的实现原理。vm.$set
·2022-02-28 08:08

Vue 源码解读（6）—— 实例方法

前言上一篇文章Vue源码解读（5）——全局API详细介绍了Vue的各个全局API的实现原理，本篇文章将会详细介绍各个实例方法的实现原理。目标深入理解以下实例方法的实现原理。vm.$setvm.
李永宁·2022-02-28 08:00

收藏吃灰，12 个炫酷背景特效库

vue3源码实战出来啦：在面试中，害怕被问到Vue源码，或者想通过自己对Vue源码的来秀一下面试官的，可以了解一下。1.partic
·2022-02-28 07:07

Vue源码学习-虚拟DOM+Diff算法

Vue中采用了虚拟DOM+Diff算法减少了对DOM的操作次数，大大提高了性能，那么我们今天就来详细的讲一下Vue中这一部分的实现逻辑，希望可以帮助还不理解这部分的小伙伴理解这一部分，纯手打，希望各位小伙伴点个赞支持一下！首先我们要明确的是，vnode代表本次修改后新生成的虚拟节点，oldVnode代表目前真实DOM结构所对应的虚拟节点。所以我们更新是以vnode为基准，通过oldVnode的结构
·2022-02-25 23:44

Vue 源码解读（5）—— 全局 API

Vue.useVue.mixinVue.componentVue.filterVue.directiveVue.extendVue.setVue.deleteVue.nextTick源码解读从该系列的第一篇文章Vue
李永宁·2022-02-25 09:00

Vue 源码解读（4）—— 异步更新

前言上一篇的Vue源码解读（3）——响应式原理说到通过Object.defineProperty为对象的每个key设置getter、setter，从而拦截对数据的访问和设置。当对数据进行
·2022-02-24 08:06

Vue 源码解读（4）—— 异步更新

前言上一篇的Vue源码解读（3）——响应式原理说到通过Object.defineProperty为对象的每个key设置getter、setter，从而拦截对数据的访问和设置。
李永宁·2022-02-24 08:00

Vue 源码解读（3）—— 响应式原理

前言上一篇文章Vue源码解读（2）——Vue初始化过程详细讲解了Vue的初始化过程，明白了newVue(options)都做了什么，其中关于数据响应式的实现用一句话简单的带过，而这篇文章
·2022-02-23 11:54

Vue 源码解读（3）—— 响应式原理

前言上一篇文章Vue源码解读（2）——Vue初始化过程详细讲解了Vue的初始化过程，明白了newVue(options)都做了什么，其中关于数据响应式的实现用一句话简单的带过，而这篇文章则会详细讲解Vue
李永宁·2022-02-23 09:00

Vue 源码解析: 生命周期钩子全面剖析

Vue源码解析:生命周期钩子全面剖析文章目录Vue源码解析:生命周期钩子全面剖析前言：长文慎入！
超悠閒·2022-02-22 13:22

vue源码解读--作用域插槽（parse和codegen）

目录导航本节示例代码如下parse父组件根据之前的分析，我们知道，文本节点会调用chars方法进行处理，在当前示例即对{{slotProps.msg}}进行解析，解析后的值如下由之前分析可知，每次匹配到闭合标签都会执行closeElement函数，进入processElement函数并在该函数中对slot进行解析，这将执行processSlotContent函数，本次template标签存在故进入
三岁就会写BUG·2022-02-22 02:35

vue源码解读--event（原生事件-parse）

目录导航本节的示例代码如下parsediv开始标签的解析经过之前对编译的分析，parse的过程将会执行parseHTML对template对应的html字符串进行遍历处理，并在正则匹配到开始标签时执行parseStartTag函数对标签中的属性进行处理(A)标红的位置将匹配到标签中的@click="onRootConsole",match.attrs为(B)将match返回，回到parseHTML
三岁就会写BUG·2022-02-20 23:08

vue源码解读--组件更新（父组件的更新流程）

本节我们的示例如下app.vuechild.vue当点击按钮，切换flag的值，此时将触发get收集依赖并触发set向dep分别notify，这将在下一个tick中触发更新，执行patch，接收新旧两个vnode上一节，我们分析过，组件更新的分界点为sameVnode当前组件未定义key、tag为main、非注释节点、都有data定义。故returntrue。调用patchVnode，入参为：旧的
三岁就会写BUG·2022-02-20 01:28

vue源码解读--响应式的创建过程

目录导航本节的示例如下（app.vue组件在main.js中引入）当newvue的时候将执行init方法，在该方法中将调用initState这里有两个地方比较重要，一个是initProps，一个是initData我们本节没有props数据，故着重看data是如何被set为响应式的我们示例的data是一个函数，故调用getData方法，传入data和vm实例该方法将修正this指向，使其指向vm实例
三岁就会写BUG·2022-02-18 22:55

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

依赖收集Vue会把普通对象变成响应式对象，响应式对象getter相关的逻辑就是做依赖收集，我们来详细分析这个过程。我们先来回顾一下getter部分的逻辑：exportfunctiondefineReactive(obj:Object,key:string,val:any,customSetter?:?Function,shallow?:boolean){constdep=newDep()const
oWSQo·2022-02-17 05:22

55、剖析Vue原理&实现双向绑定MVVM

1、了解vue的双向数据绑定原理以及核心代码模块2、缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现，本文相关代码主要摘自vue源码,并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等
world_7735·2022-02-16 17:25

Vue编译器源码分析(一)

前期工作先把Vue源码的目录结构搞清楚，详细目录介绍如下。
李_李·2022-02-16 15:27

Vue源码分析—数据驱动(一)

Vue.js一个核心思想是数据驱动。所谓数据驱动，是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作DOM，而是通过修改数据。当交互复杂的时候，只关心数据的修改会让代码的逻辑变的非常清晰，因为DOM变成了数据的映射，我们所有的逻辑都是对数据的修改，而不用碰触DOM，这样的代码非常利于维护。在Vue.js中我们可以采用简洁的模板语法来声明式的将数据渲染为DOM：{{message}}vara
oWSQo·2022-02-16 02:40

6.最俗学习之-Vue源码学习-数据篇(上)

源码地址这篇重点学习Vue的数据响应系统，文件路径src/core/instance//exposerealselfvm._self=vminitLifecycle(vm)initEvents(vm)callHook(vm,'beforeCreate')initState(vm)callHook(vm,'created')initRender(vm)//先看event.js，只有这么一段expor
木子tar·2022-02-15 23:22

Vue源码分析——new Vue 发生了什么

文章首发于个人博客小灰灰的空间。新人刚开始写博客记录生活，请多指教newVue过程Vue构造器的定义functionVue(options){if(process.env.NODE_ENV!=='production'&&!(thisinstanceofVue)){//确保只能使用new关键字来创建vue实例，而不能通过函数的普通调用方式warn('Vueisaconstructorandshou
·2022-02-15 21:46

vue源码解读--组件更新流程

经过之前章节的分析，我们知道，组件的render将触发update并最终执行patchrender关键信息如下框红一，使用$vnode保存组件的占位节点框红二，使用parent指向占位节点update关键信息如下框红1，在组件初次渲染，使用_vnode保存了其渲染vnode，因此当更新时可以拿到将新旧vnode传递给patch做更新patch关键信息如下由于在update中传递的新旧vnode有值
三岁就会写BUG·2022-02-15 19:04

vue源码解读--Vue.set(Object)

目录导航犹记得之前面试的时候被问过一个问题，说如果我在某个方法内对某个对象扩展一个键，是否会触发更新?为什么?怎么解决？当时只知道不会触发且可以使用Vue.set方法来让其触发更新，但是却并不知道底层到底是怎么实现的先来看下示例按照我的预期，我希望在两秒钟之后打印出pppp,同时在页面上渲染出9999字样。但是很遗憾，当两秒之后只打印了pppp，而9999并没有被更新到dom上，我们将代码修改成如
三岁就会写BUG·2022-02-14 19:37

vue源码解读--组件更新（子组件的更新流程）

目录导航上一节我们分析到，vue在diff过程中将对子组件进行更新，调用子组件的prepatch，继而执行updateChildComponent。在updateChildComponent做props更新过程中将触发set发布广播触发watcher的update，继而执行子组件的patch，传入的新旧节点为：上一次渲染vnode、当前渲染vnode组件节点是没有节点类型的，故isRealElem
三岁就会写BUG·2022-02-14 16:07

Vue源码分析——Vue的引入

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

vue源码解读--计算属性

目录导航这一节，我们的示例代码如下默认情况下页面将渲染出"default"，当我们第一次点击onChangeIndex函数后将显示"三岁就会写bug",同时打印出''update'',当再次点击则页面不会有变化,但是仍然打印出"update"；当点击onChangeName后页面展示"三岁就会写bug哦",同时打印"update",当再次点击时，则页面无变化同时不会打印"update".那么为什么
三岁就会写BUG·2022-02-14 08:31

vue源码解读-update如何将vnode转为dom

目录导航我们在分析mount时候，最后抛出了两个问题，其中一个就是update函数拿到render生成的vNode后做了什么？首先打开src\core\instance\lifecycle.js，找到_update函数，该函数在初始化时被挂载至vue该函数的入参为和false向下走，prevEl缓存了一份；vm指向vue；prevVnode=undefinedif(!prevVnode)取值为tr
三岁就会写BUG·2022-02-14 04:43

vue源码9

源码大概5600-6600varcreatingElmInVPre=0;//创建元素functioncreateElm(vnode,insertedVnodeQueue,parentElm,refElm,nested,ownerArray,index){if(isDef(vnode.elm)&&isDef(ownerArray)){//Thisvnodewasusedinapreviousrend
小强不是蟑螂啊·2022-02-14 03:48

vue源码解读--nextTick

目录导航上一节通过分析我们知道，当执行flushSchedulerQueue时，会触发watcher的get方法从而调用updateComponent去重新render重新update那么，flushSchedulerQueue是何时被执行的呢？当我们调用nextTick时，将flushSchedulerQueue函数作为参数传入，并向callbacks保存了一份；代码向下执行timerFunc方
三岁就会写BUG·2022-02-13 20:05

vue源码解读--props（规范化）

目录导航本节我们的示例代码如下app组件如下child组件如下desp组件如下在组件init过程中会执行mergeOptions，在这一过程中会调用normalizeProps做一些props相关的规范化处理child组件props=['name','nick-name']定义res，这将作为最终规范化后的键值对对象替代原先的props当前是数组，进入if判断，执行while循环分别拿到数组的两个
三岁就会写BUG·2022-02-13 17:49

vue源码解读--Vue.set(Array)

目录导航上一节我们在分析Object类型时留了一个疑问，为什么调用数据的方法直接就可以使得触发更新？先看下本节的示例和上一次一样，代码不会如我们期望的那样在两秒后更新为9999，仍然需要调用Vue.set方法才行上一节我们说过，如果是数组的话，将执行以下逻辑通过Math.max重置数组的长度,如果是新增则扩大1否则不变调用数组的splice，然后over！！！那么，为啥这样就行了呢？我瞅着它也没干
三岁就会写BUG·2022-02-13 02:45

VUE学习笔记01--搭配本地vue源码调试环境

首先我们从github上下载一份vue源码到本地，就利用vue文件夹下自带的demo进行学习和调试。
大檬煮WesleyQ·2022-02-12 20:21

从new Vue()开始（Vue2.0源码分析从使用到理解第一节）

前言本文是系列开篇，系列的主旨在于分享自己在阅读vue源码时的收获和体会，一方面是让自己有个总结，另一方面帮助想要理解vue源码的同学有个可以参考的东西。
梁王io·2022-02-12 20:47

vue源码解读-配置合并

目录导航这一节我们要分析的示例如下我们在init的过程中，曾经看到过这样一句注释代码，即表示该if...else逻辑执行的就是一些配置的合并通过之前的分析，我们知道在update过程中，当存在子元素为component时会执行子组件的init过程，此时的options._isComponent为true，执行initInternalComponent函数执行组件的配置合并，那么理所当然的，在els
三岁就会写BUG·2022-02-12 08:21

vue响应式和依赖收集

看了vue源码后实现的一个很简单很简单的vue目的主要是串一下newVue()之后到组件挂载的流程，及数据更新时视图的更新流程。源码主要流程如下：newVue()this.
一蓑烟雨任平生_cui·2022-02-10 16:19

vue源码解读--event（自定义事件）

目录导航本节的示例代码如下经过上一节对原生事件的分析，我们已经知道了事件parse、codegen、invoker的流程。因此本节对自定义事件只做关键逻辑说明parse我们知道，在parse阶段，当对一个标签完整匹配后将调用parseEndTag执行end调用closeElement进行process作元素的加工，这包括了对标签元素的processAttrs。加工后的ast节点将被标记events
三岁就会写BUG·2022-02-10 11:11

vue源码学习之从入口开始探索import Vue from 'vue'究竟发生了什么？

1、揭露vue庐山真面目在web应用下，我们从他的入口platforms/web/entry-runtime-with-compiler.js开始看：导出vue从代码中我们可以看到最后导出了Vue对象，而这个vue对象实际上是通过import从./runtime/index引入的importVuefrom'./runtime/index'import进来了之后又给vue的原型上挂载了$mount方
peach_刘鑫·2022-02-10 06:20

vue源码之首次渲染过程详解

目录首次渲染init方法内部$mount内部-编译版本内部逻辑$mount内部-运行时版本内部逻辑(最终执行)runtime/index中的$mount方法core/instance/lifecycle中的mountComponentsrc/core/observer/watcher总结总结首次渲染src/core/instance/index.js中的this._init方法init方法内部$m
·2022-02-09 10:44

vue源码解析#虚拟DOM和diff算法（1）

怎么真正的、彻底的弄懂虚拟DOM和diff算法===》把它们的底层动手敲出来简单介绍一下虚拟DOM和diff算法diff实际上就是different，叫区别，这样一个单词的首字母，在计算机里面，表示最小量更新的这样一个方法（精细化比对最小量更新）===》代价小，不昂贵，性能得到优化===》所以在我们vue底层是很关键的1.1snabbdom简介snabbdom是瑞典单词，单词愿意“速度”[外链图片
老衲的少女心i·2022-02-08 10:55
上一页 6 7 8 9 10 11 12 13 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他