写于vue3.0发布前夕的helloworld之二
接着，继续走，来到了vm.$mount。
开始生成render函数，生成VNode，由于是第一次加载，所以patch机制为只删除前一个dom节点机制，下面都会讲到。
先到$mount：
Vue.prototype.$mount = function (
el,
hydrating
) {
el = el && query(el); /* istanbul ignore if */
if (el === document.body || el === document.documentElement) {
warn(
"Do not mount Vue to <html> or <body> - mount to normal elements instead."
);
return this
} var options = this.$options;
// resolve template/el and convert to render function
if (!options.render) {
var template = options.template;
if (template) {
if (typeof template === 'string') {
if (template.charAt(0) === '#') {
template = idToTemplate(template);
/* istanbul ignore if */
if (!template) {
warn(
("Template element not found or is empty: " + (options.template)),
this
);
}
}
} else if (template.nodeType) {
template = template.innerHTML;
} else {
{
warn('invalid template option:' + template, this);
}
return this
}
} else if (el) {
template = getOuterHTML(el);
}
if (template) {
/* istanbul ignore if */
if (config.performance && mark) {
mark('compile');
} var ref = compileToFunctions(template, {
outputSourceRange: "development" !== 'production',
shouldDecodeNewlines: shouldDecodeNewlines,
shouldDecodeNewlinesForHref: shouldDecodeNewlinesForHref,
delimiters: options.delimiters,
comments: options.comments
}, this);
var render = ref.render;
var staticRenderFns = ref.staticRenderFns;
options.render = render;
options.staticRenderFns = staticRenderFns; /* istanbul ignore if */
if (config.performance && mark) {
mark('compile end');
measure(("vue " + (this._name) + " compile"), 'compile', 'compile end');
}
}
}
return mount.call(this, el, hydrating)
};
一句句来讲，这里边是挺长，但是足够简单，首先判断el是否为body或者html元素，是则警告，然后退出当前函数，然后根据条件拿到template，因为我们没有设置render和template，所以template走else分支getOuterHTML，拿到template之后，会将当前的template编译成一个render函数，这个编译函数叫做compileToFunctions：这个函数是真的长，而且与主题干系不大，这里我们用文字解释一下就行，首先他是一个闭包函数，闭包了一个叫cache的对象这个对象是缓存当前已经编译过的模板的，进入函数之后有缓存直接返回缓存，没有的话就会执行compile函数，这些都是编译过程，最终compile会调用parseHTML方法使用正则加字符串分析字符串，返回一个这样的对象：
{
"type":1,
"tag":"div",
"attrsList":[
{"name":"id","value":"app","start":5,"end":13}
],
"attrsMap":{
"id":"app"
},
"rawAttrsMap":{
"id":{
"name":"id",
"value":"app",
"start":5,
"end":13
}
},
"children":
[
{
"type":2,
"expression":"_s(msg)",
"tokens":[{"@binding":"msg"}],
"text":"{{msg}}",
"start":14,"end":21
}
],
"start":0,
"end":27,
"plain":false,
"attrs":[{"name":"id","value":"\"app\"","start":5,"end":13}]
}
这就是我们的ast语法树，之后会根据ast生成code，这个方法叫做generate：
function generate (
ast,
options
) {
var state = new CodegenState(options);
var code = ast ? genElement(ast, state) : '_c("div")';
return {
render: ("with(this){return " + code + "}"),
staticRenderFns: state.staticRenderFns
}
}
这个方法调用了genElement方法，简而言之，里边的方法生成code时都会以ast上的值为原料，进行字符串拼接，最后code长这样：
_c('div',{attrs:{"id":"app"}},[_v(_s(msg))])
这里做一下解释_c,_v都是vue内部创建虚拟dom的函数,_s其实就是将当前值转化成字符串，继续走，generate执行完毕之后返回到compileToFunctions，这个时候拼接好的render字符串是这样：
"with(this){return _c('div',{attrs:{"id":"app"}},[_v(_s(msg))])}"
然后会使用new Function 将其生成一个函数，这个函数就是我们的render，组建上的render，执行完compileToFunctions，继续回到$mount函数里，执行最终的$mount：
Vue.prototype.$mount = function (
el,
hydrating
) {
el = el && inBrowser ? query(el) : undefined;
return mountComponent(this, el, hydrating)
};
可见mout调用了mountComponent方法：
function mountComponent (
vm,
el,
hydrating
) {
vm.$el = el;
if (!vm.$options.render) {
vm.$options.render = createEmptyVNode;
{
/* istanbul ignore if */
if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
vm.$options.el || el) {
warn(
'You are using the runtime-only build of Vue where the template ' +
'compiler is not available. Either pre-compile the templates into ' +
'render functions, or use the compiler-included build.',
vm
);
} else {
warn(
'Failed to mount component: template or render function not defined.',
vm
);
}
}
}
callHook(vm, 'beforeMount'); var updateComponent;
/* istanbul ignore if */
if (config.performance && mark) {
updateComponent = function () {
var name = vm._name;
var id = vm._uid;
var startTag = "vue-perf-start:" + id;
var endTag = "vue-perf-end:" + id; mark(startTag);
var vnode = vm._render();
mark(endTag);
measure(("vue " + name + " render"), startTag, endTag); mark(startTag);
vm._update(vnode, hydrating);
mark(endTag);
measure(("vue " + name + " patch"), startTag, endTag);
};
} else {
updateComponent = function () {
vm._update(vm._render(), hydrating);
};
} // we set this to vm._watcher inside the watcher's constructor
// since the watcher's initial patch may call $forceUpdate (e.g. inside child
// component's mounted hook), which relies on vm._watcher being already defined
new Watcher(vm, updateComponent, noop, {
before: function before () {
if (vm._isMounted && !vm._isDestroyed) {
callHook(vm, 'beforeUpdate');
}
}
}, true /* isRenderWatcher */);
hydrating = false; // manually mounted instance, call mounted on self
// mounted is called for render-created child components in its inserted hook
if (vm.$vnode == null) {
vm._isMounted = true;
callHook(vm, 'mounted');
}
return vm
}
mountComponent方法一进来，先判断是否有render,之后会根据条件警告一些信息。然后开始调起beforeMount钩子函数，下来初始化一个updateComponent方法，他的正常版本长这样：
updateComponent = function () {
vm._update(vm._render(), hydrating);
};
实际上在组建的dom更新，包括第一次挂载，和随后的相应式更新上，本质都用的是这一个函数。然后继续走，重头戏来啦，watcher在这里开始初始化，注意传给他的第四个参数，在哪里我们把要调用beforeUpdate给传了过去。
我们的下面来到watcher的构造函数：
写于vue3.0发布前夕的helloworld之二的更多相关文章
- 写于vue3.0发布前夕的helloworld
前言: vue3.0马上要来了,于今昔写一篇vue将一个字符串hellowrold渲染于页面的过程,慰藉我这几个月写vue的'枯燥'. 源码版本是2.6.10. 开始: 我们的模板足够简单: < ...
- 写于vue3.0发布前夕的helloworld之三
接上,watcher构造函数: var Watcher = function Watcher ( vm, expOrFn, cb, options, isRen ...
- VUE3.0发布，自己搞个文档网站
9月19日,尤大神发表了VUE3.0版本的演说,强大且震撼,这两天一直在找网站文档,可能还未被百度收录,未找到文档网站.后来在github上面找到了中文代码. 地址为:https://github.c ...
- 预计2019年发布的Vue3.0到底有什么不一样的地方？
摘要: Vue 3.0预览. 原文:预计今年发布的Vue3.0到底有什么不一样的地方? 作者:小肆 微信公众号:技术放肆聊 Fundebug经授权转载,版权归原作者所有. 还有几个月距离 vue2 的 ...
- 把酒言欢话聊天，基于Vue3.0+Tornado6.1+Redis发布订阅(pubsub)模式打造异步非阻塞(aioredis)实时(websocket)通信聊天系统
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_202 "表达欲"是人类成长史上的强大"源动力",恩格斯早就直截了当地指出,处在蒙昧时代即低 ...
- 纯小白入手 vue3.0 CLI - 3.3 - 路由的导航守卫
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 2.1 - 组件 ( component )
vue3.0 CLI 真小白入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0Study ...
- 快速进阶Vue3.0
在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版. 可以直接看 github源码. 新版Vue 3.0计划并已实现的主要架构改 ...
- Vue3实战系列：Vue3.0 + Vant3.0 搭建种子项目
最近在用 Vue3 写一个开源的商城项目,开源后让大家也可以用现成的 Vue3 大型商城项目源码来练练手,目前处于开发阶段,过程中用到了 Vant3.0,于是就整理了这篇文章来讲一下如何使用 Vue3 ...
- Laf v1.0 发布：函数计算只有两种，30s 放弃的和 30s 上线的
一般情况下,开发一个系统都需要前端和后端,仅靠一个人几乎无法胜任,需要考虑的特性和功能非常多,比如: 需要一个数据库来存放数据: 需要一个文件存储来存放各种文件,比如图片文件: 后端需要提供接口供前端 ...
随机推荐
- rocketMq4.2.0启动broker报错找不到或无法加载主类 Files\Java\jdk1.8.0_101\lib\dt.jar;C:\Program]
假如弹出提示框提示'错误: 找不到或无法加载主类 xxxxxx'.打开runbroker.cmd,然后将'%CLASSPATH%'加上英文双引号.保存并重新执行start语句.做如下图处理 但是输出还 ...
- thinkphp6.0封装数据库及缓存模型
项目中的thinkphp6.0\app\common\Model.php 1 <?php 2 /** 3 * 数据库及缓存模型 4 */ 5 namespace app\common; 6 7 ...
- Qt开源作品12-硬盘容量控件
一.前言 磁盘容量统计控件,说白了,就是用来统计本地盘符占用的容量,包括但不限于已用空间.剩余空间.总大小.已用百分比等,其中对应的百分比采用进度条显示,该进度条的前景色和背景色及文字颜色可以设置,在 ...
- 在MBP上运行推理LLaMA-7B&13B模型
在MBP上运行推理LLaMA-7B模型 build this repo # build this repo git clone https://github.com/ggerganov/llama.c ...
- C#+ WPF 实现蓝牙转WIFI计步上位机
前言 一个WIFI上位机,接收底层MPU6050数据,途中转蓝牙从机透传,到蓝牙主机直连WIFI,PC端UDP通信,实现三轴加速度数据传送和计步功能. 项目介绍 本项目基于.NET平台,使用WPF开发 ...
- C#/.NET/.NET Core技术前沿周刊 | 第 20 期（2025年1.1-1.5）
前言 C#/.NET/.NET Core技术前沿周刊,你的每周技术指南针!记录.追踪C#/.NET/.NET Core领域.生态的每周最新.最实用.最有价值的技术文章.社区动态.优质项目和学习资源等. ...
- Solution Set -「NOIP Simu.」20221014
\(\mathscr{A}\sim\)「Unknown」tothecrazyones 有 \(n\) 堆石子, 第 \(i\) 堆有 \(a_i\) 个. Alice 和 Bob 轮流抓取, Al ...
- biancheng-Python爬虫教程
http://c.biancheng.net/python_spider/ 网络爬虫又称网络蜘蛛.网络机器人,它是一种按照一定的规则自动浏览.检索网页信息的程序或者脚本.网络爬虫能够自动请求网页,并将 ...
- 从生活案例理解滑动窗口最大值：一个超直观的思路讲解｜LeetCode 239 滑动窗口最大值
LeetCode 239 滑动窗口最大值 点此看全部题解 LeetCode必刷100题:一份来自面试官的算法地图(题解持续更新中) 更多干货,请关注公众号[忍者算法],回复[刷题清单]获取完整题解目录 ...
- 旁站和C段查询
旁站和C段查询 旁站和C段的概念 旁站 旁站(也称为邻居站点)是指与目标网站在同一服务器上的其他网站.这些网站与目标网站共享相同的网络环境,包括IP地址(或更具体地说,共享相同的C段IP地址,但D段不 ...