vue源码

vue源码分析-响应式系统(一)

从这一小节开始，正式进入Vue源码的核心，也是难点之一，响应式系统的构建。
·2022-10-31 10:38

Vue源码学习之数据初始化

目录初始化数据创建Vue实例构造函数扩展方法初始化状态调用initData方法对数据进行代理初始化数据环境搭建:菜鸟学Vue源码第一步之rollup环境搭建步响应式数据的核心就是，数据变化了可以监听到数据变化了
·2022-10-21 18:17

vue源码分析-响应式系统工作原理

上一章，我们讲到了Vue初始化做的一些操作，那么我们这一章来讲一个Vue核心概念响应式系统。我们先来看一下官方对深入响应式系统的解释:当你把一个普通的JavaScript对象传给Vue实例的data选项，Vue将遍历此对象所有的属性。并使用Object.defineProperty把这些属性全部转为getter/setter。Object.defineProperty是ES5中一个无法shim的特
·2022-10-19 15:49

vue源码分析-从new Vue开始

初学vue，你得知道我们是从newVue开始的：newVue({el:'#app',data:obj,...})那你觉得是不是很有意思，咱们newVue之后，就可以使用他那么多的功能,可见Vue是暴出来的一个一个功能类函数，我们进入源码一探究竟：importVuefrom'./instance/index'import{initGlobalAPI}from'./global-api/index'/
·2022-10-19 15:48

vue源码分析-keep-alive原理（上）

上一节最后稍微提到了Vue内置组件的相关内容，从这一节开始，将会对某个具体的内置组件进行分析。首先是keep-alive，它是我们日常开发中经常使用的组件，我们在不同组件间切换时，经常要求保持组件的状态，以避免重复渲染组件造成的性能损耗，而keep-alive经常和上一节介绍的动态组件结合起来使用。由于内容过多，keep-alive的源码分析将分为上下两部分，这一节主要围绕keep-alive的首
·2022-10-19 15:47

vue源码分析-动态组件

前面花了两节的内容介绍了组件，从组件的原理讲到组件的应用，包括异步组件和函数式组件的实现和使用场景。众所周知，组件是贯穿整个Vue设计理念的东西，并且也是指导我们开发的核心思想，所以接下来的几篇文章，将重新回到组件的内容去做源码分析，首先会从常用的动态组件开始，包括内联模板的原理，最后会简单的提到内置组件的概念，为之后的文章埋下伏笔。12.1动态组件动态组件我相信大部分在开发的过程中都会用到，当我
·2022-10-19 15:17

vue源码分析-diff算法核心原理

这一节，依然是深入剖析Vue源码系列，上几节内容介绍了VirtualDOM是Vue在渲染机制上做的优化，而渲染的核心在于数据变化时，如何高效的更新节点，这就是diff算法。
·2022-10-18 17:12

vue源码分析-v-model的本质

双向数据绑定这个概念或者大家并不陌生，视图影响数据，数据同样影响视图，两者间有双向依赖的关系。在响应式系统构建的上，中，下篇我已经对数据影响视图的原理详细阐述清楚了。而如何完成视图影响数据这一关联？这就是本节讨论的重点：指令v-model。由于v-model和前面介绍的插槽，事件一致，都属于vue提供的指令，所以我们对v-model的分析方式和以往大同小异。分析会围绕模板的编译，render函数的
·2022-10-18 17:11

vue源码分析-插槽原理

Vue组件的另一个重要概念是插槽，它允许你以一种不同于严格的父子关系的方式组合组件。插槽为你提供了一个将内容放置到新位置或使组件更通用的出口。这一节将围绕官网对插槽内容的介绍思路，按照普通插槽，具名插槽，再到作用域插槽的思路，逐步深入内在的实现原理,有对插槽使用不熟悉的，可以先参考官网对插槽的介绍。10.1普通插槽插槽将作为子组件承载分发的载体，简单的用法如下10.1.1基础用法varchild=
·2022-10-18 17:11

vue源码分析-事件机制

这个系列讲到这里，Vue基本核心的东西已经分析完，但是Vue之所以强大，离不开它提供给用户的一些实用功能，开发者可以更偏向于业务逻辑而非基本功能的实现。例如，在日常开发中，我们将@click=***用得飞起，但是我们是否思考，Vue如何在后面为我们的模板做事件相关的处理，并且我们经常利用组件的自定义事件去实现父子间的通信，那这个事件和和原生dom事件又有不同的地方吗，能够实现通信的原理又是什么，带
·2022-10-18 17:11

vue源码分析-组件

我们知道，组件是Vue体系的核心，熟练使用组件是掌握Vue进行开发的基础。上一节中，我们深入了解了Vue组件注册到使用渲染的完整流程。这一节我们会在上一节的基础上介绍组件的两个高级用法：异步组件和函数式组件。6.1异步组件6.1.1使用场景Vue作为单页面应用遇到最棘手的问题是首屏加载时间的问题，单页面应用会把页面脚本打包成一个文件，这个文件包含着所有业务和非业务的代码，而脚本文件过大也是造成首页
·2022-10-17 14:05

vue源码分析-响应式系统(二)

为了深入介绍响应式系统的内部实现原理，我们花了一整节的篇幅介绍了数据(包括data,computed,props)如何初始化成为响应式对象的过程。有了响应式数据对象的知识，上一节的后半部分我们还在保留源码结构的基础上构建了一个以data为数据的响应式系统，而这一节，我们继续深入响应式系统内部构建的细节，详细分析Vue在响应式系统中对data,computed的处理。7.8相关概念在构建简易式响应式
·2022-10-17 14:34

vue源码分析-响应式系统(三)

上一节，我们深入分析了以data,computed为数据创建响应式系统的过程，并对其中依赖收集和派发更新的过程进行了详细的分析。然而在使用和分析过程中依然存在或多或少的问题，这一节我们将针对这些问题展开分析，最后我们也会分析一下watch的响应式过程。这篇文章将作为响应式系统分析的完结篇。7.12数组检测在之前介绍数据代理章节，我们已经详细介绍过Vue数据代理的技术是利用了Object.defin
·2022-10-17 14:34

vue源码分析-响应式系统(一)

从这一小节开始，正式进入Vue源码的核心，也是难点之一，响应式系统的构建。
·2022-10-17 14:33

vue源码分析-渲染过程

继上一节内容，我们将Vue复杂的挂载流程通过图解流程，代码分析的方式简单梳理了一遍，最后也讲到了模板编译的大致流程。然而在挂载的核心处，我们并没有分析模板编译后渲染函数是如何转换为可视化DOM节点的。因此这一章节，我们将重新回到Vue实例挂载的最后一个环节：渲染DOM节点。在渲染真实DOM的过程中，Vue引进了虚拟DOM的概念，这是Vue架构设计中另一个重要的理念。虚拟DOM作为JS对象和真实DO
·2022-10-10 16:44

vue源码分析-挂载流程和模板编译

按照Vue源码的设计思路，初始化过程还会进行很多操作，例如组件之间创建关联，初始化事件中心，初始化数据并建立响应式系统等，并最终将模板和数据
·2022-10-10 16:43

vue源码分析-基础的数据代理检测

简单回顾一下这个系列的前两节，前两节花了大量的篇幅介绍了Vue的选项合并，选项合并是Vue实例初始化的开始，Vue为开发者提供了丰富的选项配置，而每个选项都严格规定了合并的策略。然而这只是初始化中的第一步，这一节我们将对另一个重点的概念深入的分析，他就是数据代理，我们知道Vue大量利用了代理的思想，而除了响应式系统外，还有哪些场景也需要进行数据代理呢？这是我们这节分析的重点。2.1数据代理的含义数
·2022-10-10 16:42

vue源码中的渲染过程是怎样的

4.1VirtualDOM4.1.1浏览器的渲染流程当浏览器接收到一个Html文件时，JS引擎和浏览器的渲染引擎便开始工作了。从渲染引擎的角度，它首先会将html文件解析成一个DOM树，与此同时，浏览器将识别并加载CSS样式，并和DOM树一起合并为一个渲染树。有了渲染树后，渲染引擎将计算所有元素的位置信息，最后通过绘制，在屏幕上打印最终的内容。JS引擎和渲染引擎虽然是两个独立的线程，但是JS引擎却
·2022-10-04 20:09

从vue源码中学习观察者模式

摘要：源码解读设计模式系列文章将陆陆续续进行更新中~摘要：源码解读设计模式系列文章将陆陆续续进行更新中~观察者模式首先话题下来，我们得反问一下自己，什么是观察者模式？概念观察者模式（Observer）：通常又被称作为发布-订阅者模式。它定义了一种一对多的依赖关系，即当一个对象的状态发生改变的时候，所有依赖于它的对象都会得到通知并自动更新，解决了主体对象与观察者之间功能的耦合。讲个故事上面对于观察者
·2022-10-04 20:07

深度学习Vue源码-模板编译原理

前言此篇主要手写Vue2.0源码-模板编译原理上一篇咱们主要介绍了Vue数据的响应式原理对于中高级前端来说响应式原理基本是面试Vue必考的源码基础类如果不是很清楚的话基本就被pass了那么今天咱们手写的模板编译原理也是Vue面试比较频繁的一个点而且复杂程度是高于响应式原理的里面主要涉及到ast以及大量正则匹配大家学习完可以看着思维导图一起手写一遍加深印象哈适用人群：没时间去看官方源码或者看源码看的
·2022-10-03 15:49

上帝视角看Vue源码整体架构+相关源码问答

前言这段时间利用课余时间夹杂了很多很多事把Vue2源码学习了一遍，但很多都是跟着视频大概过了一遍，也都画了自己的思维导图。但还是对详情的感念模糊不清，故这段时间对源码进行了总结梳理。本篇文章更合适于已看过Vue2源码，进一步总结加深概念的人群。若还未读过源码或零碎一知半解的小伙伴，也可以挑选阶段进行总结梳理，个人还是强烈认为需要过一遍源码。目录结构├──benchmarks性能、基准测试├──di
·2022-10-03 15:49

Vue 响应式实现原理深入浅出

本文也是在阅读了Vue源码后的理解以及模仿实现，所以跟随作者的思路，我们一起由浅入深的探索一下vue吧！本文Vue源码版本：2.6.14，为了便于理
前端码农小王·2022-10-03 08:11

vue源码分析

一、从了解一个开源项目入手要看一个项目的源码，不要一上来就看，先去了解一下项目本身的元数据和依赖，除此之外最好也了解一下PR规则，IssueReporting规则等等。特别是“前端”开源项目，我们在看源码之前第一个想到的应该是：package.json文件。在package.json文件中，我们最应该关注的就是scripts字段和devDependencies以及dependencies字段，通过
我就是陈星烨·2022-10-01 22:26

前端，通过面试去学习，框架（vue react reactHook 微信小程序）

框架面试的时候，一般面试官会问vuereact哪个用的多，再针对你用的多的进行提问就我个人而言，我觉得网上讲解vue源码的博客比较多，vue的相关面试题整理的也比较多，面试时可能更好回答一些react用的没有
IronKee·2022-09-29 15:13

Vue源码解读之InitState

前面我们讲到了_init函数的执行流程，简单回顾下：初始化生命周期-initLifecycle初始化事件-initEvents初始化渲染函数-initRender调用钩子函数-beforeCreate初始化依赖注入-initInjections初始化状态信息-initState初始化依赖提供-initProvide调用钩子函数-created一共经过上面8步，init函数执行完成，开始mount渲
·2022-09-28 12:31

一比一手写迷你版vue，彻底搞懂vue运行机制

本篇文章通过学习文档及视频教程实现手写一个简易的Vue源码实现数据双向绑定，解析指令等。
·2022-09-26 16:45

vue源码中的nextTick是怎样实现的

一、Vue.nextTick内部逻辑在执行initGlobalAPI(Vue)初始化Vue全局API中，这么定义Vue.nextTick。functioninitGlobalAPI(Vue){//...Vue.nextTick=nextTick;}可以看出是直接把nextTick函数赋值给Vue.nextTick，就可以了，非常简单。二、vm.$nextTick内部逻辑Vue.prototype.
·2022-09-26 13:29

实现mini-vue之 computed，watch ，数组响应式的实现

computed续上文—：有关vue源码的简单实现实现一个属于自己的min-vue本文实现：computedwatcharray的深度响应式劫持重写了数组的7个变异方法对于数组元素还是数组的也能劫持计算属性
尤雨东·2022-09-14 02:42

Vue源码解析(一)，Vue中DOM的挂载过程

1.从入口开始newVue()做了什么从入口文件开始，我们来分析一下newVue()做了哪些工作，Vue实际上是一个类，我们通过newVue()来创建一个Vue实例。现在来看一下源码，在src/core/instance/index.jsfunctionVue(options){//判断是否通过new创建Vue实例if(process.env.NODE_ENV!=='production'&&!(
当年明月又天涯·2022-09-14 02:59

vue(8) - 收藏集 - 掘金

https://segmentfault.com/a/11900000093932312017百度前端技术学院——vue源码分析之动态数据绑定一-前端-掘金一、Object.keys()Object.keys
barnett_y·2022-09-02 10:40

Vue-js-源码剖析-响应式原理（19）

Vue源码解析-响应式原理欢迎访问个人网站：blog.5coder.cn课程目标Vue.js的静态成员和实例成员初始化过程vue.use()、vue.set()、vue.extened()等这些全局成员的创建过程
5coder·2022-09-01 20:57

JS设计模式之发布-订阅模式

目录概念举例特点代码实现事件监听函数addEventListenerjQuery实现原生方式实现手写JS实现Vue的EventBusvue源码中的实现优缺点概念它定义了一种一对多的关系，让多个订阅者对象同时监听一个发布者
神小夜·2022-08-31 09:23

vue源码解读子节点优化更新

目录前言优化前存在的问题优化策略分析源码解析小结前言Vue中更新节点，当新VNode和旧VNode都是元素节点且都有子节点时，Vue会循环对比新旧VNode的子节点数组，然后根据不同情况做不同处理。虽然这种方法能解决问题，但是当更新子节点特别多时，循环算法的时间复杂度就会很高，所以Vue对此进行了优化。优化前存在的问题现在有新的newChildren数组和旧的oldChildren数组：newCh
·2022-08-20 19:20

Vue-源码详解mixin混入和合并策略

官方文档对mixin介绍比较少，不能了解甚少，于是便想研究下源码对它混入做个研究和总结本文基于Vue源码2.x版本一、说在前面在分析mixin之前，先看看两个方法，它们在混入的合并过程中扮演着重要的
liu__software·2022-08-15 09:03

Vue源码cached解析

目录前言参数解释传入参数返回参数源码解释实验解释源码疑问前言创建一个纯函数的缓存版本主要用途：优化性能——对于之前运算过一次的内容，利用闭包原理，缓存起来，避免重复调用，造成性能的浪费/***Createacachedversionofapurefunction.*/functioncached(fn){varcache=Object.create(null);return(functioncac
·2022-08-13 12:31

Vue源码makeMap函数深入分析

目录前言参数解释源码解释源码疑问为什么使用[]访问属性前言创建一个map，返回一个检查key是否在map中的函数主要用途：判断标签是原生组件还是自定义组件，直接通过map这种key-value一一对应的数据结构，实现快速判断/***Makeamapandreturnafunctionforcheckingifakey*isinthatmap.*/functionmakeMap(str,expect
·2022-08-12 18:16

大二下第九周

这一周主要准备了面试，我之前的重心主要是放在vue源码和算法上边了，基本就是来到小组第一件事就是打开力扣，虽然有时候一道题做俩小时也做不出来，然后就是去看vue源码，我做事喜欢把这件事做好至少做完再去干下一件事
月牙尔·2022-08-09 09:49

Vue源码学习之模板编译

模板编译是在Vue.prototype.$mount(runtime-with-compiler.ts文件)函数中在没有render时调用触发的，生成render函数。const{render,staticRenderFns}=compileToFunctions(template,{outputSourceRange:__DEV__,shouldDecodeNewlines,shouldDeco
kgduu·2022-07-19 07:29

图解Vue 响应式流程及原理

在学习vue源码的时候发现组件化过程很绕？在响应式过程中Observer、Dep
·2022-07-08 19:38

Vue 源码中的工具函数

前言在Vue源码中，封装了很多工具函数，学习这些函数，一方面学习大佬们的实现方式，另一方面是温习基础知识，希望大家在日常工作中，简单的函数也可以自己封装，提高编码能力。
·2022-07-05 17:06

14.webpack ----Vue源码的打包

1.首先安装依赖，并且在mian.js引入import{createApp}from'vue'//vue代码constapp=createApp({template:`我是vue渲染出来的`data(){return{title:"Helloworld"}}})app.mount("#app")//挂载到某个地方2.安装vue3的版本：[email protected]对SFC(
要成为光的女人·2022-06-27 22:06

JavaScript 编写枚举的最有效方法分享

学习Vue源码前言假设有这样一个场景，我们需要统计员工的技术栈，目前我们需要标记的技术有CSS、JavaScript、HTML、WebGL。
·2022-06-22 18:28

3-2-1vue响应式数据源码

1.Vue源码解析--响应式原理最好不要太看重细枝末节支线主要看主线vue.js静态成员和实例成员初始化过程首次渲染过程数据响应式原理2.准备工作Vue源码的获取分析Vue2.6新版本发布后一段过渡时期
Rua魂·2022-06-04 18:09

Vue源码解读（一）：准备工作

最近在掘金上看到李永宁大佬的《Vue源码解读》系列文章后，又开始蠢蠢欲动了。这次主要是对核心实现的一个梳理，细节方面不会太过介绍。源码地址本次学习的Vue源码为2
明么·2022-06-04 18:03

java毕业设计论文源码介绍 基于Vue+ssm汽车租赁系统

一、源码描述这是一款javaWeb的前后端分离的Springboot和vue源码，包含论文和答辩ppt,前端vue.js,基于B/S模式,idea或者eclipse为开发工具,功能也比较全面，毕业设计使用
abo2020·2022-06-03 22:15

0215前端日报：vue源码剖析思维导图

给「前端开发博客」加星标，每天打卡学习长按二维码即可识别“进入网页”查看哟~1、vue源码剖析思维导图（一）趁这个“难得”的假期，学习了一下vue源码，说实话，对我这种小菜鸟来说非常难啃，但还咬咬牙坚持了下来
前端开发博客·2022-05-20 13:46

vue源码watcher阅读记录

1.首先从computed研究开始functioninitComputed(vm:Component,computed:Object){//首先使用连等方式，声明watchers，并给vue实例上添加_computedWatchers属性，二者指向同一对象，用来记录所有的computedconstwatchers=vm._computedWatchers=Object.create(null)//
·2022-05-13 17:04

petite-vue源码剖析-沙箱模型

在解析v-if和v-for等指令时我们会看到通过evaluate执行指令值中的JavaScript表达式，而且能够读取当前作用域上的属性。而evaluate的实现如下：constevalCache:Record=Object.create(null)exportconstevaluate=(scope:any,exp:string,el?:Node)=>execute(scope,`return(
·2022-04-20 15:27

petite-vue源码剖析-沙箱模型

在解析v-if和v-for等指令时我们会看到通过evaluate执行指令值中的JavaScript表达式，而且能够读取当前作用域上的属性。而evaluate的实现如下：constevalCache:Record=Object.create(null)e
^_^肥仔John·2022-04-20 15:00

petite-vue源码剖析-逐行解读@vue-reactivity之effect

当我们通过effect将副函数向响应上下文注册后，副作用函数内访问响应式对象时即会自动收集依赖，并在相应的响应式属性发生变化后，自动触发副作用函数的执行。//./effect.tsexportfuncitoneffect(fn:()=>T,options?:ReactiveEffectOptions):ReactiveEffectRunner{if((fnasReactiveEffectRunne
·2022-04-19 10:14
上一页 4 5 6 7 8 9 10 11 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他