编程小渣渣的进阶之路

编程是一种乐趣,不是一项工作

Vue源码二次解析【理论】5------Vue初始化全过程-------VDOM

VNode【虚拟DOM】是Vue中一个很重要的方面;在Vue中,VNode是对真实DOM的一种抽象【VNode 用来映射到真实 DOM 的渲染】。每个 VNode 都有children,children每个元素也是一个 VNode,这样就形成了一个 VNode Tree,它很好的描述了我们的 DO...

2019-05-31 14:55:14

阅读数 19

评论数 0

Vue源码二次解析【理论】4------Vue初始化全过程-----render

Vue的渲染过程主要依赖的是render函数,核心js文件为render.js文件。 render函数的第一个参数是createElement,在这里render函数中的createElement方法就是vm.$createElement方法。vm.$createElement方法定义是在执行i...

2019-05-31 11:47:13

阅读数 19

评论数 0

Vue源码二次解析【理论】3------Vue初始化全过程-----挂载过程

Vue 中是通过$mount实例方法去挂载vm的。整个过程是先缓存原型上的$mount方法,然后重新定义该方法。首先,它对el做了限制,Vue 不能挂载在body、html这样的根节点上。接下来的是判断有没有定义render方法。如果没有定义render方法,则会把el或者template字符串转...

2019-05-31 11:41:59

阅读数 20

评论数 0

Vue源码二次解析【理论】2------Vue初始化全过程

这次分析以在 web 应用下, Runtime + Compiler 构建出来的 Vue.js为例。Vue的本质上就是一个用 Function 实现的 Class,然后它的原型 prototype 以及它本身都扩展了一系列的方法和属性。 Vue 的初始化逻辑非常清楚,实质上就是是往Vue的原型上...

2019-05-31 10:57:11

阅读数 21

评论数 0

Vue源码二次解析【理论】1------Vue构建过程

在前一个系列中,结合源码,我已经分析的很详细了。这一个系列主要是想通过理论,从函数的角度来了解每个过程的形成。在本篇以及接下来的篇章中所有的分析只是基于Web这个层面。 Vue的源码构建过程主要依赖build.js这个文件,而运行这个文件的相关配置主要存放在config.js文件中,这次着重就这...

2019-05-31 09:50:01

阅读数 30

评论数 0

在WebStorm中安装Vue环境

软件源材料: webstorm node npm webpack vue-cli webstorm WebStorm 是jetbrains公司旗下一款JavaScript 开发工具,与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。软件官网为ht...

2019-05-30 15:52:08

阅读数 41

评论数 0

Vue源码系列22----响应式原理----组件更新

当数据发生变化的时候,会触发渲染watcher的回调函数,进而执行组件的更新过程。 updateComponent = () => { vm._update(vm._render(), hydrating) } new Watcher(vm, updateComponent,...

2019-05-24 13:17:07

阅读数 31

评论数 0

Vue源码系列23---响应式原理-----计算属性和侦听属性

Vue 的组件对象支持了计算属性computed和侦听属性watch2 个选项。计算属性本质上是computed watcher,而侦听属性本质上是user watcher。就应用场景而言,计算属性适合用在模板渲染中,某个值是依赖了其它的响应式对象甚至是计算属性计算而来;而侦听属性适用于观测某个值...

2019-05-24 09:34:15

阅读数 31

评论数 0

markdown语法

Markdown基本语法: 输入`` 就能获得目录 标题 #:一级标题 ##:二级标题 ###:三级标题 ####:四级标题 #####:五级标题 ######:六级标题 字体 加粗 要加粗的文字左右分别用两个*号包起来 **加粗的内容** 斜体 要倾斜的文字左右分别用一...

2019-05-22 11:51:19

阅读数 24

评论数 0

Vue源码系列21------响应式原理-----检测变化的注意事项

如何处理一些特殊情况【响应式数据对于对象新增删除属性以及数组的下标访问修改和添加数据等的变化观测不到。】:我们就可以知道如何把它们也变成响应式的对象【通过Vue.set以及数组的API可以解决这些问题,本质上它们内部手动去做了依赖更新的派发。】。其实对于对象属性的删除也会用同样的问题,Vue 同样...

2019-05-22 11:47:06

阅读数 24

评论数 0

Vue源码系列20------响应式原理----nextTick

nextTick是 Vue 的一个核心实现,在介绍 Vue 的 nextTick 之前,首先需要了解一下JS 的运行机制。其次需要了解到数据的变化到 DOM 的重新渲染是一个异步过程,发生在下一个 tick。这就是我们平时在开发的过程中,比如从服务端接口去获取数据的时候,数据做了修改,如果我们的某...

2019-05-22 11:39:24

阅读数 30

评论数 0

Vue源码系列19------响应式原理----派发更新

依赖收集的目的就是为了当我们修改数据的时候,可以对相关的依赖派发更新。Vue 数据修改派发更新的过程,实际上就是当数据发生变化的时候,触发 setter 逻辑,把在依赖过程中订阅的的所有观察者,也就是watcher,都触发它们的update过程,这个过程会把所有要执行update的watcher推...

2019-05-22 11:27:25

阅读数 26

评论数 0

Vue源码系列18------响应式原理-----依赖收集

响应式对象 getter 相关的逻辑就是做依赖收集。收集依赖的目的是为了当这些响应式数据发送变化,触发它们的 setter 的时候,能知道应该通知哪些订阅者去做相应的逻辑处理,我们把这个过程叫派发更新,其实Watcher和Dep就是一个非常经典的观察者设计模式的实现。依赖收集时订阅数据变化的wat...

2019-05-22 10:55:22

阅读数 42

评论数 0

Vue源码系列17------响应式原理---响应式对象

Vue.js 实现响应式的核心是利用了 ES5 的Object.defineProperty,给数据添加了 getter 和 setter,目的就是为了在我们访问数据以及写数据的时候能自动执行一些逻辑:getter 做的事情是依赖收集,setter 做的事情是派发更新,这也是为什么 Vue.js ...

2019-05-22 10:16:31

阅读数 25

评论数 0

Vue源码系列16------响应式原理-----原理

至此分析了Vue 怎么实现数据渲染和组件化的,主要是初始化的过程,把原始的数据最终映射到 DOM 中,但并没有涉及到数据变化到 DOM 变化的部分。而 Vue 的数据驱动除了数据渲染 DOM 之外,还有一个很重要的体现就是数据的变更会触发 DOM 的变化。都知道前端开发最重要的 2 个工作,一个是...

2019-05-22 09:54:19

阅读数 22

评论数 0

Vue源码系列15------组件化----异步组件

在日常的开发中,为了提升性能,多使用异步组件。即将一些非首屏的组件设计成异步组件,按需加载。Vue有3 种异步组件的实现方式,实现了 loading、resolve、reject、timeout 4 种状态。异步组件实现的本质是 2 次渲染,除了 0 delay 的高级异步组件第一次直接渲染成 l...

2019-05-22 09:48:05

阅读数 29

评论数 0

Vue源码系列15------组件化-----组件注册

在 Vue.js 中,除了它内置的组件如keep-alive、component、transition、transition-group等,其它用户自定义组件在使用前必须注册。在开发过程中可能会遇到如下报错信息: 'Unknown custom element: <xxx&...

2019-05-22 09:21:49

阅读数 26

评论数 0

Vue源码系列14------组件化-----生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码Vue官方给出的关于生命周期的图示链接如下:https:/...

2019-05-21 18:01:55

阅读数 932

评论数 1

Vue源码系列12-------合并配置----外部调用

new Vue初始化的过程通常有 2 种场景,一种是外部我们的代码主动调用new Vue(options)的方式实例化一个 Vue 对象;另一种是组件过程中内部通过new Vue(options)实例化子组件。但是无论哪种场景,都会执行实例的_init(options)方法,它首先会执行一个mer...

2019-05-21 17:27:55

阅读数 37

评论数 0

Vue源码系列13------合并配置----组件调用

组件场景 由于组件的构造函数是通过Vue.extend继承自Vue的,先回顾一下这个过程,代码定义在src/core/global-api/extend.js中 /** * Class inheritance */ Vue.extend = function (extendOptions...

2019-05-21 17:27:51

阅读数 408

评论数 0

提示
确定要删除当前文章?
取消 删除
关闭
关闭