vue实例没有挂载到html上,vue 源码学习 - 实例挂载
前言
在学习vue源码之前需要先了解源码目录设计(了解各个模块的功能)丶Flow语法。
src
├── compiler # 把模板解析成 ast 语法树,ast 语法树优化,代码生成等功能。
├── core # 核心代码 Vue.js 的灵魂
├── platforms # 不同平台的支持 web 和 weex
├── server # 服务端渲染这部分代码是跑在服务端的 Node.js
├── sfc # .vue 文件解析
├── shared # 工具方法
复制代码
flow语法可以参照 v-model源码学习中提到的flow语法介绍,以及到官网了解更多。
vue 实例化
vue 本质上就是一个用 Function 实现的 Class,然后它的原型 prototype 以及它本身都扩展了一系列的方法和属性
vue 的定义
在 src/core/instance/index.js 中
import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'
function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword')
}
this._init(options)
}
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
export default Vue
复制代码
通过源码我们可以看到,它实际上就是一个构造函数。我们往后看这里有很多 xxxMixin 的函数调用,并把 Vue 当参数传入,它们的功能都是给 Vue 的 prototype 上扩展一些方法。
阶段
首先通过new Vue实例化,过程可以参考之前写的vue 生命周期梳理
vue 实例挂载的实现
Vue中是通过$mount实例方法去挂载vm,$mount方法再多个文件中都有定义,和平台,构建方式相关。 首先来看 src/platform/web/entry-runtime-with-compiler.js文件中
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && query(el)
// A-> ..... 代表后面省略的代码从A-> 处接下去
}
复制代码
1.这段代码首先缓存了原型上的$mount 方法,再重新定义该方法
为了对比前后方法的差别,我们可以先看
compiler 版本的 $mount
2. $mount方法支持传入两个参数,第一个是el,它表示挂载的元素,可以是字符串,可以是DOM对象,会调用query方法转换成DOM对象,在浏览器环境下我们不需要传第二个参数,它是一个可选参数。
接下来继续看后面的代码
//
if (el === document.body || el === document.documentElement) {
process.env.NODE_ENV !== 'production' && warn(
`Do not mount Vue to or
- mount to normal elements instead.`
)
return this
}
const options = this.$options
// A-> ..... 代表后面省略的代码从A-> 处接下去
复制代码
首先对 el 做了限制,Vue 不能挂载在 body、html 这样的根节点上。如果是其中一个则返回this。this就是vue实例本身
定义option对象(new Vue中传入的数据)
//
if (!options.render) {
let template = options.template
if (template) {
// B-> ..... 代表后面省略的代码从B-> 处接下去
}else if(el){
// C-> ..... 代表后面省略的代码从C-> 处接下去
}
if (template) {
// D-> ..... 代表后面省略的代码从D-> 处接下去
}
return mount.call(this, el, hydrating)
}
复制代码判断有没有定义render方法,没有则会把el或者template字符串转换成render方法。在 Vue 2.0 版本中,所有 Vue 的组件的渲染最终都需要 render 方法
//
if(template){
if (typeof template === 'string') {
if (template.charAt(0) === '#') {
template = idToTemplate(template)
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && !template) {
warn(
`Template element not found or is empty: ${options.template}`,
this
)
}
}else if (template.nodeType) {
template = template.innerHTML
}
}
复制代码判断template 是否为字符串,取字符串的第一位判断是否是# 如果是#开头代表节点字符串,并调用idToTemplate方法如下
const idToTemplate = cached(id => {
const el = query(id)
return el && el.innerHTML
})
复制代码
接受一个参数,对这个参数进行query方法,前面提到query是将字符串转化成DOM,并且返回DOM的innerHTML
//
template = getOuterHTML(el)
复制代码
如果没有render和template的情况下,使用getOuterHTML方法重新定义template
function getOuterHTML (el: Element): string {
if (el.outerHTML) {
return el.outerHTML
} else {
const container = document.createElement('div')
container.appendChild(el.cloneNode(true))
return container.innerHTML
}
}
复制代码挂在DOM元素的HTML会被提取出来用作模板
总结 : render函数优先级最高,template和el次之
模板类型
render : 类型function 接收一个 createElement 方法作为第一个参数用来创建 VNode
render: function (createElement) {
return createElement(
'h' + this.level, // 标签名称
this.$slots.default // 子元素数组
)
},
复制代码template:类型string 一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。
el:类型string | HTMLElement 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例
runtime only 版本的$mount
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && inBrowser ? query(el) : undefined
return mountComponent(this, el, hydrating)
}
复制代码
开始和compiler版本的$mount 实现相同,只不过多加了一个inBrowser判断是否在浏览器环境下。
$mount 方法实际上会去调用 mountComponent 方法,这个方法定义在 src/core/instance/lifecycle.js 文件中
export function mountComponent (
vm: Component,
el: ?Element,
hydrating?: boolean
): Component {
vm.$el = el
if (!vm.$options.render) {
vm.$options.render = createEmptyVNode
}
callHook(vm, 'beforeMount')
// A-> ..... 代表后面省略的代码从A-> 处接下去
}
复制代码mountComponent接收到Vue.prototype.$mount方法中vue实例对象,和el字符串(经过query处理已经转成DOM)
更新vm实例上的$el
判断vm上有无render模板,如果没有创建一个空的虚拟VNode
插入beforeMount钩子
//
let updateComponent
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
}else{
updateComponent = () => {
vm._update(vm._render(), hydrating)
}
}
vm._watcher = new Watcher(vm, updateComponent, noop)
// A-> ..... 代表后面省略的代码从A-> 处接下去
复制代码mountComponent 核心就是先调用vm._render方法先生成虚拟 Node 将 vm._update方法作为返回值赋值给updateComponent
实例化Watcher构造函数,将updateComponent作为回调函数,也就是说在实例化Watcher后最终调用vm._update 更新 DOM。
watcher的作用
实例化的过程后执行回调,将调用vm._update 更新 DOM。
vm 实例中的监测的数据发生变化的时候执行回调函数实现更新DOM
//
hydrating = false
if (vm.$vnode == null) {
vm._isMounted = true
callHook(vm, 'mounted')
}
return vm
复制代码
这里vm.$vnode的值是什么,文件定义在src/core/instance/render.js 中,这里只关注vm.$vnode所以贴出相关代码
export function renderMixin (Vue: Class) {
Vue.prototype._render = function (): VNode {
const vm: Component = this
const { render, _parentVnode } = vm.$options
vm.$vnode = _parentVnode
}
}
复制代码
renderMixin函数接收Vue实例参数,在vue原型上的内部_render方法需要返回一个VNode,并且通过结构赋值的方法取出实例中$options的属性和方法。
我们来看看vm.$options对象具体有些什么
对象中有render函数,但是还未定义_parentVnode。可以知道vm.$vnode 表示 Vue 实例的父虚拟 Node,而且在mountComponent 函数中值还未定义。
由于未定义vm.$vnode值为undefined 所以vm.$vnode==null结果也为真
我们也可以通过生命周期图来理解, VNode render 是发生在beforeUPdate 之后updated之前这个环节
流程 :(1) new Vue ==> (2) init ==> (3) $mount ==> (4) compile ==> (5) render ==> (6) vnode ==> (7) patch ==> (8) DOM
最后设置 vm._isMounted 为 true作为之后判断是否经历了mounted生命周期的条件
总结
判断挂载的节点不能挂载在 body、html 上。
模板优先级render>template>el 并且最终都会转换成render方法
知道mountComponent方法 做了什么,先是调用了vm._render 方法先生成虚拟 Node,然后实例化Watcher 执行它,并监听数据变化,实时更新。
设置vm._isMounted标志,作为判断依据
vue实例没有挂载到html上,vue 源码学习 - 实例挂载相关推荐
- vue源码学习--vue源码学习入门
本文为开始学习vue源码的思路整理.在拿到vue项目源码的之后看到那些项目中的文件夹,会很困惑,不知道每个文件夹内的世界,怎么变换,怎样的魔力,最后产生了vue框架.学习源码也无从学起.我解决了这些困 ...
- Vue源码学习之Computed与Watcher原理
前言 computed与watch是我们在vue中常用的操作,computed是一个惰性求值观察者,具有缓存性,只有当依赖发生变化,第一次访问computed属性,才会计算新的值.而watch则是当 ...
- VUE源码学习第一篇--前言
一.目的 前端技术的发展,现在以vue,react,angular为代表的MVVM模式以成为主流,这三个框架大有三分天下之势.react和angular有facebook与谷歌背书,而vue是以一己之 ...
- Vuex 4源码学习笔记 - Vuex是怎么与Vue结合?(三)
在上一篇笔记中:Vuex源码学习笔记 - Vuex开发运行流程(二) 我们通过运行npm run dev命令来启动webpack,来开发Vuex,并在Vuex的createStore函数中添加了第一个 ...
- vue hot true 不起作用_从源码解读 Vuex 注入 Vue 生命周期的过程
第一篇文章我会结合 Vue 和 Vuex 的部分源码,来说明 Vuex 注入 Vue 生命周期的过程. 说到源码,其实没有想象的那么难.也和我们平时写业务代码差不多,都是方法的调用.但是源码的调用树会 ...
- Vue源码学习 - 组件化(三) 合并配置
Vue源码学习 - 组件化(三) 合并配置 合并配置 外部调用场景 组件场景 总结 学习内容和文章内容来自 黄轶老师 黄轶老师的慕课网视频教程地址:<Vue.js2.0 源码揭秘>. 黄轶 ...
- Vue模仿todo超详细讲解(附源码)
Vue模仿todo超详细讲解(附源码) 一.todo基本DOM结构 二.todo功能需求分析 1.新增任务 2.点击变成完成状态 3.点击删除 4.双击进入编辑以及修改保存 5.底部的状态筛选 6.l ...
- Vue源码学习 - 组件化一 createComponent
Vue源码学习 - 组件化一 createComponent 组件化 createComponent 构造子类构造函数 安装组件钩子函数 实例化 VNode 总结 学习内容和文章内容来自 黄轶老师 黄 ...
- vue开源项目(各大插件,gitup源码)
vue开源项目(各大插件,gitup源码) 目录 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element★31142 - 饿了么出品的Vue2的web UI工具 ...
最新文章
- 开平方的 7 种算法
- 单片机对于大学生难学吗?
- Fiddler抓包使用教程-过滤
- Windows server 2008 R2远程桌面3389端口号修改
- CTFshow php特性 web100
- opencv中在图片上显示文本
- 《Java 核心技术卷1 第10版》学习笔记------调试技巧
- 用python turtle库画正方形_用Python Turtle画一个正方形
- mailto 附带附件_我和我的朋友如何将附带项目发展为每月$ 17,000的业务
- 前端学习(3312):redux的正确构建
- php设计的意义,PHP设计模式
- 用组策略发布软件的简单解决办法
- 转:Windows下WSH/JS实现SVN服务器钩子脚本阻止提交空日志信息和垃圾文件
- python数值计算库Numpy学习之—np.linalg.norm(求范数)
- 抓linux肉鸡漏洞,利用MS08067远程溢出漏洞抓肉鸡(3)
- 怎么把sql文件导入MySQL数据库中_《sql基础教程》书里的sql文件如何导入数据库?...
- html5 js打开新页面,JavaScript实现按Ctrl键打开新页面_javascript技巧
- 怎么恢复电脑的无线网服务器,电脑搜不到无线网络怎么恢复|电脑搜不到无线网络的恢复方法...
- 矩阵标准型的系数是特征值吗_Jordan 标准型
- 华为云学院-人人学loT学习笔记- 第五章 操作系统 轻量开源
热门文章
- 求未知数X最临近的能被某个数字N整除的数
- 新建eclipse的java项目报错处理
- 关于在linux下清屏的几种技巧
- Complete C# Unity Game Developer 2D
- Revit:概念建模环境技能学习 Revit: Conceptual Modeling Environment
- Python的闭包和装饰器
- [Linux] 010 权限管理命令 chmod
- CentOS Linux解决 Device eth0 does not seem to be present
- TC配置文件WCMD.INI详解,只能在ini重修改的配置
- OpenCV 【二十】给图像添加边界