vue源码

Vue源码理解之：自定义学习框架abandon

作者：心叶时间：2019-11-0218:13这是一篇用于说明abandonv1版本的项目，abandon是一个用于vue.js源码学习而开发的小型前端框架。abandon地址：https://github.com/yelloxing/abandon目录结构最外层大体说明一下：demo:使用用例dist:打包后的框架代码scripts:源码编译脚本src:源码别的文件就不说了，我们主要是来看看sr
心叶·2019-11-03 00:25

2017百度前端技术学院——vue源码分析之——动态数据绑定二(发布/订阅者模式)

源码地址一、发布/订阅者模式订阅者把自己想订阅的事件注册到调度中心，当该事件触发时候，发布者发布该事件到调度中心（顺带上下文），由调度中心统一调度订阅者注册到调度中心的处理代码;如下图二、程序详解(实现$watcher方法)一共三个js文件：index.js：用来遍历数据，并在数据对象的每个属性上添加getter和setter,当有数据变动的时候给通道发送一个notifydep.js：通道，用来连
起这么长的名字根本没有用·2019-11-02 00:36

学习vue2.5源码之第一篇——目录结构&找个切入点开始学习vue

目录结构客官别急，先来看看源码的整体目录~以下是目前我自己看过vue源码的部分目录（不完整）buildalias定义别名config定义各种构建方式builddistvue.js构建后生成的文件，npmrundev
Rocky_Wong·2019-11-01 09:45

vue源码解读 -- 整体架构

vue在引入后会进行一些初始化操作，主要是在全局对象和vue原形链上挂载函数，这些函数在后续的实例化过程中用到时再进行讨论。一个例子如下是vue一个最简单的例子，基于此例展开对vue整体架构的分析{{a}}varmodel=newVue({el:'#app',data:{a:1}});model.a=10;1.初始化vue本身是个函数，执行new操作后调用其init函数：functionVue(o
狐尼克朱迪·2019-10-31 05:44

vue系列---Vue组件化的实现原理（八）

1)props2)$emit3)使用$ref实现通信4)$attrs和$listeners及inheritAttrs5)理解provide和inject用法6)理解使用bus总线三：在vue源码中注册组件是如何实现的呢
龙恩0707·2019-10-29 20:00

Vue系列---源码调试(二)

我们要对Vue源码进行分析，首先我们需要能够对vue源码进行调式(这里的源码调式是ES6版本的，不是打包后的代码)，因此首先我们要去官方github上克隆一份vue项目下来，如下具体操作：1.clonevue
龙恩0707·2019-10-29 06:00

vue源码阅读笔记

1、yarntest[文件名]-t[name-of-spec(describeortest)]直接运行yarntest，会测试所有测试文件；yarntest后面只跟文件名的话会测试该文件所有用例；后面加-tname-of-spec，会只测试该测试用例；2、源码returnvnode.component!.renderProxy中叹号为类型断言，具体在ts文档—高级类型—类型保护和类型断言中查看3、
龙可真·2019-10-22 18:00

Vue源码解析01

Vue源码解析01首先来一张Vue工作流程图，作为整个Vue源码解析的基础初始化newVue()初始化创建Vue实例，初始化data、props、events等挂载$mount挂载执行编译，首次渲染、创建和追加过程编译
蠱骰·2019-10-18 22:29

vue/cli建立vue+typescript模板工程后，使用eslint+prettier进行格式化

今天才发现vue/cli已经是4.0的版本了，赶在vue源码发布v3之际再折腾下这个脚手架，之前的格式化用tslint等乱七八糟的导致我现在都无从修改，大道至简，今天把vue/cli的格式化配置用简单的配置再捋清楚
黑白路·2019-10-18 11:55

vue知识点汇总（持续更新）

最近有时间于是去翻阅了一下vue的源码，了解了很多vue实现的一些原理性的东西，包括vue源码整个架构从入口持续拆分到每个相应的方法实现都封装成对应的单个文件进行单独的引入使用；vue的双向绑定响应式原理的实现等等
养只猫·2019-10-15 10:02

vue2.6.10源码框架和流程分析以及数据响应式

vue框架主要流程分析目标调试环境搭建理顺vue源码学习整体流程数据响应式获取迁出项目:gitclonehttps://github.com/vuejs/vue.git环境安装依赖安装rolluprollup
liuliping185·2019-10-15 05:32

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

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

【Vue原理】Diff - 源码版 之 Diff 流程

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

vue源码之观察者模式

在vue进行初始化的时候，会执行到initState方法（在core/instance/state.js中），其中initState方法会执行data的初始化，在data的初始化的时候会执行observe监听exportfunctioninitState(vm:Component){vm._watchers=[]constopts=vm.$optionsif(opts.props)initProp
dami.white·2019-10-07 12:00

vue源码分析之骨架

运行时与编译时vue运行时和编译时的区别，编译时即增加了对于template的解析，而运行时假定你只是使用render函数进行编写，如果使用webpack的vue-loader他会自动把*.vue转换成render,所以只需要运行时就可以了，运行时比编译时减少30%vue模块vue分为核心模块和扩展模块，核心模块实现vue基础功能，扩展模块则根据不同的需求扩展不同的功能核心模块：core扩展模块：
dami.white·2019-10-06 11:00

Vue源码解析（八） 之 diff 算法

上一篇Vue源码解析(七)之响应式原理：数组之前章节介绍了VNode如何生成真实Dom,这只是patch内首次渲染做的事，完成了一小部分功能而已，而它做的最重要的事情是当响应式触发时，让页面的重现渲染这一过程能高效完成
绿足·2019-09-27 23:58

实例讲解vue源码架构

下载去github上下载Vuehttps://github.com/vuejs/vuenpminstallnpmrundev运行起来rollup+flowvue使用使用rollup打包，flow规范数据类型rollup可以先用webpack套用，读起来差不多，时间有限，毕竟只有5分钟，这个就不用去看rollup文档了入口打开package.json我们看scripts配置"dev":"rollup
·2019-09-23 07:43

基于Vue生产环境部署详解

本文将详细介绍Vue生产环境部署生产环境如果用Vue完整独立版本(直接用元素引入Vue)，生产时应该用精简版本(vue.min.js)如果用Webpack或Browserify类似的打包工具时，生产状态会在Vue
·2019-09-22 23:50

vue 中Virtual Dom被创建的方法

如果对vue源码的目录还不是很了解，推荐先阅读下深入vue--源码目录和编译过程。01render函数render方法定
·2019-09-22 14:07

vue2.0+SVG实现音乐播放圆形进度条组件

progress-circle.vue源码：exportdefault{props:{radius:{type:String,default:'0.32rem'},percent:{type:Number
ECMAScripter·2019-09-21 16:45

vue源码分析之nextTick

Vue中有个API是nextTick,官方文档是这样介绍作用的：将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。理解这部分内容，有助于理解Vue对页面的渲染过程，同时也可以了解到beforeUpdate和updated的使用。另外就是通过了解nextTick的调用了解vue内部是如何使用Promise的。这部分内容和之前介绍计算属性的内容也有关联，可以比照着看
Aria·2019-09-21 03:32

【Vue原理】Diff - 源码版 之 相关辅助函数

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

【Vue源码】基础内容

在探究vue源码之前，我们需要了解以下几点javascript的基本内容～flow类型检测Flow就是JavaScript的静态类型检查工具，由Facebook团队于2014年的ScaleConference
EarlEcho·2019-09-19 21:14

深入剖析：Vue核心之虚拟DOM

前言使用Vue做项目也有两年时间了，对Vue的api也用的比较得心应手了，虽然对Vue的一些实现原理也耳有所闻，例如虚拟DOM、flow、数据驱动、路由原理等等，但是自己并没有特意去探究这些原理的基础以及Vue
wx5d61fdc401976·2019-09-19 15:59

vue源码分析之计算属性

最近总被问道vue的计算属性原理是什么、计算属性是如何做依赖收集的之类的问题，今天用了一天时间好好研究了下源码，把过程基本捋顺了。总的来说还是比较简单。先明确一下我们需要弄清楚的知识点：computed属性如何初始化响应式属性的变化如何引起computed的重新计算弄清楚以上两点后对computed就会有一个比较全面的了解了。首先，需要弄明白响应式属性是怎么实现的，具体我会在其他文章中写，这里了解
Aria·2019-09-14 00:00

【Vue原理】Diff - 源码版 之 从新建实例到开始diff

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

Vue源码中compiler部分逻辑梳理（内有彩蛋）

目录一.简述二.编译流程三.彩蛋环节示例代码托管在：http://www.github.com/dashnowords/blogs博客园地址：《大史住在大前端》原创博文目录华为云社区地址：【你要的前端打怪升级指南】一.简述compiler模块Vue框架中用于模板编译的，它的作用就是将Vue中的组件模板转换成render函数，render函数在运行时可以生成虚拟节点vnode，它是Vue中虚拟DOM
大史不说话·2019-09-10 20:00

深入vue源码，了解vue的双向数据绑定原理

大家都知道vue是一种MVVM开发模式，数据驱动视图的前端框架，并且内部已经实现了双向数据绑定，那么双向数据绑定是怎么实现的呢？先手动撸一个最最最简单的双向数据绑定1234567vartext=document.getElementById('text')8varspan=document.getElementById('show')9varobj={}10Object.definePropert
逐梦song·2019-09-09 23:00

【Vue原理】Diff - 白话版

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

Vue源码2.x.x之总体梳理

前面已经介绍的都是Vue源码的一下细节，这一篇是对前面的一个总结以及梳理。具体的一下细节，可以看前面的文章。
shisanOnly·2019-09-07 00:00

Vue 添加响应式属性的正确姿势

原文链接：https://ssshooter.com/2019-09...默认此文读者明白简单的Vue底层原理，对此陌生的读者可以先看：你不知道的Vue响应式原理从vue源码看观察者模式此文使用的Vue
ssshooter·2019-09-06 00:00

vue源码解析之observe

一.vue文档中有“由于JavaScript的限制,Vue不能检测以下数组的变动”，是否真是由于JavaScript的限制，还是出于其他原因考虑当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem]=newValue当你修改数组的长度时，例如：vm.items.length=newLength第一种情况是利用索引设置一个数组项，经过试验索引是可以设置为响应式的，再去vu
龙可真·2019-09-04 15:00

第九期 Web全栈架构师

课件代码软件资料01课vue核心API&&组件设计（2019.3.15）02课Vue-router&Vuex（2019.3.18）03课vue源码解析（2019.3.20）04课项目实战（2019.3.22
zhengxiuchen86·2019-09-03 11:44

【Vue原理】Render - 源码版 之 静态 Render

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

vue源码学习-performance性能检测和proxy对象

vue在初始化过程中，进行了一系列的操作，今天我们就来介绍下其中的performance和proxy的使用。vm._uid=uid++letstartTag,endTag//初始化开始时打个开始的tagif(process.env.NODE_ENV!=='production'&&config.performance&&mark){startTag=`vue-perf-start:${vm._ui
halapro_liu·2019-08-29 01:14

【Vue原理】Render - 源码版 之 主要 Render

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

vue 源码解析之虚拟Dom-render

vue源码解析--虚拟Dom-renderinstance/index.jsfunctionVue(options){if(process.env.NODE_ENV!=='production'&&!
Lan_tao·2019-08-26 09:36

Vue源码分析——生命周期

背景vue版本2.5.21本篇内容Vue的生命周期源码开始1.package.jsonscrpit内，npmrundev的命令："dev":"rollup-w-cscripts/config.js--environmentTARGET:web-full-dev"其中rollup是一个打包工具，类似webpack。rollup:Rollup是一个JavaScript模块打包器，可以将小块代码编译成大
davidshi·2019-08-26 00:00

Vue源码分析之Vue实例初始化详解

这一节主要记录一下：Vue的初始化过程以下正式开始：Vue官网的生命周期图示表重点说一下newVue()后的初始化阶段，也就是created之前发生了什么。initLifecycle阶段exportfunctioninitLifecycle(vm:Component){constoptions=vm.$options//locatefirstnon-abstractparentletparent=
shisanOnly·2019-08-25 11:19

Vue源码之Vue实例初始化

这一节主要记录一下：Vue的初始化过程以下正式开始：Vue官网的生命周期图示表重点说一下newVue()后的初始化阶段，也就是created之前发生了什么。initLifecycle阶段exportfunctioninitLifecycle(vm:Component){constoptions=vm.$options//locatefirstnon-abstractparentletparent=
shisanOnly·2019-08-23 00:00

数据动态过滤技巧在 Vue 项目中的实战

-)，过程中会涉及到一些Vue源码的概念比如$mount、renderwatcher等，如果不太了解的话可以瞅瞅Vue源码阅读系列文章~问题是这样的：页面从后台拿到的数据是由0、1之类的key，而这个key
fcxyfc·2019-08-20 16:27

数据动态过滤技巧在 Vue 项目中的实战

-)，过程中会涉及到一些Vue源码的概念比如$mount、renderwatcher等，如果不太了解的话可以瞅瞅Vue源码阅读系列文章~问题是这样的：页面从后台拿到的数据是由0、1之类的key，而这个key
fcxyfc·2019-08-20 16:22

vue源码nextTick使用及原理解析

1nextTick的使用vue中dom的更像并不是实时的，当数据改变后，vue会把渲染watcher添加到异步队列，异步执行，同步代码执行完成后再统一修改dom，我们看下面的代码。{{msg}}exportdefault{name:'index',data(){return{msg:'hello'}},mounted(){this.msg='world'letbox=document.getEle
fecoder·2019-08-13 15:54

通过JS拦截 pushState 和 replaceState 事件

首先需要知道vue框架路由变更原理这里可以查看相关文章或者看vue源码，这里直接写结论，vue路由通过使用pushState和replaceState方法来进行路由变更和替换的。
Yuhoo·2019-08-13 13:02

[vue源码][nextTick]原理以及源码解析

nextTickVue中的nextTick涉及到Vue中DOM的异步更新，感觉很有意思，特意了解了一下。其中关于nextTick的源码涉及到不少知识，nextTick是Vue的一个核心实现，在介绍Vue的nextTick之前，为了方便大家理解，我先简单介绍一下JS的运行机制。JS运行机制JS执行是单线程的，它是基于事件循环的。事件循环大致分为以下几个步骤：（1）所有同步任务都在主线程上执行，形成一
frontend_frank·2019-08-13 08:33

【Vue原理】Compile - 源码版 之 generate 节点拼接

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

【Vue原理】Compile - 源码版 之 generate 拼接绑定的事件

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

【Vue原理】Compile - 源码版 之 generate 节点数据拼接

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

Vue2源码解析系列

目录Vue整体流程一(带你了解一下Vue源码)变化侦测篇(Observer)虚拟DOM篇(VNode)模板编译篇(Compiler)Vue整体流程二(彻底搞清楚Vue整个过程)Vue-Router详解Vuex
chimyking·2019-08-12 15:27

vue源码解析：nextTick

1nextTick的使用vue中dom的更像并不是实时的，当数据改变后，vue会把渲染watcher添加到异步队列，异步执行，同步代码执行完成后再统一修改dom，我们看下面的代码。{{msg}}exportdefault{name:'index',data(){return{msg:'hello'}},mounted(){this.msg='world'letbox=document.getEle
fecoder·2019-08-12 00:00
上一页 24 25 26 27 28 29 30 31 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他