0%

接上文,得到 vnode 后执行 vm._update。因为 vm._vnode 存在即已经渲染过,则走更新方法:

1
2
// updates
vm.$el = vm.__patch__(prevVnode, vnode);

vm.__patch__patch 方法,进入 patch 流程。

patch

patch 的主要功能是将新旧 vnode 进行同级比较,然后更新真实 dom 节点和组件实例。

阅读全文 »

前面七章分析了 vue demo 的整个初始化过程,本文开始分析当数据(model)发生变化时,Vue 的处理过程。

我们以点击 dom 触发 plus 执行 this.info.age++ 为例,分析 Vueupdate 阶段。

proxyGetter && proxySetter

此时读取 this.info,则触发在 ininState->initData->proxy(vm, "_data", key) 监听的 proxyGetter:

1
2
3
4
5
6
7
8
9
10
11
function proxy(target, sourceKey, key) {
sharedPropertyDefinition.get = function proxyGetter() {
return this[sourceKey][key];
};

sharedPropertyDefinition.set = function proxySetter(val) {
this[sourceKey][key] = val;
};

Object.defineProperty(target, key, sharedPropertyDefinition);
}
阅读全文 »

vnode 渲染为真实 dom

接上文,vm._render 通过 render 生成 vnode 后,然后执行 vm._update(vm._render(),hydrating) 来首次渲染成真实 dom,里面执行:

1
2
3
4
5
6
7
if (!prevVnode) {
// initial render
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */);
} else {
// updates
vm.$el = vm.__patch__(prevVnode, vnode);
}

此处为初始渲染,执行第一个分支 vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */); 即执行 patch

patch 中因为 oldVnodevm.$el 是真实节点,则 oldVnode 替换为空 vnode,然后执行:

阅读全文 »

接上文,在触发生命周期钩子 created 后,执行:

1
2
3
if (vm.$options.el) {
vm.$mount(vm.$options.el);
}

该句执行完后,_init 方法(位置在 src/core/instance/init.js)执行结束。

$mount 简述

判断是否有 $options.el,如果有就直接执行:vm.$mount(vm.$options.el)。在前面已经提到 $mount 方法与平台相关,所以在本例会执行 entry-runtime-with-compiler.js 中的 $mount

阅读全文 »

接上文继续分析,在触发生命周期钩子 beforeCreate 后,执行:

1
2
3
4
initInjections(vm); // resolve injections before data/props
initState(vm);
initProvide(vm); // resolve provide after data/props
callHook(vm, 'created');

initInjections

依赖注入,用于层级组件间传值,不可响应。

判断是否存在 $options.inject,然后在 resolveInject 里递归向上各级父元素中查找 vm._provided 属性值里是否有对应的注入值。找到最新值后放在实例下监听, set 方法设置无法重写,即不能更改注入值。

阅读全文 »

根据 demo 配置,将 demo 跑起来,然后忽略掉分支剧情,只分析 Vue 运行的主流程。

引入 Vue 和 App

执行 index.js, 先执行:

1
2
import Vue from 'vue';
import App from './app.vue';
  • 变量 VueVue 的构造函数,在执行 Vue 文件的过程中,会初始化设置 Vue 上的原型变量方法,Watch 类,Dep 类等等。
  • 变量 App 为经过 webpack 编译,通过 vue-loader,vue-template-compiler,VueLoaderPlugin 作用后的包含 renderstaticRenderFns组件选项对象:
阅读全文 »

前言

Vue 是一套用于构建用户界面的渐进式框架,被设计为可以自底向上逐层应用。本系列不会刻意梳理讲解 APIVue 的用法,官方文档已经有清晰的讲解。

本系列文章作为笔记,用于记录 vue2.x 的构建(含组件)主流程。

概览

根据 vue 构建 demo 的生命周期及其数据变化的更新作为流程线及相关,本系列文章一共分为以下章节:

阅读全文 »

原文链接 https://juejin.im/post/5d1ecb96f265da1b6d404433

什么是跨域

当一个资源从与该资源本身所在的服务器不同的域、协议、端口请求一个资源时,资源会发起一个跨域 HTTP 请求。

出于安全原因,浏览器做出了一些限制,跨站请求可以正常发起,但是返回结果被浏览器拦截了。

什么是同源策略

阅读全文 »