vue $el 什么时候渲染

Vue.js中，当创建Vue实例时，Vue会将传入的模板编译成渲染函数，然后通过调用渲染函数生成虚拟DOM树。接下来，Vue会将虚拟DOM树转换成真实的DOM树，并将其插入到指定的目标元素上。

在这个过程中，Vue实例的$el属性会在何时被渲染呢？

首先，当Vue实例只是一个组件，并且该组件被父组件使用时，父组件会在适当的时机渲染子组件，并将子组件的$el属性插入到父组件中。这个过程是由Vue的渲染机制自动完成的，不需要手动调用$el属性。

其次，当Vue实例作为顶层实例时，Vue会在调用Vue实例的$mount方法时，将$el属性与目标元素进行绑定。$mount方法会将虚拟DOM树渲染成真实的DOM树，并将其插入到$el指定的目标元素上。

总结起来，Vue实例的$el属性在创建实例时不会立即被渲染。而是在适当的时机，根据组件的父子关系或调用$mount方法时，才会将虚拟DOM树渲染成真实的DOM树并将其插入到$el指定的目标元素上。

在Vue中，当创建Vue实例时，Vue会将模板编译成一个渲染函数。当调用实例的$mount()方法时，会将渲染函数执行，生成虚拟DOM，并将其挂载到指定的元素上。

$el属性是Vue实例的一个指向真实DOM元素的引用。当调用$mount()方法进行手动挂载时，$el会在挂载完成后指向挂载的元素。如果未手动挂载，Vue会自动将其挂载到body或指定的元素上。

下面是Vue中$el渲染的时机：

1. 手动挂载：当调用$mount()方法手动挂载时，$el属性会在挂载完成后指向挂载的元素。

2. 自动挂载：如果没有手动调用$mount()方法进行挂载，Vue会自动调用$mount()方法，在此过程中，会将模板编译成渲染函数，并将虚拟DOM挂载到真实DOM上。此时，$el会指向挂载的元素，如果没有指定挂载的元素，$el会指向body元素。

3. 动态挂载：在某些情况下，可能需要动态地进行挂载。可以先创建Vue实例，然后通过$mount()方法手动挂载到指定的元素上。

4. 更新挂载：当数据发生变化时，Vue会自动重新渲染组件，并更新挂载到$el属性所指向的元素上。

5. 销毁实例：当调用Vue实例的$destroy()方法销毁实例时，$el属性会变为null。

总结来说，$el属性在手动挂载、自动挂载、动态挂载、更新挂载和销毁实例时会有不同的渲染时机。

Vue的$el属性是指向当前Vue实例所管理的DOM元素。它在Vue实例创建并挂载到DOM后，会被自动赋值。也就是说，$el会在Vue实例完成渲染并真正挂载到DOM树之后才会被赋值。

具体来说，$el的赋值时机如下：

1. 在组件生命周期钩子函数mounted执行之后，$el会被赋值为组件实例所管理的DOM元素。mounted钩子函数是在Vue实例挂载完成后调用的，此时Vue实例已经完成了模板编译和数据渲染，所以$el可以被赋值为实际的DOM元素。

2. 在Vue实例挂载前，通过new Vue(options)创建实例的过程中，$el是不存在的。只有在Vue实例创建完成、通过$mount方法手动挂载到DOM树之后，$el属性才会被赋值。

3. 如果在Vue实例创建之前指定了el选项，那么实例将立即进入编译阶段，$el属性将在编译完成后立即生成。这种情况下，Vue实例的挂载过程会比较快，可以避免先创建实例再手动挂载的步骤。

需要注意的是，如果在Vue实例创建之后再通过$mount方法手动挂载，那么$el属性会被重新赋值为挂载的DOM元素。如果未指定el选项或手动挂载期间发生错误，$el可能为undefined或空值。

需要强调的是，通过改变$el的值并不会改变DOM结构，因为Vue实例只能管理一个DOM元素。