vue源码

Vue响应式系统原理分析与简单实现(上)

经由vue源码中的某些操作，使得工程师在项目开发过程中，无需操作Dom，逻辑层对数据的改变便会自动反馈在视图层；反过来，v-model的使用也会使得用户在视图层上的修改映射到真实数据上。
cyanl77·2020-08-21 10:34

Vue源码构建过程

script工具流分析:build命令"build":"nodescripts/build.js",我们可以看到实际上在vue源码中的package.json中运行build命令其实就是相当于运行script
jushenwanghaoyu·2020-08-21 03:00

3.最俗学习之-Vue源码学习-引入篇(下)

源码地址文件：src/core/instance/init.js这个就是Vue引入初始化的最后一个文件了这里执行5个方法，参数都是Vue构造函数initMixin(Vue)stateMixin(Vue)eventsMixin(Vue)lifecycleMixin(Vue)renderMixin(Vue)这里就直接引用大神的分析的结果了引入依赖，定义Vue构造函数，然后以Vue构造函数为参数，调用了
木子tar·2020-08-21 03:49

Vue2.6.11源码解析（三）——模板编译、组件化机制

学习目标模板编译整体过程组件化机制源码环境"name":"vue","version":"2.6.11",源码的目录结构，可以看下vue源码解析（一）——初始化流程及数据响应式过程梳理我将源码分析分为三个模块进行了分析
哦哈哈·2020-08-21 02:45

vue搭建模仿懒之才用户中心后台模板

下载地址提供的为vue源码（非打包文件）二、vue组件模板涉及到的vue组件如下：1.vue-image-crop-upload（vue图片上传裁剪组件）传送门：https://github.
夜中雨滴·2020-08-21 00:40

模块化的学习和理解

最近在看vue源码，然后看到了rollup，然后又看到了模块化的概念，所以对模块化的概念进行一个学习和总结。以下就是我的学习成果，如果有什么不对的欢迎指教。
我是大哥的女朋友·2020-08-20 21:34

模块化的学习和理解

最近在看vue源码，然后看到了rollup，然后又看到了模块化的概念，所以对模块化的概念进行一个学习和总结。以下就是我的学习成果，如果有什么不对的欢迎指教。
我是大哥的女朋友·2020-08-20 21:34

Vue源码分析之虚拟DOM

虚拟Dom关于虚拟Dom的概念可以从一个简单的小例子出发，如下代码所示:letdiv=document.querySelector('#container');lets='';for(letkindiv){s+=k+','}运行后结果如下可见创建一个Dom元素开销的有多大，一般对数据进行操作而改变后渲染在页面，做法就是直接删除所有旧的Dom，渲染出新的Dom因为dom元素无法跟踪和感知数据的变化，
Khazix·2020-08-20 18:00

Vue源码学习系列01——全局工具函数解析

在我们开始探究vue核心功能之前，先来学习一下vue源码中全局的工具函数，看看vue是如何“利其器”的。
袁杰Jerry·2020-08-20 06:11

Vue 技术栈 教你玩"坏" v8引擎 吃透 js 内存回收机制

写在开头学习完了ES6基础，推荐阅读：ECMAScript6全套学习目录整理完结现在开始逐步深入Vue技术栈，想了想，技术栈专栏的主要内容包括：1、Vue源码分析2、手把手教保姆级撸代码3、无惧面试，学以致用
一百个Chocolate·2020-08-20 04:53

vue源码（MVVM）分析

1.准备1.[].slice.call(lis):将伪数组转换为真数组2.node.nodeType:得到节点类型3.Object.defineProperty(obj,propertyName,{}):给对象添加/修改属性(指定描述符)configurable:true/false是否可以重新defineenumerable:true/false是否可以枚举(for..in/keys())val
代码小李·2020-08-19 10:23

Vue源码解析（一）

ps:本次解读的vue源码版本为2.3.3，本人水平有限，如果解析有误的地方，请批评指正。首先，不管采用什么方式引入vue,直接scri
小胡说·2020-08-19 04:21

vue源码解读（一）

vue源码的目录结构vue源码根目录下有很多文件夹，以下是各文件夹存放的文件说明Vue|—build打包相关的配置文件，其中最重要的是config.js。主要是根据不同的入口，打包为不同的文件。
twinkle_J·2020-08-19 04:18

【Vue高级知识】梳理Vue源码的整个实现流程

Vue的整个实现流程源码解读？？？（总结点）解析模板成render函数--->>>render函数with函数的使用模板中的所有信息都被render函数包含模板中用到的data中的属性，都变成了JS变量模板中的v-modelv-forv-on都变成了JS逻辑render函数返回vnode响应式开始监听数据Object.defineProperty将data的属性代理到vm上with(vm){}首次
小牛itbull·2020-08-19 02:47

vue源码分析

1.获取vue源码地址项目地址：https://github.com/vuejs/vue迁出项目：gitclonehttps://github.com/vuejs/vue.git当前版本号：2.6.102
空谷足音 -จุ·2020-08-19 01:23

vue基本的执行流程—Vue源码的学习

作为模板3)使用单文件（）作为模板创建VUE的实例，（new一个vue对象）1）在vue的构造函数中提供渲染数据所需要的各种方法：data,methods,…将vue挂载到页面中（mounted）或者vue
Aglaia_H5·2020-08-19 00:29

vue源码实现的整体流程解析

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

Vue程序运行过程

：template解析成ast，ast编译成render函数，render函数走向虚拟dom（vdom），最后虚拟dom渲染成真实的UI如果在vue中使用runtime-compiler的话（需要更多vue
文殊师利法王子·2020-08-19 00:51

【Vue原理】Vue源码阅读总结大会

专注Vue源码分享，为了方便大家理解，分为了白话版和源码版，白话版可以轻松理解工作原理和设计思想，源码版可以更清楚内部操作和Vue的美，喜欢我就关注我的公众号，公众号的文章，排版更好看如果你觉得排版难看
weixin_34128839·2020-08-18 22:44

Vue学习心得

Vue源码学习心得记录下Vue源码阅读的心得,从git上下载到代码,从最初代码开始阅读.1.Vue数据绑定{{msg}}{{hello}}{{world}}newVue({el:'app',data:{
yjianfang·2020-08-18 22:54

1.最俗学习之-Vue源码学习-引入篇(上)

源码地址前方高能！！！这只是一篇个人学习Vue.js源码的笔记，并非教程，鉴于个人水平有限，可能存在错误，还望各路大神指点文章内容极度粗俗，各种无脑分析，各种疯狂输出，各位看官斟酌而行，切勿走火入魔！！！Vue.js版本–2.1.7之所以选择这个是因为看了这位大神的分析，决定采用同一个版本，目前Vue已经发布了2.5.x了这里极力推荐大家去看看，据说这位大神的两篇源码分析都是经过尤大佬推荐的哦，本
Viver-Li·2020-08-18 21:57

vue源码解析：vue实例方法watch方法的实现原理

vue实例方法用来监听vue实例变化的方法，我们自然会想到使用watch方法，那么watch方法如何实现呢？vm.$watch(expOrFn,callback,[options])参数：{string|Function}expOrFn{Function|Object}callback{Object}[options]{boolean}deep{boolean}immediate返回值：{Func
leelxp·2020-08-18 20:32

Vue源码解析，keep-alive是如何实现缓存的？

前言在性能优化上，最常见的手段就是缓存。对需要经常访问的资源进行缓存，减少请求或者是初始化的过程，从而降低时间或内存的消耗。Vue为我们提供了缓存组件keep-alive，它可用于路由级别或组件级别的缓存。但其中的缓存原理你是否了解，组件缓存渲染又是如何工作。那么本文就来解析keep-alive的原理。LRU策略在使用keep-alive时，可以添加prop属性include、exclude、ma
WahFung·2020-08-18 14:00

Vue源码解析，keep-alive是如何实现缓存的？

前言在性能优化上，最常见的手段就是缓存。对需要经常访问的资源进行缓存，减少请求或者是初始化的过程，从而降低时间或内存的消耗。Vue为我们提供了缓存组件keep-alive，它可用于路由级别或组件级别的缓存。但其中的缓存原理你是否了解，组件缓存渲染又是如何工作。那么本文就来解析keep-alive的原理。LRU策略在使用keep-alive时，可以添加prop属性include、exclude、ma
WahFung·2020-08-18 14:00

Vue 源码深入解析之 keep-alive、transition 和 transition-group

内置组件，是Vue源码中实现的一个组件，也就是说Vue源码不仅实现了一套组件化的机制，也实现了一些内置组件，它的定义在src/core/components/keep-alive.js中：exportdefault
旧城tk·2020-08-18 12:44

2019年最新Web全栈架构师系列公开课教程

目录├─web全栈试听课：vue源码解读（九期Web全栈正式课）.flv├─【Web全栈架构师】Koa2源码解读│├─Koa2源码实现-讲义.pdf│├─Koa2源码解读.flv│├─node-test.zip
小刘在此·2020-08-18 06:25

Vue源码学习之Vue对于闭包的使用

闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。闭包在js中是一个很常见的一个结构，它允许你访问父级作用域的变量，并在持续保持引用时保证父级作用域的这个变量不会被内存回收机制回收。这样的特性，在实际项目开发中技能给我们带来很多方便与好处，但
星河阅卷·2020-08-18 03:05

[Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅

有一段时间没有更新技术博文了，因为这段时间埋下头来看Vue源码了。本文我们一起通过学习双向绑定原理来分析Vue源码。预计接下来会围绕Vue源码来整理一些文章，如下。
mtxcat·2020-08-17 20:00

vue源码解析之MVVM原理实现

一、MVVM的原理分析Observer对象用来对data所有属性数据进行劫持的构造函数给data中所有属性重新定义属性描述(get/set)为data中的每个属性创建对应的dep对象Dep(Depend)对象data中的每个属性(所有层次)都对应一个dep对象创建的时机:在初始化definedata中各个属性时创建对应的dep对象在data中的某个属性值被设置为新的对象时对象的结构{id,//每个
旧城tk·2020-08-17 16:44

vue源码分析——从实例化到渲染流程

本文为vue源码介绍系列的第一篇，主要归纳整合vue实例化，将render函数转为vnode到生成
chinamasters·2020-08-17 02:15

图解 Vue 响应式原理

最近部门分享，有同学提到了Vue响应式原理，大家在讨论时，发现一些同学对这一知识理解还不够深入，不能形成一个闭环，为了帮助大家理解这个问题，我重新过了一下Vue源码，并整理了多张流程图，便于大家理解。
前端日志·2020-08-16 21:17

vue源码之Array

目录Vue中对Array和Object追踪方式的不同之处？拦截原型创建拦截器如何拦截响应式具体实现依赖收集到哪里？如何收集？通知依赖数组子集和新增元素的追踪数组子集转换成响应式新增元素转换成响应式Array中的问题Vue中对Array和Object追踪方式的不同之处？Object通过setter改变属性的值，所以我们利用getter时发送依赖收集，在setter时触发依赖更新，而且Vue将数据转换
lxcy_intellect·2020-08-16 10:33

Vue源码之createElement函数（五）

在render函数中，最后调用的是createElement函数来返回vnode，那么createElement函数到底完成了什么功能1.首先看一下VNode的定义（'src/core/vdom/vnode.js'）,VNode被定义为一个类。2.在createElement中，首先检测data的类型，通过判断data是不是数组，以及是不是基本类型，来判断data是否传入。如果没有传入，则将所有的
web喵喵·2020-08-16 10:17

Vue源码之render函数（四）

在$mount函数中，最后调用的updateComponent函数，该函数中的调用了实例的私有函数vm._render，因此，现在需要弄清楚vm._render函数完成了什么功能。在'src/core/instance/render.js'中，在Vue的原型上定义了私有_render函数。1.首先从vm.$options中拿到render函数，先暂时忽略其他部分代码，然后通过调用render函数获
web喵喵·2020-08-16 10:17

Vue源码之$mount实现数据挂载（三）

在vue实例中，通过$mount()实现实例的挂载，下面来分析一下$mount()函数都实现了什么功能。在'src/platforms/web/entry-runtime-with-compiler',$mount函数在Vue的原型上被定义$mount函数的流程1.首先，提取出el所对应的dom元素。其中的query函数的主要用途是使用原生的querySelector(查找第一个匹配的dom元素)
web喵喵·2020-08-16 10:17

Vue源码之import Vue发生了什么（一）

1.首先，将vue源码从github中clone下来。
web喵喵·2020-08-16 10:16

Vue源码分析之依赖收集（九）

依赖收集就是订阅数据变化watcher的收集，依赖收集的目的是当响应式数据发生变化时，能够通知相应的订阅者去处理相关的逻辑。在上一章，介绍了Vue将普通对象变成响应式对象是利用defineReactive()（定义在'core/observer/index.js'中）函数，defineReactive()函数中主要关注的是新建一个dep=newDep()，以及在设置属性的getter时，对其做依赖
web喵喵·2020-08-16 10:45

vue源码解读之双向数据绑定

vue源码解读之----双向数据绑定模式概念（发布-订阅模式）图解（发布-订阅模式）双向数据绑定概念模式概念（发布-订阅模式）发布-订阅模式又称为观察者模式，它定义的是一种一对多的依赖关系，当一个状态发生改变的时候
毛栗子yummy·2020-08-16 09:15

vue源码学习一之响应式原理及虚拟DOM

vue源码学习一之响应式原理及虚拟DOM一、准备工作Vue源码的获取项目目录调试二、初始化分析入口文件.
连年zlh·2020-08-16 09:14

学习vue源码（10）手写render渲染函数

compile部分已经讲完了（compile部分分为解析器+优化器+代码生成器），终于走到了render，今天就来给自己记录下渲染三部曲的第二部render，（渲染三部曲=compile+render生成Vnode+将Vnode通过update挂载到页面上），update里有一系列diff操作。咦，render内容不多的噔噔噔噔render的作用大家应该清楚就是执行compile生成的render
前端阳光·2020-08-16 09:36

学习vue源码（7）手写解析器

通过学习vue源码（6）熟悉模板编译原理的学习，我们知道解析器在整个模板编译中的位置。我们只有将模板解析成AST后，才能基于AST做优化或者生成代码字符串，那么解析器是如何将模板解析成AST的呢？
前端阳光·2020-08-16 09:36

学习vue源码（8）手写优化器

前面的学习vue源码（6）熟悉模板编译原理我们谈到模板编译分为解析器，优化器，代码生成器。在学习vue源码（7）手写解析器里我们已经学会了解析器怎么实现，现在就来看看优化器怎么实现吧。
前端阳光·2020-08-16 09:36

Vue源码学习(持续更新中)

Vue源码学习章节目录准备工作认识Flow为什么用FlowFlow的工作方式类型推断类型注释数组类和对象nullFlow在Vue.js源码中的应用总结Vue.js源码目录设计compilercoreplatformserversfcshared
陈坚泓·2020-08-16 09:35

vue源码解析之双向数据绑定的原理

一、双向数据绑定的原理分析双向数据绑定：建立在单向数据绑定的基础之上的，也就是在model-->View的基础之上的。双向数据绑定的实现过程：在解析v-model指令时,给当前元素添加input监听当input的value发生改变时,将最新的值赋值给当前表达式所对应的data属性实现双向数据绑定，核心过程如下：//解析:v-modelmodel:function(node,vm,exp){//实现
旧城tk·2020-08-16 09:31

300行代码实现Vue的MVVM响应式原理

前言源码下载Vue的响应式原理是面试老生常谈的问题了，而大多数人会选择直接背答案这样的形式去应付面试，一旦面试官继续追问，便什么也答不上来了，所以，我希望能通过参考Vue源码的形式，动手编写代码（大概300
GHkmmm·2020-08-16 09:53

Vue源码解读双向数据绑定小结

MVVM框架介绍M(Model，数据模型层)V(View，视图层，数据展示，html页面)VM(ViewModel，视图模型，V与M连接的桥梁)MVVM框架实现了数据的双向绑定-当M层数据进行修改时，VM层会检测到变化，并且通知V层进行相应得修改-修改V层则会通知M层数据进行修改-MVVM框架实现了视图与模型层得相互解耦几种双向数据绑定的方式发布-订阅者模式，也叫观察者模式（backbone.js
妖怪不慌不张·2020-08-16 09:37

vue源码分析1-new Vue做了哪些操作

首先我们可以看到vue的源码在github上有，大家可以克隆下来。git地址我们主要看src下的内容。1.现在我们来分析下newVue都做了哪些操作varapp=newVue({el:'#app',mounted:{console.log(this.message)}data:{message:'HelloVue!'}})复制代码我们都知道new关键字在js中代表实例化一个对象，而vue实际上是一
weixin_34395205·2020-08-16 09:50

Vue源码: 关于vm.$delete()/Vue.use() 内部原理

vm.$delete()vm.$delete用法见官网。为什么需要Vue.delete()?在ES6之前,JS没有提供方法来侦测到一个属性被删除了,因此如果我们通过delete删除一个属性,Vue是侦测不到的,因此不会触发数据响应式。见下面的demo。VueDemo名字:{{user.name}}年纪:{{user.age}}删除一个年纪字段constapp=newVue({el:"#app",d
weixin_34258838·2020-08-16 09:36

基于Object.defineProperty之后，vue源码解析依赖收集、依赖触发【二】

前言：上篇已经了解到了，defineProperty的定义、使用场景、解决的问题，接下来，我们一起来看下vue源码，篇幅有点大，希望你能耐心的看下去，然后有收获，有任何问题，我们可以沟通交流复制代码接下来你将会了解到以下内容
weixin_34256074·2020-08-16 09:05

你不知道的Vue响应式原理

本文根据Vue源码v2.x进行分析。这里只梳理最源码中最主要的部分，略过非核心的一些部分。响应式更新主要涉及到Watcher，Dep，Observer这几个主要类。
weixin_34179762·2020-08-16 09:56
上一页 13 14 15 16 17 18 19 20 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他