vue源码

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

vue源码学习——响应式数据

系列文章目录vue源码学习——初始化datavue源码学习——响应式数据文章目录系列文章目录前言一、observe()二、Observer类三、Dep类三、Watcher总结前言在《vue源码学习——初始化
娃哈哈_·2021-02-08 10:57

Vue源码 深入响应式原理（一） 响应式对象

Vue源码深入响应式原理（一）响应式对象深入响应式原理(一)响应式对象响应式对象Object.definePropertyinitStateproxy`observe`ObserverdefineReactive
陈坚泓·2021-02-07 22:28

Vue源码解析系列课程--Vue数据响应式原理笔记（对象、数组）

目录一、defineReactive函数：二、递归侦测对象全部属性：1.根据传入的值为对象类型,修改defineReactive.js函数2.创建observe.js函数辅助Observer.js函数：3.创建一个工具函数utils.js4.创建Observer.js函数写Observer类5.对象测试：三、数组的响应式处理：1.array.js函数：2.Observer.js类：3.push、u
Cherish_喜爱·2021-02-07 15:11

vue源码学习——初始化data

系列文章目录vue源码学习——初始化data文章目录系列文章目录前言一、Vue的初始化二、initData总结前言在创建vue实例时，我们传入了option参数，包含data,methods,props
娃哈哈_·2021-02-05 11:18

【总结&&分析】Vue源码解读一

前言作为一个vue爱好学习者，也加入了源码解读的学习阵营，对一个vue和react框架都用过的前端妹子来说，还是更喜欢写vue的语法，现在也很主流，一直想研究一下vue框架背后的实现机制，对api掌握、数据驱动、数据更新、以及组件等有个更全面的认识、而不仅仅局限于会用它，现在就当做记录一下自己的理解，会持续更新~1：Vue的本质：其实就是一个用Function实现的Class，通过它的原型prot
·2021-02-04 19:57

我想用大白话讲清楚watch和computed

最近，我又开始学习vue源码，才真正理解了它们的
·2021-02-03 15:37

我想用大白话讲清楚watch和computed

最近，我又开始学习vue源码，才真正理解了它们的
·2021-02-03 15:56

Vue源码解析(五)-vuex

Vue组件中获得Vuex状态按官网说法：“由于Vuex的状态存储是响应式的，从store实例中读取状态最简单的方法就是在计算属性中返回某个状态”，本文结合下面的demo进行分析：importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)constvueStore=newVuex.Store({state:{count:0},mutations:{incr
·2021-02-03 10:00

Vue源码解析(变化侦测篇二)

Array的变化检测1.前言为什么Object数据和Array型数据会有两种不同的变化侦测方式？因为对于Object数据我们使用的是JS提供的对象原型上的方法Object.defineProperty，而这个方法是对象原型上的，所以Array无法使用这个方法，所以我们需要对Array型数据设计一套另外的变化侦测机制，虽然对Array型数据设计了新的变化侦测机制，但是其根本思路还是不变的。那就是：还
BayMin0-0·2021-02-02 10:40

Vue源码系列解析课程--虚拟DOM和diff算法（手写h函数）

目录一、介绍：二、虚拟节点的属性：三、如何使用h函数：四、手写h函数：1.vnode.js函数：2.h函数：一、介绍：h函数是用来产生虚拟节点。比如这样调用h函数：h('a',{propr:{href:'https://www.baidu.com/'}},'百度');将得到这样的虚拟节点：{"sel":"a","data":{props:{href:"https://www.baidu.com"}
Cherish_喜爱·2021-02-01 11:12

Vue的响应式——Vue源码学习总结(二)

Vue的响应式数据驱动视图：数据变化了，做一些事情让视图改变。数据劫持：当数据被访问的时候，进行拦截，此时会进行依赖收集，数据被改变你的时候，会发送通知，告诉依赖下的watcher该执行了。依赖收集：newwatcher()中，其中会传入vm._update(vm._render())函数，在watcher中执行vm._update(vm._render())，在_render当中会访问数据，然后
Xiao_yi_fei·2021-01-30 12:09

vue从哪看组件版本_VUE源码解析之路

Vue是一个MVVM框架，一个数据响应式的组件系统，通过把页面抽象成一个个组件来增加复用性，降低复杂性，提高维护便利性。所以重要的事情说三遍：页面一个视图区域抽象成组件，通用型工具抽出公共组件；页面一个视图区域抽象成组件，通用型工具抽出公共组件；页面一个视图区域抽象成组件，通用型工具抽出公共组件。Vue是数据操纵视图变化，VirtualDOM把最少的变动应用到真实的DOM上，以提升性能。截止至目前
weixin_39753213·2021-01-29 09:29

从设计模式理解Vue响应式（多图警告）

从设计模式理解Vue响应式序言近日公司开发一个拖拽表单项目，用到了Vue，部门老大便开始研读Vue源码，并且传授给我们，老大说，读源码不能仅仅只看懂源码，还得读懂他的设计思想，他为什么要这么设计，把自己当做设计者来读
·2021-01-27 17:17
上一页 9 10 11 12 13 14 15 16 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他