未来可期

目录第一节Flow、Vue源码目录设计和Rolluo构建Vue.js源码第二节Vue的入口文件，即Vue的构造函数第三节数据驱动之_init()方法第四节数据驱动之$mount方法第五节数据驱动之_render方法第六节数据驱动之认识VNode第七节数据驱动之认识createElement第八节数据驱动之_update方法第九节数据驱动总结参考资料代码地址：vue2.5....

学习VUE中对DOM的更新以及diff算法的实现

学习响应式原理中，学习如何改变数据就会引起视图变化，并且对响应式原理进行总结

Object.definePropertyObject.defindProperty(obj, prop, descriptor)obj：定义属性的对象；prop：是要定义或者修改的属性的名称；descriptor：是将被定义或修改的属性描述符，在VUE中主要使用了get和set，get是一个给属性提供的getter方法，当我们访问了该属性的时候会触发getter方法；set是给属性提...

生命周期的activated和deativated后期再补；异步组件后期在补一补，用的次数并不多啊我…

组件注册在 Vue.js 中，除了它内置的组件如 keep-alive、component、transition、transition-group 等，其它用户自定义组件在使用前必须注册。全局注册要注册一个全局组件，可以使用 Vue.component(tagName, options)。例如：Vue.component('my-component', { // 选项})Vue....

源码中最终执行生命周期的函数都是调用 callHook 方法，它的定义在 src/core/instance/lifecycle中：export function callHook (vm: Component, hook: string) { // #7573 disable dep collection when invoking lifecycle hooks pushTarge...

resolveConstructorOptionsmergeOptions方法的调用在_init中，我们从之前了解到_init是在new Vue时，这个一般发生在两个地方：外部代码，即我们自己new Vue;子组件内部调用new Vue。Vue.prototype._init = function (options?: Object) { // 如果是子组件 if (optio...

createElm函数的作用之前已经讲过了，就是将VNode转为真实的DOM。// createElm// src/core/vdom/patch.jsfunction createElm ( vnode, insertedVnodeQueue, parentElm, refElm, nested, ownerArray, index) { // ... ...

Vue的另一一个核心思想是组件化。组件中的资源是独立的，可以在系统内复用，组件和组件之间也可以相互的嵌套。这次要分析的案例是这个：import Vue from 'vue'import App from './App.vue'var app = new Vue({ el: '#app', // 这里的 h 是 createElement 方法 render: h => h...

花了一张图给自己理解。

今天学习的时候发现关于_update有点太复杂了，这部分的源码得慢慢坑，三言两语讲不清楚啊…首先先记住两点：_update在首次渲染和数据更新（即响应式时）会被调用。这次分析只会跟首次渲染有关系；_update是将VNode转换为真实的DOM我们调用_update是在$mount的时候vm._update(vm._render(), hydrating)先找到_update所在的...

我们知道VNode是由_render函数生成的：vnode = render.call(vm._renderProxy, vm.$createElement);在$createElement中：vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false);vm.$createElement = (a, b, c, d) =...

上一节我们分析了_render函数，它最后返回了VNode，这一节我们来认识一下VNode。由于DOM元素是复杂的，所以每次我们操作DOM元素会产生昂贵的代价。而VNode就是用一个原生的JS对象区描述一个DOM节点，所以它比创建一个 DOM 的代价要小很多。// src/core/vdom/vnode.jsexport default class VNode { // 对应真实节点的标...

vue的_render定义在src/core/instance/render.js文件中：// src/core/instance/render.jsVue.prototype._render = function(): VNode { const vm: Component = this; // 在 Vue 2.0 版本中，所有 Vue 的组件的渲染最终都需要 render 方法 ...

在_init的最后一步中是调用了$mount$mount在src/platform/web/entry-runtime-with-compiler.js、src/platform/weex/runtime/index.js都有定义。因为$mount方法的实现是和平台、构建方式都相关的。完整版（Runtime + Compiler）的Vue中，$mount函数在src/platform/web/...

我们通常使用vue的时候是这么用的：<div id="app"> {{ message }}</div><script>var app = new Vue({ el: '#app', data() { return { message: 'hello Vue!' } }})</script>...

我们通过学习Vue的入口文件，来学习Vue的构造函数。寻找vue所在的文件在上一节我们学习rollup打包文件的时候，发现编译版本的入口文件是/src/platforms/web/entry-runtime-with-compiler.js。// src/platforms/web/entry-runtime-with-compiler.js/* @flow */import conf...

Flow在 Vue.js 的主目录下有 .flowconfig 文件， 它是 flow 的配置文件。其中的[libs]用来描述包含指定库定义的目录，这里指向的是项目根目录下的flow文件夹。打开此目录，可以发现文件结构如下：flow├── compiler.js # 编译相关├── component.js # 组件数据结构├── global-api.js ...