vue源码

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

vue源码分析

一、Vue源码解析-响应式原理1.1准备工作源码目录结构src├─compiler编译相关├─coreVue核心库├─platforms平台相关代码├─serverSSR，服务端渲染├─sfc.vue文件编译为
Tommy·Yang·2021-01-27 00:05

Vue源码解析之Template转化为AST

Vue源码中虚拟DOM构建经历template编译
·2021-01-24 00:49

浅谈Vue响应式原理（下）

开始结合Vue源码来整理响应式的原理（此篇代码有部分简写），上篇可看浅谈vue的响应式（上）VUE响应式原理了解了Object.defineProperty和观察者模式之后就可以开始解释Vue的响应式原理了
Taec0123·2021-01-21 16:11

Vue.js进阶之Vue源码解析（上）

前言阅读Vue源码仅仅只是为了面试吗？我想，大概很多人都会这么觉得吧！但我并不这么想…为什么呢？（ps:后续再慢慢讲述…）当然，当你选择去阅读Vue源码也真的是需要一定的勇气，为什么会这么说？
hugo233·2021-01-20 21:56

Vue源码学习第一期——前期准备

小提示刚开始看源码的时候，一定不要揪着每行代码去看，一定要不求甚解，先顺着一条主线去捋清思路，然后再根据自己的理解，分析一些重要的实现。不然就会陷入迷茫，欸，这行干嘛的，啊，这行也不知道。算了，不看了。举个vue的例子，都知道vue是根据数据状态变化后，产生virtualDOM的方式更新DOM，那么如果你不清楚virtualDOM的实现原理，那就不要去细究virtualDOM的内容。可以先往下梳理
HelloHL·2021-01-14 16:00

vuex 源码分析_vue源码解析之vuex原理

常用接口dispatch操作行为触发方法，是唯一能执行action的方法。actions操作行为处理模块。负责处理VueComponents接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发。commit状
楚予微茫·2021-01-14 11:44

从vue源码来看Proxy的用途

从vue源码来看Proxy的用途TheProxyobjectisusedtodefinecustombehaviorforfundamentaloperations(e.g.propertylookup
geeeger·2021-01-13 14:18

入口文件开始，分析Vue源码实现

网上现有的Vue源码解析文章一搜一大批，但是为什么我还要去做这样的事情呢？因为觉得纸上得来终觉浅，绝知此事要躬行。
muwoo·2021-01-12 21:04

vue简单实现双向绑定

vue源码学习{{msg}}点击事件//1.构造vue（构造函数/类）classVue{constructor(options){this.
悠哈121·2021-01-12 16:31

vue在哪里定义数组_Vue源码解读——变化侦测篇

源码目录Vue源码目录大致如下：从上面的目录结构可以看出，Vue的整个项目包含了类型检测相关、单元测试相关、与平台无关的核心代码以及跨平
刘洛希·2021-01-12 15:01

详解Vue2的diff算法

前言双端比较算法是vue2.x采用的diff算法，本篇文章只是对双端比较算法粗略的过程进行了一下分析，具体细节还是得Vue源码，Vue的源码在这过程假设当前有两个数组arr1和arr2letarr1=[
·2021-01-08 01:19

浅读vue源码(2.x)之diff算法

在我响应式原理那篇文章中，我们已经了解到，当vue实例被检测的属性改变时，会发生视图更新，即调用updateComponent函数对视图进行重新渲染。updateComponent=()=>{vm._update(vm._render(),hydrating)}在该函数中，执行vm._render()时，会去获取相关属性最新情况，从而得到一个新的Vnode。而在vm._update()函数中，会将
Zack921·2021-01-05 20:59

浅读vue源码(2.x)之响应式原理

整个vue架构看下来，主要分为三个部分：响应式原理，编译器的实现以及patch算法。以下是对响应式原理的个人理解，看下来，大致是利用发布-订阅模式+异步更新。当我们初始化一个vue实例并把它绑定到相应的DOM节点时，其实已经完成了属性响应式的设定。所以我们从VUE的构造函数入手。打开core/index.jsimportVuefrom'./instance/index'import{initGlo
Zack921·2021-01-05 20:52

浅读vue源码(2.x)之diff算法

在我响应式原理那篇文章中，我们已经了解到，当vue实例被检测的属性改变时，会发生视图更新，即调用updateComponent函数对视图进行重新渲染。updateComponent=()=>{vm._update(vm._render(),hydrating)}在该函数中，执行vm._render()时，会去获取相关属性最新情况，从而得到一个新的Vnode。而在vm._update()函数中，会将
Zack921·2021-01-05 19:57

浅读vue源码(2.x)之响应式原理

整个vue架构看下来，主要分为三个部分：响应式原理，编译器的实现以及patch算法。以下是对响应式原理的个人理解，看下来，大致是利用发布-订阅模式+异步更新。当我们初始化一个vue实例并把它绑定到相应的DOM节点时，其实已经完成了属性响应式的设定。所以我们从VUE的构造函数入手。打开core/index.jsimportVuefrom'./instance/index'import{initGlo
Zack921·2021-01-05 19:56

手写Vue源码之数据劫持示例详解

源代码:传送门Vue会对我们在data中传入的数据进行拦截：对象：递归的为对象的每个属性都设置get/set方法数组：修改数组的原型方法，对于会修改原数组的方法进行了重写在用户为data中的对象设置值、修改值以及调用修改原数组的方法时，都可以添加一些逻辑来进行处理，实现数据更新页面也同时更新。Vue中的响应式(reactive):对对象属性或数组方法进行了拦截，在属性或数组更新时可以同时自动地更新
·2021-01-04 10:32

Vue源码解析——组件化机制

组件化机制组件声明：Vue.component()initAssetRegisters(Vue)src/core/global-api/assets.js组件注册使用extend方法将配置转换为构造函数并添加到components选项组件实例创建及挂载：观察生成的渲染函数"with(this){return_c('div',{attrs:{"id":"demo"}},[_c('h1',[_v("虚
椰卤工程师·2021-01-03 14:22

Vue源码解析——异步更新队列+虚拟dom

Vue源码解析——异步更新队列+虚拟dom异步更新队列Vue高效的秘诀是一套批量、异步的更新策略。每一个组件对应一个watcher实例，在一个队列中插入watcher，再进行批量操作。
椰卤工程师·2021-01-03 12:39

vue源码解析流程总结

之前写了三篇vue的源码解析,响应式，虚拟dom,和模板编译组件化.这三篇是比较细的，这里做个总结，先看总结，再看那三篇应该会更好，这里是把大概流程和前面的例子总结下.一，首次渲染过程首先我们导入vue时会初始化实例成员，静态成员全局静态例如config,options,内部工具方法,一些静态方法例如set，nextTick,组件,指令，过滤器方法,然后原型方法例如:mount(内部调用mount
Charon·2021-01-02 19:01

vue源码解析流程总结

之前写了三篇vue的源码解析,响应式，虚拟dom,和模板编译组件化.这三篇是比较细的，这里做个总结，先看总结，再看那三篇应该会更好，这里是把大概流程和前面的例子总结下.一，首次渲染过程首先我们导入vue时会初始化实例成员，静态成员全局静态例如config,options,内部工具方法,一些静态方法例如set，nextTick,组件,指令，过滤器方法,然后原型方法例如:mount(内部调用mount
Charon·2021-01-02 19:13

vue源码分析（二）-从new Vue到渲染到页面

_init方法newVue()会执行Vue构造函数的_init方法，_init方法被initMixin中扩展的，src\core\instance\init.jsexportfunctioninitMixin(Vue:Class){Vue.prototype._init=function(options?:Object){constvm:Component=this//auidvm._uid=ui
Ace丶·2021-01-01 23:36

vue源码分析（一）-源码入口

源码入口分析备注：仅用于自己学习源码过程中的总结，很多不详细和错误的部分后面优化vue提供不同的平台和版本，浏览器环境版本包括：Runtimeonly版本和Runtime+compiler版本。Runtime+compiler版本：newVue({template:'{{hi}}'}),需要将template中的字符串编译成render函数，需要用到compiler，具体在scripts\conf
Ace丶·2021-01-01 23:33

vue源码分析（二）-从new Vue到渲染到页面

_init方法newVue()会执行Vue构造函数的_init方法，_init方法被initMixin中扩展的，src\core\instance\init.jsexportfunctioninitMixin(Vue:Class){Vue.prototype._init=function(options?:Object){constvm:Component=this//auidvm._uid=ui
Ace丶·2021-01-01 23:53

vue源码分析（一）-源码入口

源码入口分析备注：仅用于自己学习源码过程中的总结，很多不详细和错误的部分后面优化vue提供不同的平台和版本，浏览器环境版本包括：Runtimeonly版本和Runtime+compiler版本。Runtime+compiler版本：newVue({template:'{{hi}}'}),需要将template中的字符串编译成render函数，需要用到compiler，具体在scripts\conf
Ace丶·2021-01-01 23:48

vue 中watch函数名_Vue函数中的process.env.NODE_ENV

之前准备看vue源码，查看了一篇引导文档，找到了核心方法。functionVue(options){if(process.env.NODE_ENV!=='production'&&!
胡思乱想的小朋友·2020-12-30 23:21

vue前端验证输入_入口开始解读Vue源码系列（一）——造物创世

作者：muwoo转发链接：https://github.com/muwoo/blogs/blob/master/src/Vue/1.md目录入口开始解读Vue源码系列(一)——造物创世本篇入口开始解读Vue
岳国强·2020-12-30 12:49

源码解读_入口开始解读Vue源码系列（二）——new Vue 的故事

作者：muwoo转发链接：https://github.com/muwoo/blogs/blob/master/src/Vue/2.md目录入口开始解读Vue源码系列(一)——造物创世入口开始解读Vue
就是雪·2020-12-30 12:49

Vue 源码实现: Reactive Data 响应式对象 Vue3 实现（使用 Proxy 实现）

Vue源码实现:ReactiveData响应式对象Vue3实现（使用Proxy实现）文章目录Vue源码实现:ReactiveData响应式对象Vue3实现（使用Proxy实现）简介参考完整示例代码正文响应式数据对象
超悠閒·2020-12-30 01:10

vue 源码解析(3-2-1,数据响应式)

Vue源码解析之前我们解析了mini-vue的响应式实现，和虚拟dom库的实现，现在我们就来解析一下vue内部具体是如何做的，看看它在我们简易实现上增加了什么。
Charon·2020-12-29 20:33

Vue源码学习（一）——追根究底Vue

打算开始学习vue的源码开始，我开始serach关键词：vue源码，可是发现很多都不是我想要看到的东西，所以打算记录下来，学习的记录和日后分享。我在想这个文章的名字时，手把手系列？十分钟系列？
小夫特·2020-12-29 20:46

Vue源码学习（二）——从宏观看Vue

上一篇文章我们写到从入口文件一步步找到Vue的构造函数，现在我们要去看看Vue实例化经历的过程Vue的构造函数我们知道Vue的构造函数在src/core/instance/index.js中,不明白的可以去看上一篇文章Vue
小夫特·2020-12-29 20:46

跟我一起读源码丨Vue源码之依赖收集

阅读源码，个人觉得更多的收获是你从源码中提炼到了什么知识点，Vue的很多核心源码都十分精妙，让我们一起来关注它「依赖收集」的实现。**tip：Vue版本：v2.6.12，浏览器：谷歌，阅读方式：在静态html引用Vue包进行断点阅读**文章篇幅有点长，泡杯咖啡，慢慢看~我从「依赖收集」中学习到了什么？1.观察者模式观察者模式的基本概念：观察目标发生变化->notify[通知]->观察者们->upd
前端精·2020-12-25 11:48

vue 源码解析(3-2-1)

Vue源码解析之前我们解析了mini-vue的响应式实现，和虚拟dom库的实现，现在我们就来解析一下vue内部具体是如何做的，看看它在我们简易实现上增加了什么。
Charon·2020-12-24 23:17

【Vue.js源码解析 一】-- 响应式原理

前言笔记来源：拉勾教育大前端高薪训练营阅读建议：建议通过左侧导航栏进行阅读课程目标Vue.js的静态成员和实例成员初始化过程首次渲染的过程数据响应式原理–最核心的特性之一准备工作Vue源码的获取项目地址
Alisone_li·2020-12-22 22:21

Vue源码解析——响应式篇

文章来源：我的博客概述这里的响应式，是指作为现在MVVM主流思想下的前端框架采用的一种数据驱动视图的方案，即对数据监测，来进行相应的DOM更新。而Vue实现的方案也是比较特别的，其很巧妙的借助JS原生的对对象进行监听的API来处理，一定程度上提升了性能，但是也有其缺陷的地方。三大框架的区别Angular:脏数据检测React:VirtualDOM对比更新Vue:借助Object.definePro
Dilomen·2020-12-21 08:07

vue 渲染函数处理slot_【Vue原理】Slot - 源码版之作用域插槽

写文章不容易，点个赞呗兄弟专注Vue源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于Vue版本【2.5.17】如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧今天探索
weixin_39610488·2020-12-19 05:56

跟我一起读源码丨Vue源码之依赖收集

阅读源码，个人觉得更多的收获是你从源码中提炼到了什么知识点，Vue的很多核心源码都十分精妙，让我们一起来关注它「依赖收集」的实现。**tip：Vue版本：v2.6.12，浏览器：谷歌，阅读方式：在静态html引用Vue包进行断点阅读**文章篇幅有点长，泡杯咖啡，慢慢看~我从「依赖收集」中学习到了什么？1.观察者模式观察者模式的基本概念：观察目标发生变化->notify[通知]->观察者们->upd
前端精·2020-12-15 13:32
上一页 10 11 12 13 14 15 16 17 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他