E-COM-NET
首页
在线工具
Layui镜像站
SUI文档
联系我们
推荐频道
Java
PHP
C++
C
C#
Python
Ruby
go语言
Scala
Servlet
Vue
MySQL
NoSQL
Redis
CSS
Oracle
SQL Server
DB2
HBase
Http
HTML5
Spring
Ajax
Jquery
JavaScript
Json
XML
NodeJs
mybatis
Hibernate
算法
设计模式
shell
数据结构
大数据
JS
消息中间件
正则表达式
Tomcat
SQL
Nginx
Shiro
Maven
Linux
Vue源码
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
前端htmlcss
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
dom
vue
源码
lifecycle
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
Vue源码解析
vue
源码解析
虚拟DOM
diff算法
Vue源码
探秘之 虚拟DOM和diff算法
Vue源码
探秘之虚拟DOM和diff算法请扪心自问:你到底懂不懂虚拟DOM和diff算法??
BenSimons_25
·
2022-02-08 10:25
Vue源码探秘
vue.js
javascript
typescript
vue源码
学习 深入patch diff双端对比算法
什么时候调用patch在beforeMount和mounted之间,会执行options.render函数生成新的VNode树。然后调用vm._update(新VNode)更新,然后进入到patch阶段。//src/core/instance/lifecycle.jsexportfunctionmountComponent(vm:Component,el:?Element,hydrating?:b
一袋米要扛几楼_
·
2022-02-08 10:11
vue2.0
vue
web前端
vue源码
vue
前端
Vue源码
解析系列——diff算法篇:diff算法(一)
回顾如果有感兴趣的同学可以看看我之前的源码分析文章,这里呈上链接:《
Vue源码
分析系列:目录》写在前面有了前面数据驱动、组件化、响应式原理篇的知识储备,(没看过的同学可以戳这:《
Vue源码
分析系列》)这时我们就有足够的的理论去支持我们研究
爱学习的前端小黄
·
2022-02-08 10:39
vue
源码
《
Vue源码
解读》深入浅出Vue的Diff算法(一)
各位小伙伴新年好啊~新的一年又要开始了,继续努力加油…~求关注,求收藏,求点赞,如果发现博主有写的不合理的地方请及时告知,谢谢~前言最近在看Vue2.6.14版本的源码,本系列博文主要以记录个人源码学习相关心得,希望我个人的学习心得能对正在学习的你有一点点帮助;本文主要记录了关于Diff算法相关的学习,明白了Diff算法大致的运行逻辑以及Virtual-DOM的来龙去脉;注意的是本文不涉及Diff
Oliver尹
·
2022-02-08 09:31
深入浅出Vue源码
vue.js
算法
前端
Diff
Diff算法
Vue源码
解析篇 (二)keep-alive源码解析
keep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中,我们来探究一下它的源码实现。首先回顾下使用方法举个栗子请点击exportdefault{data(){return{isShow:true}},methods:{handleClick(){this.isShow=!this.isShow;}}}在点击按钮时,两个组件会发生切换,但是这时候这两个组件的状态会被缓存
zhongmeizhi
·
2022-02-06 17:36
Vue之虚拟DOM和diff算法
首先介绍一下snabbdom,snabbdom是著名的虚拟DOM库,是diff算法的鼻祖,
Vue源码
借鉴了snabbdom。
团子哒哒
·
2022-02-03 03:16
vue源码
分析(3)
记录之...数据绑定:一旦data中的某个属性数据更新,所有界面上直接使用或者间接使用此属性的节点就都会更新。数据劫持:是vue中用来实现是数据绑定的一种技术基本思想:通过defineProperty()来监视data中所有属性(任意层次)数据的变化,一旦变化就去更新界面。observer:劫持监听所有属性。dep:实例:在初始化给data的属性进行数据劫持时创建的。个数:与data中的属性一一对
June_Done
·
2022-02-02 23:07
九、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信IM,支持各类消息收发,音视频通话,附
vue源码
-聊天会话管理的实现
聊天会话管理的实现1.加载会话列表在插件底层已经做好了会话缓存的处理,我们只需要根据腾讯提供的api加载即可,具体的定义如下:具体调用的代码如下,这里我们需要注意nextSeq这个参数,是由插件提供反馈的,因此我们每次执行getConversationList之后需要在callback中记录最新的nextSeqexportdefault{data(){return{nextSeq:0,conver
·
2022-01-16 14:39
八、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信IM,各类消息收发,音视频通话,附
vue源码
-聊天输入框扩展面板的实现
文章概述本次的文章主要是对于前面的聊天输入框的一个补充,对于有多种要求的开发者而言,可以借鉴本文实现高度定制化的扩展面板聊天输入框扩展面板的实现1.为何要扩展面板对于聊天输入而言,我们不可能把所有的业务都搬到一个输入框内,也不可能把所有的操作都搬到输入框内,因此我们很有必要去实现一个扩展面板,并且提供一个简单易用的操作逻辑,比如下图。2.内置的表情面板在demo中,由于聊天输入框的需要,我们内置了
·
2022-01-15 23:42
vue源码
学习中的阻碍知识
vue思维导图.pngObject.keys()延申:Object.keys().map()一道面试题应用考察27题传送门:https://www.jianshu.com/p/d35a406acdc6一、语法:参数:对象返回值:对象可枚举属性的字符串数组二、应用处理对象,返回可枚举的属性数组image.png处理数组,返回索引值数组letarr=[1,2,3,4,5]image.png处理字符串,
拾钱运
·
2022-01-15 15:00
七、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信IM,支持各类消息收发,音视频通话,附
vue源码
-聊天消息项的实现
文章概述整个IM项目的关键点来了,本文将讨论一下聊天消息的实现,如何收发消息并且实现聊天消息的UI显示。聊天消息项的实现1.收发聊天消息1.1接收聊天消息接收聊天消息显得很简单,在之前的会话列表实现中已经做过一次,这次我们代码其实差不多,唯一不一样的是接受后我们需要做筛选确定需要回显到聊天消息界面的项目。绑定消息事件部分的代码如下://这里选择在onLoad绑定,确定不会漏接数据asynconLo
·
2022-01-12 23:53
上一页
6
7
8
9
10
11
12
13
下一页
按字母分类:
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
其他