vue源码

从源码看Vue的响应式原理

前段时间把vue源码抽时间看了一遍，耐心点看再结合网上各种分析文章还是比较容易看明白的，没太大问题，唯一的问题就是看完即忘当然了，也不是说啥都不记得了，大概流程以及架构这些东西还是能留下个印象的，对于Vue
Quiet-Night·2019-04-10 10:25

Vue源码解读前必须要知道的Vue构建流程

了解Vue的构建，可以从package.json文件开始sprits命令内关于构建的命令如下{..."build":"nodescripts/build.js”,//web版本//sever"build:ssr":"npmrunbuild--web-runtime-cjs,web-server-renderer”,//weex"build:weex":"npmrunbuild--weex”…}从命
南山·2019-03-31 00:00

Vue源码阅读

数据驱动newVuenewVue发生了什么new关键字代表实例化一个对象,而Vue实际上是一个类,源码位置是/src/core/instance/index.js。在newVue()之后。Vue会调用_init函数进行初始化，也就是这里的init过程，它会初始化生命周期、事件、props、methods、data、computed与watch等源码->_initexportfunctioninit
AlexZ33·2019-03-27 00:00

Vue源码学习(一)

今天开始学习Vue源码,顺便不定时记录下从github上clone源码(地址为:https://github.com/vuejs/vue)此时版本为2.6.10,可以看到尤大大6天前的提交参照以下贡献规则文档
Mean。·2019-03-26 15:56

vue源码解析之keep-alive

问题来了在使用vue的时，cacheornotcache,isaproblem。因为页面需不需要缓存是一个很复杂的问题，当被boss问到，这个页面加载怎么白屏这么久？脑子里晃过:SSR？可是后端不是node啊！！不过好像白不白屏也没多大关系！prerender？history模式？nginx配置？浏览器阻止？各种坑？localstorage缓存？存取管理麻烦骨架屏？boss：不还是没内容吗？！！[
干锅田鸡·2019-03-26 11:29

vue源码起步：准备工作

初步翻开VUE源码，有种从入门就放弃的想法…因为不止从何下手，并且由于加入了flow检查语法的问题，有很多地方的代码看上去很奇怪；不知道看源码有没有什么技巧，但是我确定的是一定要做好以下三方面的准备：1
喵大嗷·2019-03-24 18:48

vue源码基础点

1.Object.defineProperty(obj,propertyName,{})1.writeable:默认为false只读2.get：获取属性值3.set：监视属性值的变化4.configurable:是否可以重新定义2.Object.keys()得到对象可枚举属性组成的数组3.Object.hasOwnProperty(‘属性名称’):属性是存在于自身。而不是在原型链上4.create
cyyeel·2019-03-24 15:32

[Vue源码分析]Vue.use实现原理

最近小组有个关于vue源码分析的分享会，提前准备一下…前言：插件通常会为Vue添加全局功能，这个官网文档有说过了，如果对插件不了解，建议先阅读一下官网文档：https://cn.vuejs.org/v2
ECMAScripter·2019-03-22 23:03

根据调试工具看Vue源码之computed（二）

回顾上回提到，computed————计算属性的缓存与Watcher这个类的dirty属性有关，那么这次我们接着来看下，dirty属性到底取决于什么情况来变化，从而对computed进行缓存。依赖收集切入正题之前，我们先来看一个问题：如果一个computed的结果是受data属性下的值影响的，那么如何去捕获因某个值变化而引起的computed的变化？答案是：依赖收集根据上面的断点，在update函
tonychen·2019-03-16 00:00

每天学点Vue源码之vm.$mount挂载函数

在vue实例中，通过$mount()实现实例的挂载，下面来分析一下$mount()函数都实现了什么功能。$mount函数执行位置_init这个私有方法是在执行initMixin时候绑定到Vue原型上的。$mount函数是如如何把组件挂在到指定元素$mount函数定义位置$mount函数定义位置有两个:第一个是在src/platforms/web/runtime/index.js这里的$mount是
小诺哥·2019-03-11 08:55

Vue源码解析之Template转化为AST的实现方法

Vue源码中虚拟DOM构建经历template编译
易水人去丶明月如霜·2019-03-10 15:57

简易版本vue的实现

用了两年左右的vue，虽然看过vue的源码，推荐黄轶大佬的vue源码分析，相当到位。从头梳理了vue的实现过程。
rocky191·2019-03-05 00:00

vue源码之双向绑定原理

vue源码之双向绑定原理了解Object.defineProperty手动实现简单的绑定vue双向绑定所有对象的属性劫持指令解析订阅器watch结语了解Object.defineProperty了解过vue
爱吃香蕉的布呐呐儿·2019-03-02 12:09

读vue源码（1）

gobal-api/index.jsinitMixin(Vue)对Vue.mixin方法进行定义，参数为要混入到Vue.options对象的对象。Vue.mixin=function(mixin:Object){this.options=mergeOptions(this.options,mixin)returnthis}gobal-api/use.js这段源码简单，global-api/use.
anthonyliu·2019-02-28 10:00

[Vue源码分析] 模板的编译

最近小组有个关于vue源码分析的分享会，提前准备一下…前言：Vue有两个版本：Runtime+Compiler、Runtimeonly，前者是包含编译代码的版本，后者不包含编译代码，编译过程需要借助webpack
ECMAScripter·2019-02-26 00:55

根据调试工具看Vue源码之组件通信（一）

根据调试工具看Vue源码之组件通信（一）##根据调试工具看Vue源码之组件通信（一）在平时的业务开发中，相信在座的各位没少用过组件通信。
tonychen·2019-02-26 00:00

[Vue源码分析]自定义事件原理及事件总线的实现

最近小组有个关于vue源码分析的分享会，提前准备一下…前言:我们都知道Vue中父组件可以通过props向下传数据给子组件；子组件可以通过向$emit触发一个事件，在父组件中执行回调函数，从而实现子组件与父组件的通信
ECMAScripter·2019-02-24 23:00

vue源码学习 --- flow(5)

原文地址:https://flow.org/en/docs/types/arrays/#toc-array-type-shorthand-syntax一.Array基本使用只读数组1.基本使用ArrayaccessisunsafeWhenyouretrieveanelementfromanarraythereisalwaysapossibilitythatitisundefined.Youcoul
2分_08b6·2019-02-21 11:18

正则表达式匹配方法 match() -- Vue正则解析template

最近看到vue源码的模板解析，parse中主要就是用正则去解析template然后生成ast抽象树。这则匹配用到最多的就是match。
yan_yuanfeng·2019-02-21 11:01

vue源码学习 --- flow(4)

原文地址:https://flow.org/en/docs/types/objects/一.Object基本语法Exactobjecttypes(精确对象)Objectsasmaps(不知道怎么翻译)1.基本语法varobj1:{foo:boolean}={foo:true};(1)obj中没定义bar属性,所以不能使用varobj2={foo:"bar"};//obj2.bar;//Error!
2分_08b6·2019-02-21 11:24

vue源码学习 --- flow学习(2)

原文:https://flow.org/en/docs/types/literals/一.其他1.指定具体值只能接受指定的值functionacceptsTwo(value:2){//...}acceptsTwo(2);//Works!//acceptsTwo(3);//Error!//acceptsTwo("2");//Error!functiongetColor(name:"success"|
2分_08b6·2019-02-21 11:06

vue源码学习 --- flow学习(1)

>原文:https://flow.org/en/docs/types/primitives/#一.flow的作用静态检测JavaScript类型,可以在编译阶段(说法不太准)识别出错误,规避运行时才显现的bug#二.基本类型//@flow/***JavaScript基本类型在flow中使用*//***boolean*如下例子中,只接受一个boolean的参数,一个到达acceptsBoolean函
2分_08b6·2019-02-21 11:04

深入Vue - 源码目录及构建过程分析

摘要：Vue源码阅读第一步。原文：深入vue-源码目录及构建过程分析公众号：前端小苑Fundebug经授权转载，版权归原作者所有。
Fundebug·2019-02-19 09:45

深入Vue - 源码目录及构建过程分析

摘要：Vue源码阅读第一步。原文：深入vue-源码目录及构建过程分析公众号：前端小苑Fundebug经授权转载，版权归原作者所有。
Fundebug·2019-02-19 00:00

vue源码分析系列之响应式数据（三）

前言上一节着重讲述了initData中的代码，以及数据是如何从data中到视图层的，以及data修改后如何作用于视图。这一节主要记录initComputed中的内容。正文前情回顾在demo示例中，我们定义了一个计算属性。computed:{total(){returnthis.a+this.b}}本章节我们继续探究这个计算属性的相关流程。initComputed//initComputed(vm,
A_大白·2019-02-17 00:00

vue源码分析系列之响应式数据（四）

前言上一节着重讲述了initComputed中的代码，以及数据是如何从computed中到视图层的，以及data修改后如何作用于computed。这一节主要记录initWatcher中的内容。正文demo修改之前的newVue(options)的options中，我们可以观察到computed,data，但是对于watch是没法演示的，所以我们在代码中加入一段可以观察到watch初始化以及效果的代
A_大白·2019-02-17 00:00

最近阅读vue源码的一些理解

vue的整个实现流程大体的执行方法如下：newVueinit(合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化data、props、computed、watcher等等)$mountcompilerendervnodepatchDOM响应式原理在render过程的时候，会通过defineReactive为data和props添加getter,setter，同时内部会new一个Dep实例
closefrien_d1c2·2019-02-15 22:19

最近阅读vue源码的一些理解

vue的整个实现流程大体的执行方法如下：newVueinit(合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化data、props、computed、watcher等等)$mountcompilerendervnodepatchDOM响应式原理在render过程的时候，会通过defineReactive为data和props添加getter,setter，同时内部会new一个Dep实例
closefrien_d1c2·2019-02-15 22:19

Vue双向数据绑定底层实现原理学习与分享

**Vue双向数据绑定底层实现原理学习与分享**最近就Vue源码很感兴趣，怀揣着一种要’‘知其所以然’'的心态，开始学习底层的东西，今天与大家分享一下Vue双向数据绑定的代码实现方式，一来可以检验我的所学
哼哼小牛·2019-02-15 17:22

vue源码分析系列之响应式数据（二）

前言接着上一篇的初始化部分，我们细看initData中做了什么。正文initDatafunctioninitData(vm:Component){letdata=vm.$options.data//获得传入的data.此处为{a:1,b：2}data=vm._data=typeofdata==='function'?getData(data,vm):data||{}//如果data不是纯对象，则打
A_大白·2019-02-13 00:00

vue源码分析系列之响应式数据（一）

概述在使用vue的时候，data,computed,watch是一些经常用到的概念，那么他们是怎么实现的呢，让我们从一个小demo开始分析一下它的流程。demo演示代码片段html代码demoa：{{a}}b:{{b}}a+b:{{total}}a+1js代码vardemo=newVue({el:'#demo',data:{a:1,b:2,},computed:{total(){returnthi
A_大白·2019-02-13 00:00

Vue源码学习记录

Vue源码学习记录准备工作源码分析数据代理(MVVM.js)模板解析(compile.js)数据劫持-->数据绑定1.数据绑定(model==>View):2.数据劫持3.四个重要对象1.Observer2
Anshay·2019-02-11 16:46

2019 年摩拳擦掌直奔 vue （前言）

本来想用春节放假的时间搞定vue源码，后来一想自己什么脑袋，人家Evan什么脑袋，人家从2014年就开始搞，一直搞到现在，我用一周就能看懂有点不要脸啊，所以现实点吧，今年能看懂就不错了，今年能看懂然后自己模仿写一个我就知足了
zidea·2019-02-04 07:11

根据调试工具看Vue源码之生命周期（一）

由于工作中经常使用chrome调试工具来定位问题，觉着这东西真的挺好用。突然有一天受到启发，想着：“我学习源码是否也可以通过调试工具呢？”因此，诞生了这篇文章来记录我的一些学习成果，后续应该会写成一个系列。阅读源码的一些常见方式这里列举一些阅读源码的一些常见方式：直接从github上查看某一个版本的源码，针对某些功能的实现进行剖析从第一个commit开始看上面是我所知的一些阅读源码的常见方式，但是
tonychen·2019-02-04 00:00

从vue源码看props的用法

前言平时写vue的时候知道props有很多种用法，今天我们来看看vue内部是怎么处理props中那么多的用法的。vue提供的props的用法1.数组形式props:['name','value']2.对象形式对象形式内部也提供了三种写法：props:{//基础的类型检查name:String,//多个可能的类型value:[String,Number],//对象形式id:{type:Number,
你假装没察觉·2019-01-09 08:22

Vue源码探究-组件的持久活跃

Vue源码探究-组件的持久活跃*本篇代码位于vue/src/core/components/keep-alive.js较新版本的Vue增加了一个内置组件keep-alive，用于存储组件状态，即便失活也能保持现有状态不变
ushio·2019-01-09 00:00

Vue源码解读之基础前言

原文地址：https://banggan.github.io/2019/01/05/Vue源码解读之基础前言/前言从开始学习Vue到现在也有1年半了吧，以后的工作也是大部分的Vue相关，为了打好基础，方便迎接年后
banggan·2019-01-05 16:02

Vue源码解析（二）Vue的双向绑定讲解及实现

上篇文章，我们讲解了Vue的data属性映射和方法的重定义，链接地址如下:Vue源码解析（一）data属性映射和methods函数引用的重定义这篇文章给大家带来的是
xubaodian·2019-01-02 00:00

Vue源码解析（一） data属性映射及methods函数引用的重定义

使用Vue框架进行开发时，我们在option的data和methods中定义属性和方法，在调用时直接使用vm.attr或vm.func()的形式，而不是用vm.data.attr或vm.methods.func()的方式。项目的git地址：https://github.com/xubaodian/...，后续会持续更新，分析Vue的源码，争取实现一个精简版的Vue。Vue解析系列文章如下：Vue源
xubaodian·2019-01-02 00:00

[Vue源码分析] v-model实现原理

最近小组有个关于vue源码分析的分享会，提前准备一下…前言:我们都知道使用v-model可以实现数据的双向绑定，及实现数据的变化驱动dom的更新，dom的更新影响数据的变化。
ECMAScripter·2018-12-28 23:06

Vue源码解析：this.$data、this._data、this.xxx 为什么都能获取数据？data为什么是个函数？

data中定义了一个数据msg,vue实例上访问这个数据有两种方式，this.$data.msg和this.msg，请问，为vue如何实现this.msg能直接访问到data中的msg变量？？？data又为什么是个函数？分析：clone下vue的项目源码，然后打开src/core/instance/index.js调用init方法时先进行了检查，确保已经使用newVue初始化Vue（已构造一个作用
全端菜鸟小姐·2018-12-26 10:45

snabbdom源码解析（一） 准备工作

阅读vue源码的时候，想了解虚拟dom结构的实现，发现在src/core/vdom/patch.js的地方。作者说vue的虚拟DOM的算法是基于snabbdom进行改造的。
chen4342024·2018-12-26 00:00

Vue源码学习二 ———— Vue原型对象包装

Vue原型对象的包装在Vue官网直接通过script标签导入的Vue包是umd模块的形式。在使用前都通过newVue({})。记录一下Vue构造函数的包装。在src/core/instance/index.js这个文件是Vue构造函数的出生地。import{initMixin}from'./init'import{stateMixin}from'./state'import{renderMixin
weixin_30411819·2018-12-16 17:00

Vue源码学习之——如何在Chrome中deBug源码

参考链接如果我们不用单文件组件开发，一般直接引入开发版vue.js这种情况下debug也是很方便的，只不过vue.js文件代码是rollup生成的但是如果能够在vue项目中的src目录下中的文件打断点调试就更好了。那怎么做到呢？打开vue/script/config.js文件(就是package.json的入口文件)找到genConfig()函数该函数下有个config对象,给该对象添加一个属性和
AddTwoNum·2018-12-15 15:59

Vue源码解析之Template转化为AST的实现方法

Vue源码中虚拟DOM构建经历template编译
zwStar·2018-12-14 11:33

Vue源码探究-全局API

Vue源码探究-全局API本篇代码位于vue/src/core/global-api/Vue暴露了一些全局API来强化功能开发，API的使用示例官网上都有说明，无需多言。
ushio·2018-12-13 00:00

详解Vue源码之数据的代理访问

概念解析：1)数据代理:通过一个对象代理对另一个对象(在前一个对象内部)中属性的操作(读/写)2)vue数据代理:通过vm对象（即this）来代理data对象中所有属性的操作3)好处:更方便的操作data中的数据4)基本实现流程a.通过Object.defineProperty()给vm添加与data对象的属性对应的属性描述符b.所有添加的属性都包含getter/setterc.getter/se
被雨水过滤的空气不想说话·2018-12-11 17:03

Vue源码中要const _toStr = Object.prototype.toString的原因分析

在vue的源码中，vue/src/shared/util.js文件中存放的是一些方法。其中作者用了Object.prototype.toString这个方法来判断类型，但是并没有直接用，而是单独保存在一个变量：const_toStr=Object.prototype.toString那么为什么要这么做呢？先说下判断类型。众所周知，typeof在判断对象时不能正确判断Null，并且不能识别出Arra
今晚的雨停了·2018-12-09 10:47

Vue gettser setter 解剖 v2.5.17

现在看来是比较明显的bug了，但是这次也算是实实在在debug了一次vue源码，记录一下。demo最好的方法莫过于带着问题看原理了，
AmberDeng·2018-12-07 15:58

Vue源码学习（4）——数据响应系统

Vue源码学习（4）——数据响应系统：通过initData()看数据响应系统下面，根据理解我们写一个简略的源码：参考治愈watcher在：vm.$mount(vm.
AddTwoNum·2018-12-05 16:54
上一页 27 28 29 30 31 32 33 34 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他