Vue-$el属性

原博客地址：深入 Vue.js 的心脏：全面剖析 $el 属性_vue $el-CSDN博客

目录

1 $el是什么

1.1 $el本质

1.2 访问$el时机

1.3 $el与模板的关系

2 $el使用场景

2.1 集成第三方库

2.2 操作DOM元素样式

2.3 处理焦点和事件

2.4 实现自定义指令

3 $el的注意事项

3.1 不要过度依赖$el

3.2 注意生命周期

3.3 避免直接操作子组件的$el

4 与其他API协作

4.1 与$refs配合

4.2 与$nextTick配合

5 总结

---

1 $el是什么

$el：代表Vue实例所管理的根DOM元素。

每个Vue实例创建时，都会绑定一部分DOM元素，$el属性是这部分DOM元素的入口。

1.1 $el本质

$el属性的值是一个DOM元素对象。

• 获取元素属性：this.$el.id
• 修改元素样式：this.$el.style.color='red'
• 添加事件监听：this.$el.addEventListener('click', this.handleClick)

1.2 访问$el时机

$el属性在Vue实例完成挂载，将模板编译成真实DOM元素并插入到页面中后，才能访问$el。

Vue实例创建完成时也不能访问$el属性。

const vm = new Vue({template: '<div>Hello World</div>'
});// 错误示范：此时 vm.$el 还未定义
console.log(vm.$el); // undefined// 正确姿势：在 mounted 生命周期钩子中访问
vm.$mount('#app');vm.$nextTick(() => {console.log(vm.$el); // <div>Hello World</div>
});

这里可以看出，vm就是Vue实例。

1.3 $el与模板的关系

Vue实例的模板最终会被编译成一个DOM树，$el指向这棵树的根节点。

如果模板里没有定义根节点，Vue会自动创建一个<div>元素作为根节点。

<!-- 模板 -->
<template><p>这是一段文本</p><button>点击</button>
</template><!-- 渲染后的 DOM 结构 -->
<div><p>这是一段文本</p><button>点击</button>
</div>

2 $el使用场景

2.1 集成第三方库

第三方JS库都需要操作DOM元素，使用$el可以将Vue组件与这些库结合起来。

例如在Vue组件里使用Chart.js绘制图表，将图表渲染到组件的$el上。

import Chart from 'chart.js';export default {mounted() {this.chart = new Chart(this.$el, {// 图表配置});}
};

2.2 操作DOM元素样式

动态调整元素样式。

export default {mounted() {// 获取元素宽度const width = this.$el.offsetWidth;// 设置元素高度this.$el.style.height = `${width}px`;}
};

2.3 处理焦点和事件

手动控制DOM元素的焦点，如表单验证、自定义输入框等。

export default {mounted() {// 聚焦到输入框this.$el.querySelector('input').focus();},methods: {handleClickOutside(event) {// 判断点击事件是否发生在组件外部if (!this.$el.contains(event.target)) {// 执行相应操作}}}
};

2.4 实现自定义指令

Vue.js自定义指令可以用于扩展HTML元素功能，其中用到了$el属性。

Vue.directive('focus', {inserted: function (el) {el.focus();}
});

3 $el的注意事项

3.1 不要过度依赖$el

过度依赖$el会破坏Vue.js数据驱动的优势。

多数情况下，尽量使用Vue.js提供的数据绑定、计算属性、事件处理等机制操作DOM元素，将$el作为最后手段。

3.2 注意生命周期

$el只有在Vue实例完成挂载后才能访问，因此要在mounted及之后的生命周期函数里使用$el.

3.3 避免直接操作子组件的$el

Vue.js中，每个组件都有自己的$el属性，代表组件的根DOM元素。

尽量避免直接操作子组件的$el，而是通过props、事件等机制与子组件进行通信。

4 与其他API协作

$el可与Vue.js其他API协作。

4.1 与$refs配合

$refs属性可以获取到组件中使用ref属性标记的DOM元素或子组件实例，而$el可以获取到组件的根DOM元素。两者可以结合使用。

<template><div ref="container"><p>这是一段文本</p></div>
</template><script>
export default {mounted() {// 获取容器元素的高度const height = this.$refs.container.offsetHeight;// 设置容器元素的背景颜色this.$el.style.backgroundColor = 'lightblue';}
};
</script>

4.2 与$nextTick配合

某些情况需要在DOM更新后执行一些操作，例如获取元素尺寸、位置等。

$nextTick方法可以将回调函数延迟到下次DOM更新循环后执行，确保操作的是最新DOM元素。

export default {mounted() {this.$nextTick(() => {// 获取元素高度const height = this.$el.offsetHeight;// 执行其他操作});}
};

补充：API-Vue.nextTick的解释API — Vue.js

5 总结

$el提供了一种在Vue中直接操作DOM元素的途径。

但实际开发中，要谨慎使用$el属性，避免过度依赖$el破坏Vue.js数据驱动的优势。

充分利用$el属性的强大功能，结合Vue.js其他API，构建更加灵活高效的Vue.js应用程序。