vue源码

教你阅读vue源码的正确姿势，看完就学废！

简介一下个人阅读vue源码的姿势，有建议欢迎评论区补充哈～一、源码阅读姿势1.先整体-后细节先弄清楚源码分为哪几个模块，整套流程是怎么将各个模块串起来的。然后细化了解每个模块的核心原理。
李不要熬夜·2021-04-30 16:24

Vue 源码解读-学习方法

首先会从Vue源码解读开，会产出一系列的文章和视频，从详细刨析源码，再到手写Vue1.0和Vue2.0。
乐字节教育·2021-04-29 16:04

vue源码学习（第一张） this访问data数据 拆散之后并不难

vue源码学习（第一张）this访问data数据前言本文章，为了让大家理解为什么我们实例化Vue对象中我们可以用this来访问data中的数据。
nirvanaAndRebirth·2021-04-28 23:58

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

Vue的组件对象支持了计算属性computed和侦听属性watch2个选项。我们接下来从源码实现的角度来分析它们两者有什么区别。computed计算属性的初始化是发生在Vue实例初始化阶段的initState函数中，执行了if(opts.computed)initComputed(vm,opts.computed)，initComputed的定义在src/core/instance/state.j
oWSQo·2021-04-28 09:55

vue源码之分析-day01

1，vue使用rollup打包构建工具打包工具.png2，根据上图的web-full-dev命令找到源文件和打包完的文件如下图：源文件.png
包磊磊·2021-04-27 23:03

【Vue源码】数据响应式原理 - 依赖收集 - defineReactive - Observer - Dep - Watcher

文章目录1.定义defineReactive函数1.1Why(临时变量)1.2How(闭包)2.对象的响应式处理——递归侦测对象全部属性object2.1Why（嵌套）2.2How（递归）observe.jsObserver.jsdef.jsdefineReactive.js2.3测试index.js3.数组的响应式处理3.1前置知识`Object.setPrototypeOf()`修改对象原型`
YK菌·2021-04-27 18:56

非兄弟非父子组件bus通讯踩坑记录

如大佬熟练掌握Vue或已对Vue源码有了解，不建议浪费时间阅读。
ishowman·2021-04-27 03:13

高级前端-Vue源码分析

1.Vue的响应式原理letnextTick=(cb)=>Promise.resolve().then(cb)letqueue=[]functionqueueJob(dep){queue.push(dep)//微任务，最后执行，真正执行数据操作函数nextTick(flushJobs)}functionflushJobs(){//拿出队列中的所有job，从第一个开始往后执行}ClassDep{de
JFrameSea·2021-04-22 14:44

VUE 2.0 碎碎念

先列一下我看源码时候参考的一些文章：Vue原理解析之VirtualDomVue2.1.7源码学习vue源码解析系列这几篇文章都写得很好，但也有一些缺点。
Rezel·2021-04-22 03:33

Vue源码解析四——初始化

我们最开始的列子是：{{a}}varvm=newVue({el:'#app',data:{a:1}})初始化执行_init方法，该方法进行到vm.$options=mergeOptions(resolveConstructorOptions(vm.constructor),options||{},vm)的时候,我们通过mergeOptions方法了解了选项规范化和选项合并。在我们的例子中，执行me
snow_in·2021-04-21 20:09

vue源码解读--optimize

目录导航本节示例代码如下经过之前分析，每一个ast元素节点都有一个type，1为元素节点、2为表达式节点、3为文本节点。调用optimize函数，入参为：ast节点调用genStaticKeysCached，这其实是执行cache的返回值，即cachedFn函数其入参为genStaticKeys因此，genStaticKeysCached拿到的是cacheFn函数，并在调用时执行genStatic
三岁就会写BUG·2021-04-20 22:24

Vue 源码解析 - 模板编译

[TOC]Vue学习笔记Vue源码解析-主线流程Vue源码解析-模板编译Vue源码解析-组件挂载Vue源码解析-数据驱动与响应式原理模板编译前文在对Vue源码解析-主线流程进行分析时，我们已经知道对于Runtime
Whyn·2021-04-20 22:56

vue源码解析(中)异步更新与虚拟dom

异步更新队列Vue⾼效的秘诀是⼀套批量、异步的更新策略。概念解释事件循环EventLoop：浏览器为了协调事件处理、脚本执⾏、⽹络请求和渲染等任务⽽制定的⼯作机制。微任务：微任务是更⼩的任务，是在当前宏任务执⾏结束后⽴即执⾏的任务。如果存在微任务，浏览器会清空微任务之后再重新渲染。微任务的例⼦有Promise回调函数、DOM变化等。宏任务Task：代表⼀个个离散的、独⽴的⼯作单元。**浏览器完成⼀
我不生产代码，我只是代码的搬运工·2021-04-19 22:52

Vue源码浅析

Vue源码浅析Vue.js源码Vue.js源码构建构建脚本构建过程RuntimeOnlyVSRuntime+Compiler总结Vue源码入口Vue的入口Vue的定义`initGlobalAPI`总结Vue.js
xiaobangsky·2021-04-19 11:12

vue首次渲染全过程

昨天有朋友问我vue在页面第一次加载时到底做了些什么，看来这个问题在很多朋友心中可能还比较模糊，今天我们一起来详细的看看vue的首次渲染过程vue源码下载地址：vue源码了解vue首次渲染全过程，我们应该从哪说起呢
ら陈佚晨·2021-04-17 22:54

vue源码解读-目录

组件化1-importvue发生了什么2-npmrunbuild做了什么3-mount实例挂载的实现4-render函数5-update6-组件render过程7-组件的vnode的patch过程8-合并配置9-生命周期10-组件注册11-异步组件--工厂函数异步组件-promise响应式1-响应式的创建过程2-依赖收集3-派发更新4-nextTick5-Vue.set--objectVue.se
三岁就会写BUG·2021-04-17 19:50

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

生命周期每个Vue实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到DOM、在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。在我们实际项目开发过程中，会非常频繁地和Vue组件的生命周期打交道，接下来我们就从源码的角度来看一下这些生命周期的钩子函数是如何被执行的。源码中最终执行生命周期
oWSQo·2021-04-17 15:03

【Vue源码】图解 diff算法 与 虚拟DOM-snabbdom-最小量更新原理解析-手写源码-updateChildren

文章目录0.文章结构预览0.1虚拟DOM如何被渲染函数（h函数）产生0.2diff算法的原理0.3虚拟DOM如何通过diff变成真正的DOM1.介绍1.1diff算法1.2虚拟DOM1.3关系——diff是发生在虚拟DOM上的2.snabbdom简介及准备工作2.1简介2.2搭建初始环境1.安装snabbdom2.安装webpack5并配置3.复制官方demoExample3.h函数的介绍与使用3
YK菌·2021-04-15 18:08

Vue源码--数据驱动

Vue源码中在src/core/instance/index.js文件下有定义了一个Vue类import{initMixin}from'./init'import{stateMi
小螃蟹_5f4c·2021-04-14 23:10

Vue中的模板渲染、响应式系统、虚拟DOM

前言在看vue源码的时候，觉得这几个vue的核心理念需要总结一下，遂写篇文章，自己忘记的时候再回来看看。
·2021-04-13 19:49

Vue中的模板渲染、响应式系统、虚拟DOM

前言在看vue源码的时候，觉得这几个vue的核心理念需要总结一下，遂写篇文章，自己忘记的时候再回来看看。
·2021-04-13 19:26

vue源码解读--v-model

目录导航本节的示例代码如下parse在parse阶段会对template对应的字符串进行遍历，当匹配到开始标签时，textEnd大于0则向下走获取到中间插值部分并最后调用chars生成一个文本节点，但是由于其是插值，故type为2接下来对input进行解析，由于input是单标签，故将直接走closeElement调用processElement对标签进行加工，函数processAttrs如下框红
三岁就会写BUG·2021-04-13 14:34

02vue源码阅读——源码目录设计

总源码目录Vue.js的源码都在src目录下，其目录结构如下。src├──compiler#编译相关├──core#核心代码├──platforms#不同平台的支持├──server#服务端渲染├──sfc#.vue文件解析├──shared#共享代码compilercompiler目录包含Vue.js所有编译相关的代码。它包括把模板解析成AST语法树，AST语法树优化，代码生成等功能。编译的工作
_wayliu·2021-04-09 21:26

根据vue源码解析watch的实现原理

引言computed和watch都是基于wacther来实现的，渲染函数,computed和watch在源码中公用的一个watcher类，根据传入不同的参数来定义不同的wacther。computed和watch的区别1computed的watcher默认不执行，需要用户获取的时候触发2computed有缓存效果，数据没有发生变化不会触发3computed是一对多4watch是多对一5watch支
·2021-04-09 00:02

根据vue源码解析watch的实现原理

引言computed和watch都是基于wacther来实现的，渲染函数,computed和watch在源码中公用的一个watcher类，根据传入不同的参数来定义不同的wacther。computed和watch的区别1computed的watcher默认不执行，需要用户获取的时候触发2computed有缓存效果，数据没有发生变化不会触发3computed是一对多4watch是多对一5watch支
·2021-04-09 00:52

源码学习之前端模块化

1.什么是模块化2.为什么需要模块化3.源码中的模块化3.1AMD3.2Commonjs3.3Vue源码解析之模块化1.什么是模块化模块化并不是前端独有的思想。
·2021-04-02 14:15

2021-03-27 好文章链接

webpack4https://zhuanlan.zhihu.com/p/50851312vue源码https://zhuanlan.zhihu.com/p/79833863bloghttps://book.penblog.cn
斗伽·2021-04-02 14:13

源码学习之前端模块化

1.什么是模块化2.为什么需要模块化3.源码中的模块化3.1AMD3.2Commonjs3.3Vue源码解析之模块化1.什么是模块化模块化并不是前端独有的思想。
·2021-04-01 17:11

vue源码解析（一）

vue源码解析（一）先决条件需要能够熟悉使用vue，了解vue属性和方法。带着问题去看源码熟悉ES6或者Typescript语法确定源码的版本，我看的是2.6.12从哪文件开始看vue源码？
jieniz·2021-03-29 20:54

Vue源码各过程的简单概括

Vue首次渲染过程：Vue初始化，添加实例成员、静态成员，并在原型上挂载__patch__方法和$mount方法。初始化结束，调用newVue()。在newVue()的过程中，调用this.init()方法,给vue的实例挂载各种功能。在this.init()内部最终会调用entry-runtime-with-compiler.js中的vm.$mount(),用于获取render函数。$mount
fengyw_233·2021-03-28 13:35

你想要的——vue源码分析（1）

背景Vue.js是现在国内比较火的前端框架，希望通过接下来的一系列文章，能够帮助大家更好的了解Vue.js的实现原理。本次分析的版本是Vue.js2.5.16。(持续更新中。。。)目录Vue.js的引入Vue的实例化Vue.js的引入这一章将会分析用户在引入Vue.js后，Vue框架做的初始化工作：创建Vue这个类，并往Vue类上添加类属性&类方法和实例属性&实例方法。流程图：流程分析：1）入口文
·2021-03-27 23:44

你想要的——vue源码分析（2）

背景Vue.js是现在国内比较火的前端框架，希望通过接下来的一系列文章，能够帮助大家更好的了解Vue.js的实现原理。本次分析的版本是Vue.js2.5.16。(持续更新中。。。)目录Vue.js的引入Vue的实例化Vue数据处理（未完成）。。。Vue的实例化由上一章我们了解了Vue类的定义，本章主要分析用户实例化Vue类之后，Vue.js框架内部做了具体的工作。举个例子vardemo=newVu
·2021-03-27 23:14

Object.defineProperty的理解思路

Object.defineProperty大家都不陌生，废话不多说，从Vue源码开始，已删除部分关联不大的代码/***DefineareactivepropertyonanObject.
·2021-03-27 17:22

Object.defineProperty的理解思路

Object.defineProperty大家都不陌生，废话不多说，从Vue源码开始，已删除部分关联不大的代码/***DefineareactivepropertyonanObject.
·2021-03-24 10:04

Vue源码 虚拟Dom总结

总体过程中，在Vue首次渲染过后再updateComponent()这个方法中调用了vm._render()和vm._update()这两个方法一、vm._render()在render方法里面它去调用了用户传过来的render函数或者是通过模板编译生成render函数，如果调用了用户传过来的render函数那么接下来调用的是vm.$createElement这个方法（它就是h函数），如果是模板编
好好学习用力吃饭·2021-03-18 17:55

Vue.js 源码学习五 —— provide 和 inject 学习

继续开始学习Vue源码吧~在Vue.js的2.2.0+版本中添加加了provide和inject选项。他们成对出现，用于父级组件向下传递数据。
VioletJack·2021-03-11 18:43

vue 数据双向绑定的实现方法

1.前言本文适合于学习Vue源码的初级学者，阅读后，你将对Vue的数据双向绑定原理有一个大致的了解，认识Observer、Compile、Wathcer三大角色（如下图所示）以及它们所发挥的功能。
·2021-03-09 22:35

Vue中避免滥用this去读取data中数据

一、用this读取data中数据的过程在Vue源码中会把data中数据添加getter函数和setter函数，将其转成响应式的。getter函数代码如下所示：fun
·2021-03-09 21:46

阅读Vue源码--前置知识

Flow认识FlowJavaScript静态类型检查器，vue源码利用Flow做静态类型检查为什么用Flowjs动态类型语言，类型检查发展趋势，在编译期尽早发现bug，不影响代码运行，使编写js有强类型语言的体验
翔子丶·2021-03-08 21:53

Vue源码解析第一篇 Vue双向绑定原理

Vue学习路线1、变化侦测篇学习Vue中如何实现数据的响应式系统，从而达到数据驱动视图。数据驱动视图：简单来说就是数据变化引起视图变化。变化侦测：就是追踪状态，或者说是数据的变化，一旦发生变化，就去更新视图。angular中，一旦发生了可能引起数据变化的时候就会自根向下，进行检查（树的深度遍历，脏检查）。脏检查：存储所有变量的值，当可能有变量变化需要检查时，就将所有变量的旧值跟新值进行比较，不相等
快乐的小斑鸠·2021-03-03 16:53

vue源码解析-$mount

上一篇中，我们一起探讨了newVue({...})背后发生了什么。那么当我们实例化vue之后，进行dom挂载又发生了什么呢？细心的同学会发现：$mount方法在多个文件中被定义，如：src/platform/web/entry-runtime-with-compiler.jssrc/platform/web/runtime/index.jssrc/platform/weex/runtime/ind
·2021-02-24 18:09

Vue源码解析系列——响应式原理篇：理解Dep类和Watcher类

回顾如果有感兴趣的同学可以看看我之前的源码分析文章，这里呈上链接：《Vue源码分析系列：目录》写在前面这一篇我们先不着急阅读源码，因为接下来需要用到一个比较复杂的设计模式：观察者模式，而且还需要理解依赖收集和派发更新才能继续向下阅读源码
爱学习的前端小黄·2021-02-23 21:50

Vue源码解析系列——组件篇：组件注册

回顾如果有感兴趣的同学可以看看我之前的源码分析文章，这里呈上链接：《Vue源码分析系列：目录》组件注册Vue的组件祖册分为两部分，一部分为全局组件注册，也就是使用Vue.component(tag,options
爱学习的前端小黄·2021-02-22 19:48

vue源码解析-开始

vue.js是一套构建用户界面的渐进式框架，其轻量，易学受到许多开发者的喜爱。了解源码，有助于我们深刻理解vue。知其然知其所以然，是每个工程师进阶的必经之路。话不多说，进入主题。一.模块概览vue的源码主要分6个大模块模块名说明compiler编译相关corevue核心代码platforms平台，目前是web和weexserver服务端渲染sfc.vue文件解析shared共享代码二.主入口分析
·2021-02-22 11:52

Vue源码 深入响应式原理 （五）组件更新

Vue源码深入响应式原理（五）组件更新Vue源码深入响应式原理（五）组件更新组件更新新旧节点不同新旧节点相同updateChildren总结Vue源码学习目录Vue源码深入响应式原理（五）组件更新学习内容和文章内容来自黄轶老师黄轶老师的慕课网视频教程地址
陈坚泓·2021-02-21 23:21

Vue源码解析系列——组件篇：合并配置

回顾如果有感兴趣的同学可以看看我之前的源码分析文章，这里呈上链接：《Vue源码分析系列：目录》mergeOptions通过前面的学习我们了解到，Vue对于非组件和组件有着不同的合并options的策略，
爱学习的前端小黄·2021-02-21 15:31

Vue源码 深入响应式原理 （四）计算属性 VS 侦听属性

Vue源码深入响应式原理（四）计算属性VS侦听属性Vue源码深入响应式原理（四）计算属性VS侦听属性computed单步调试代码watch单步调试代码Watcheroptionsdeepwatcheruserwatchercomputedwatchersyncwatcher
陈坚泓·2021-02-21 10:30

vue源码学习——模板编译

系列文章目录vue源码学习——初始化datavue源码学习——响应式数据文章目录系列文章目录前言一、Vue的模板语法二、Vue的$mount三、compiler主要文件四、compile过程1、parse2
娃哈哈_·2021-02-19 09:26

vue源码分析-new Vue发生了什么

简单描述newVue发生了什么Vue是function实现的class，当执行newVue()的时候，会进入到这个function，执行this._init()初始化，同时传入options参数，_init方法是在原型上挂载的方法，它是在什么时候被定义的呢？实际上我们初始化的时候下面会执行initMixin()混入，这个方法是在init.js中被定义的，方法中在原型上挂载_init方法_init方
frontendchen·2021-02-17 22:49

Vue源码探秘之 数据响应式原理

Vue源码探秘之数据响应式原理从MVVM模式说开去模板我{{age}}岁了数据变化this.age++;数据变化，视图会自动变化侵入式和非侵入式尤小右找到了“上帝的钥匙”Object.defineProperty
BenSimons_25·2021-02-11 11:06
上一页 9 10 11 12 13 14 15 16 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他