web喵喵-CSDN博客

原创 JavaScript进阶之正则表达式

目的在JS中使用正则表达式的目的是使用某种规则匹配字符串或子字符串创建RegExp对象与创建数组相同，创建RegExp对象有两种方法，一种是字面量，一种是使用构造函数。使用字面量： var reg = /\d/g; //用两个斜杠包裹匹配规则使用构造函数： var reg = new RegExp('\\d', 'g'); //第一个参数是匹配规则，同时需要对'\'进行转义。可以看...

2018-07-12 21:08:12 317

在上一章，介绍了Vue将普通对象变成响应式对象是利用defineReactive()（定义在'core/observer/index.js'中）函数，defineReactive()函数中主要关注的是新建一个dep = new Dep()，以及在设置属性的getter时，对其做依赖收集：dep.depend()export function defineReactive ( obj: Obje...

2018-07-10 15:56:33 636

原创 Vue源码分析之响应式对象（八）

Vue的一个最大的特点就是数据响应式，修改数据之后即会更新视图，这样我们只需要聚焦在数据上，不必过多关注怎么取修改视图。Vue的数据响应主要是通过ES5中的Object.defineProperty()来实现的，具体怎么实现的，让我们从源码的角度分析。首先，在初始化的过程中，Vue就会为data和props里的属性加上响应式。在new Vue的过程中会执行initState(vm)函数，该函数在'...

2018-07-07 16:55:25 1210

原创 Vue源码之createComponent函数（七）

在createElment函数创建vnode时，如果判断tag标签是组件的话，会调用createComponent函数创建vnode在createComponent（定义在'src/core/vdom/create-component.js'）中，首先是获得基础构造器baseCtor。这里的context是指向vm实例。在'globalp-api/index.js'中，可以看到option._ba...

2018-07-06 17:14:34 3271

原创 Vue源码解析之_update函数（六）

在$mount函数中，主要是调用了mountComponent函数，而该函数最后主要是调用了updateComponent函数，上一次我们分析了render函数的功能（主要是利用createElement函数生成vnode），那么_update函数主要做了什么首先，可以看到在'src/core/instance/lifecycle.js'中在Vue原型上定义了私有方法_update，在整个函数中，...

2018-07-06 10:26:11 7585

原创 Vue源码之createElement函数（五）

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

2018-07-03 17:59:13 10574

原创 Vue源码之render函数（四）

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

2018-07-03 15:25:39 1908

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

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

2018-07-02 20:03:05 5089

原创 Vue源码之new Vue（二）

在一个简单的vue工程中，import Vue之后，我们会新建一个Vue实例，例如vue.js官网中的例子：那么在new Vue的过程中到底发生了什么？1. 首先，在vue源码中'src/instance/index.js'中可以看到，new Vue的过程主要是执行_init()函数。这里的_init()函数来自于'./init.js'中，在这个文件中，可以看到_init函数的主要功能：首先是对一...

2018-07-02 16:43:36 4007

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

在使用vue之前，通常会import Vue from ''vue'那分析源码的第一步，看看import Vue这个过程到底发生了什么。1. 首先，将vue源码从github中clone下来。然后在vue/src中查看源码，在 web 应用下，我们来分析 Runtime + Compiler 构建出来的 Vue.js，对应的源码路径是src/platforms/entry-runtime-with...

2018-07-02 15:07:08 2546

yayayayaya_的博客