vue中的挂载是什么意思?

vue中的挂载是什么意思?

这个问题乍一看,不少人认为mounted这个方法写vue的基本每天都在用,所以觉得应该很好理解。但真想说出来挂载是怎么回事时,又觉得欲言又止,无从下手。

题主提出的「我理解就是将页面渲染到指定位置的过程就是挂载,不知道对不对?」,这个答案是对的!只是这个回答过于简略和宽泛,没有涉及到精髓,没有涉及到Vue的精髓!所以这个答案更多是挂载这个概念的超集!

为什么这样说呢?很简单,我直接通过一个document.createElement创建一个元素,然后appendChild放到body下面去,这不就是将页面渲染到指定位置吗?你说这叫做挂载吗?非也!

那么在vue这个语义范畴中挂载是怎么回事呢?

这里就不得不提一个非常重要的概念,虚拟DOM!!!

大家都是写vue的,我们可能不知道虚拟DOM是怎么实现的,但是,应该不至于连虚拟DOM这个名字都没有听过吧?

虚拟DOM就是vue的基石之一。要说明白vue中的挂载是什么,我们这里不需要深入了解虚拟DOM的实现细节,也不需要知道render函数和patch方法是怎么实现最小化diff之类的,所以大家不需要担心。

这里我们只需要知道一点,在将我们写的组件.vue后缀的代码编译然后渲染到浏览器页面即真实DOM之前,这个组件是先转换成一个javascript对象,即虚拟DOM的!

而这个虚拟DOM要在页面上面显示,那么必须转换成真实的DOM,但转换成真实的DOM后,这些真实DOM也依然只是我们内存中的字节而已,我们应该将其安置到已经存在于页面上的某个位置,比如放在body下面某个id叫做app的那个div下面,这,就是挂载!

最简单的一个例子就是我们main.js中选项中填写的el,指定的就是一个挂载点,其目的就是在模板对应的虚拟DOM转换成真实DOM之后,有个挂靠的地点!