在Vue的开发中，经常会遇到el的概念。el即element，它是Vue实例所管理的DOM元素。Vue实例通过el属性来指定自己所控制的DOM元素，Vue会将该DOM元素及其内部的所有节点作为Vue实例的模板。
new Vue({
el: '#app'
})
这里的el可以是一个CSS选择器字符串，或者是一个实际的DOM元素。如果是一个CSS选择器字符串，Vue会在DOM元素中查找对应的元素，如果是一个DOM元素，则Vue会直接使用它作为模板。
new Vue({
el: document.getElementById('app')
})
当Vue实例被创建时，它会自动将el所指定的DOM元素作为根节点加入到文档中，并且开始对内部的模板进行编译。在实例化Vue时，Vue会遍历DOM元素，找到模板中的所有指令或数据绑定，然后将其转换为虚拟DOM，并建立与真实DOM的映射关系。之后，每次数据发生变化时，Vue会重新生成虚拟DOM，然后与旧虚拟DOM进行比较，找出需要更新的节点，并将其更新到真实DOM中。
换句话说，Vue的响应式系统是建立在el这一抽象层之上的。当我们对Vue实例的数据进行修改时，Vue会自动更新所关联的虚拟DOM，并更新与DOM的映射，最终更新真实DOM。
在Vue中，el属性是可选的。如果我们不指定el，则Vue不会将实例挂载到具体的DOM元素上，这时我们需要手动调用vm.$mount方法来手动挂载实例。
new Vue({
template: 'hello world'
}).$mount('#app')
在这个例子中，我们没有指定el属性，而是使用$mount方法手动挂载Vue实例到DOM元素上。
需要注意的是，如果我们使用vm.$mount来手动挂载Vue实例，那么我们需要保证在挂载之前，模板已经被编译成虚拟DOM，并且数据已经被正确地绑定到了模板中的所有指令和表达式中。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
