Vue配置项之el

el

首先说明一下，本人是前端小学生级别的菜鸡，吐槽的话请口下留情，在评论区指出错误或者补充不足，我会很喜欢，互喷不会进步，相互指点才会。。。。谢谢大家啦

📌Vue.js 中的 el（Element）属性是 Vue 实例的一个配置选项。它用于指定 Vue 应用程序挂载到哪个DOM元素上。当一个Vue实例被创建时，el 属性告诉Vue应该将生成的视图（即由模板或render函数渲染出的DOM内容）附加到哪个实际存在的HTML元素内。强烈建议不要挂载body

示例

在全局 Vue 实例（如通常在应用入口文件中定义的应用根组件）中，el 可以是一个 CSS 选择器字符串或者直接是一个 HTMLElement 对象。在实例挂载之后，元素可以用 vm.$el 访问。
在组件定义中，由于组件通常是作为整体嵌入到其他组件中的，所以组件的 el 选项只能是一个返回 HTMLElement 的函数，并且仅在 Vue 2.x 版本的自定义元素和某些特定高级场景下使用；对于常规的单文件组件（.vue 文件），无需也并不允许设置 el 属性。
限制： 只在用 new 创建实例时生效。

new Vue时候配置el属性。
```
// 页面 HTML 部分
<div id="app">{{ message }}</div>// 全局 Vue 实例
new Vue({el: '#app', // 这里 'app' 是页面中某个元素的id //el:'#root'data: {message: 'Hello, world!'}
})
```
在上面的例子中，Vue 实例通过 el: '#app' 指定了要挂载的 DOM 元素，即具有 id="app" 的 <div> 元素。当创建 Vue 实例时，Vue 将会在这个元素上建立实例与 DOM 的关联，并开始进行模板的编译和挂载操作。
先创建**Vue实例，随后再通过vm.$mount('#root')指定el**的值。
```
const vm = new Vue({
data:{name:'赵新坤'
}
})
console.log(v)
//第二种写法，必须有变量接收实例才可以用，更灵活一点
//可以用定时器包裹等。 
vm.$mount('#root') 
```
在整个过程中，Vue 通过虚拟 DOM 和响应式数据系统，实现了高效的页面渲染。Vue 会在数据发生变化时，重新计算虚拟 DOM，然后通过差异比对算法将变化的部分更新到实际的 DOM 上，从而实现数据驱动的视图更新。