1. 前言 博主作为一名前端开发,日常开发的技术栈是Vue,并且用Vue开发也有一年多了,对其用法也较为熟练了,但是对各种用法和各种api使用都是只知其然而不知其所以然,因此,有时候在排查bug的时候就会有点捉襟见肘.鉴于此,索性就从github上clone下来一份Vue源码来学习学习,本系列博文将用来记录博主对Vue源码的整个学习过程,以及自己对源码的一些理解.一方面开阔自己的知识视野,另一方面也希望这些文字能够带给他人些许帮助. 2. 学习规划 2.1 源码学习目录 本项目所分析的Vue.j…

本项目受到了阮一峰老师的肯定,已刊登在阮一峰老师微信公众号的科技爱好者周刊第87期,同时也被多个微博大V转发,短短一个月时间内在github上star数量就已经突破2k! Hello,大家好,我最近在github上做一个关于Vue源码的开源项目,项目内容是: 利用工作之余时间逐行剖析Vuejs源码,将Vuejs源码分为九大模块,逐个击破,希望能帮助到更多的Vue初学者. 在线阅读地址:https://nlrx-wjc.github.io/Learn-Vue-Source-Code/ 项目地址:h…

系列文章: 手牵手,从零学习Vue源码 系列一(前言-目录篇) 手牵手,从零学习Vue源码 系列二(变化侦测篇) 陆续更新中... 预计八月中旬更新完毕. 1 概述 Vue最大的特点之一就是数据驱动视图,那么什么是数据驱动视图呢? 其实,我们可以把数据理解为状态,而视图就是用户可直观看到页面.页面不可能是一成不变的,它应该是动态变化的,而它的变化也应该是有迹可寻的,或者是由用户操作引起的,亦或者是由后端数据变化引起的,当状态发生改变时,页面也就应该随之而变化,所以我们就可以得到如下一个公式: U…

系列文章: 手牵手,从零学习Vue源码 系列一(前言-目录篇) 手牵手,从零学习Vue源码 系列二(变化侦测篇) 手牵手,从零学习Vue源码 系列三(虚拟DOM篇) 陆续更新中... 预计八月中旬更新完毕. 1 前言 作为一名前端开发人员,日常开发使用Vue.js,对于各种Api使用都是只知其然而不知其所以然,不想日复一日的从入门到入门,我们已经都这个岁数了,是时候做出一些改变了! 于是我决定从即日起从GitHub上clone下来一份Vue.js源码来深入研究,本系列将一直更新至博文对Vue源码…

vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了,差ddf那部分,因为考虑到自己要换工作了,所以暂缓下来先,ddf那块后期我会补上去.这个vue源码逐行分析,我基本每一行都打上注释,加上整个框架的流程思维导图,基本上是小白也能看懂的vue源码了. 说的非常的详细,里面的源码注释,有些是参考网上帖子的,有些是自己多年开发vue经验而猜测的,有些是自己跑上下文程序知道的,本人水平可能有…

阅读目录 Vue 的源码目录结构 预备知识 先捡软的捏 Angular 是 Google 亲儿子,React 是 Facebook 小正太,那咱为啥偏偏选择了 Vue 下手,一句话,Vue 是咱见过的最对脾气的 MVVM 框架.之前也使用过 knockout,angular,react 这些框架,但都没有让咱产生 follow 的冲动.直到见到 Vue,简直是一见钟情啊. Vue 的官方文档已经对 Vue 如何使用提供了最好的教程,建议 Vue 新手直接去官网学习,而不要在网上找些质量参差不齐的…

阅读目录 AST 节点定义 标签的正则匹配 解析用到的工具方法 解析开始标签 解析结束标签 解析文本 解析整块 HTML 模板 未提及的细节 本篇探讨 Vue 根据 html 模板片段构建出 AST 的具体过程.这对 Vue 的使用通常没什么帮助,但熟悉这个过程会对 Vue 的内部工作原理有更清晰的认识. 主代码位置:Vue 项目的 src/compiler/parser/html-parser.js 文件. AST 节点定义 AST 是由一个个节点组成的,正如 DOM 树是由 DOM 节点组成…

一.前言 最近一直在使用vue做项目,闲暇之余查阅了一些关于vue实现原理的资料,一方面对所了解到的知识做个总结,另外一方面希望能对看到此文章的同学有所帮助.本文如有不足之处,还请过往的大佬批评指正. 二.vue实现原理概述 vue作为一个前端渐进式的MVVM开发库,将广大的前端劳苦大众从DOM操作中解放出来:说到vue的实现原理,大体可分为三个要素: 1.数据的响应式,即vue可以监听到数据的变化 2.模板引擎,模板引擎大家都应该不陌生,同之前使用的handlebars.artTemplate…

用了Vue很久了,最近决定系统性的看看Vue的源码,相信看源码的同学不在少数,但是看的时候却发现挺有难度,Vue虽然足够精简,但是怎么说现在也有10k行的代码量了,深入进去逐行查看的时候感觉内容庞杂并且搞不懂代码的目的,同时网上的深入去仔细阐述Vue的compile/link/ expression parse/依赖订阅和收集/batcher的文章却不多,我自己读源码时,深感在这些环节可供参考的资料稀缺.网上较多的文章都在讲getter/setter.Mutation Observer和LRU缓…

1.前言: <keep-alive>是vue实现的一个内置组件,也就是说vue源码不仅实现了一套组件化的机制,也实现了一些内置组件. <keep-alive>官网介绍如下:<keep-alive>是Vue中内置的一个抽象组件,它自身不会渲染一个 DOM 元素,也不会出现在父组件链中.当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们. 这句话的意思是说,我们可以把一些不常变动的组件或者需要缓存的组件用<keep-alive>包裹起来,这样<ke…