欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue $mount 和 el的区别说明

程序员文章站 2022-06-16 18:52:07
两者在使用效果上没有任何区别,都是为了将实例化后的vue挂载到指定的dom元素中。如果在实例化vue的时候指定el,则该vue将会渲染在此el对应的dom中,反之,若没有指定el,则vue实例会处于一...

两者在使用效果上没有任何区别,都是为了将实例化后的vue挂载到指定的dom元素中。

如果在实例化vue的时候指定el,则该vue将会渲染在此el对应的dom中,反之,若没有指定el,则vue实例会处于一种“未挂载”的状态,此时可以通过$mount来手动执行挂载。

注:如果$mount没有提供参数,模板将被渲染为文档之外的的元素,并且你必须使用原生dom api把它插入文档中。

例如:

补充知识:vue 实例挂载方法($mount)的实现

在 vue 的 _init 方法中已经回调了beforecreate 和created这两个生命周期钩子,在此之后就进行了实例的挂载

在挂载函数中,将要进行 beforemount 和 mounted 的回调。

在不同的平台下对于 $mount 函数的实现是有差异的,下面考虑 web 平台的 runtime-with-compiler 版本 , 其在web平台下的定义如下(src/platforms/web/runtime/index.js)

在$mount函数的参数中,第一个为我们属性的el, 第二个参数为服务端渲染有关,在patch函数中用到,这里可以忽略。

但是在调用这个$mount函数的时候,首先调用的是不同版本下的$mount函数,然后在该函数中再调用相应平台的$mount函数,如下在 runtime-with-compiler 版本中$mount函数如下(src/platforms/web/entry-runtime-with-compiler.js)

可知该函数主要干了三件事

1、由于挂载之后会替换被挂载的对象,所以限制不能挂载到 body 和 html 上

2、如果当前vue实例没有 render() 函数(写template等),则通过编译等手段,将render函数添加到 options 上

3、调用在代码开头我们先缓存的$mount方法,该方法就是web平台下的方法。

在web平台下的$mount方法里面主要就是调用了mountcomponent() 方法,接下来我们的核心就是该方法了

在'core/instance/lifecycle.js 文件中我们找到了该方法的定义,删掉一些非重点代码后如下

上面的代码中主要干了如下三件事

1、回调 beforemount

2、生成 updatecomponent 方法,该方法将 vnode 渲染为真实的dom

3、new 一个 watcher ,并在该 watcher在调用updatecomponent方法

4、回调 mounted

对于 updatecomponent方法较为复杂,其内部主要调用_update()将 vnode渲染为浏览器上显示的真实dom

我们考虑如下两个问题

1. watcher 中如何调用 updatecomponent方法

watcher 函数的构造函数接受如下的参数

在上面的代码中,updatecomponent()方法作为第二个参数传递过来,即构造函数中的exporfn

往下看会看到

也就是说updatecomponent()方法被设置为了getter()方法

看到构造函数的最后

其中 lazy 属性的值在前面被设置为了 false

this.lazy = !!options.lazy; // 我们 options 中没有 lazy 属性

这也就是说,咋i构造函数的末尾会调用this.get(),而在this.get()中

我们看到调用了getter()方法,也就是调用了updatecomponent()方法。

2. 为什么根实例的$vnode为空

在initrender()函数中有如下代码

const parentvnode = vm.$vnode = options._parentvnode;

也就是说 当前实际的 $vnode 值为其父节点的vnode值

而根实例没有父节点,故其$vnode值就为空了,所以会执行

那么子节点的mounted回调是在那里执行的呢?

在 path()(core/vdom/patch.js) 函数中有如下代码

在循环queue的时候,调用了 insert()方法,该方法为 vnodehooks,其在componentvnodehooks(core/vdom/create-component.js)中声明,代码如下

由于 path() 方法在 _update()函数中调用,这部不再重点说明。

下节我们将来说说render() 和 _update() 方法的实现

以上这篇vue $mount 和 el的区别说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

相关标签: vue $mount el