vue的挂载是什么意思（vue 挂载）

上篇文章写到了执行 Vue 的时候，会去执行 _init 内部方法，在 _init 方法挂载钩子 created 之前会生成对 data 的数据监听。

今天来聊一下数据是如何挂载到页面上的，在 _init 方法内部先执行了两个钩子方法：

callHook(vm, \\\'beforeCreate\\\')callHook(vm, \\\'created\\\')

在 beforeCreate 和 created 钩子中间有一个方法 initState(vm) 会去执行初始化 data 数据并且添加监听。

执行完 created 钩子，会继续执行：

if (vm.$options.el) {  vm.$mount(vm.$options.el)}

执行内部方法 $.mount 传入参数 el ，这个 vm 就是我们的 Vue 实例，而 $mount 和 $.options 都是内部方法。

在当前页面 mergeOptions 方法会执行「合并data 和props」，并最后赋值给 $.options ，也就是说 $.options 是 data 和 props 合并后的数据。

继续执行，我们进入 entry-runtime-with-compiler.js 页面

src/platforms/web/entry-runtime-with-compiler.js

执行原型上的方法 $mount ，把 el 我们页面赋值的 id 传进去。进到方法里，先去判断是否传入了 id ，然后根据 id 去查找元素，如果能找到就返回。

el = el && query(el);
export function query (el: string | Element): Element {  if (typeof el === \\\'string\\\') {    const selected = document.querySelector(el)    ...    return selected  }}

$mount 方法里判断获取的 el 节点是否是 body 或者 html，如果是的话也会报错的，Vue 生成的 Demo 不允许挂载到 body 或者 html 上，因为 Vue 最后生成的 Demo 是需要覆盖你传入的标签节点。

if (el === document.body || el === document.documentElement) {  process.env.NODE_ENV !== \\\'production\\\' && warn(    `Do not mount Vue to <html> or <body> - mount to normal elements instead.`  )  return this}

再随后判断你有没有写 template 模板，如果写了就去执行 idToTemplate （也需要转成 render 函数），如果没写就去获取「序列化HTML」，获取出来的是字符串。

序列化的字符串

拿到序列化的HTML 后，会去执行生成 render 函数，先执行 compileToFunctions 方法，compile 方法把字符串去掉空格，转成 AST 树。如何生成 AST 树？

const compiled = baseCompile(template.trim(), finalOptions)

baseCompile 函数会返回两个属性，一个 ast对象一个 render 字符串。

vue的挂载是什么意思（vue 挂载）

返回的数据

生成的 AST 树格式

再然后通过 generate 生成一个 render 方法。一层一层传递出去，挂载到 options 上。

继续执行，就到了 beforeMount 这个钩子函数了，挂载一下，绑定 this 。

执行 new Watcher 是一个观察者模式，此方法把数据渲染到页面（下次分析）。

最后挂载钩子 mounted 。

到此，数据挂载完成。

图片授权基于 www.pixabay.com 相关协议

推荐阅读

Vue 在哪步执行数据监听？

HTML 页面的渲染流程

HTTP 协议的请求头和响应头

原创文章，作者：小道研究，如若转载，请注明出处：https://www.sudun.com/ask/34557.html

vue的挂载是什么意思（vue 挂载）

相关推荐

100GB免费存储，不限速，好用国外网盘

一图掌握项目成本管理

如何选择一款好用的客户管理系统？这篇文章告诉你

项目经理也需要培训。以下三个培训模拟功能帮助项目经理取得成功

发表回复