Vue使用Element-ui按需引入的致命陷阱与正确做法！

前言

Vue 框架结合 Element-ui 库已成为许多公司的选择，但最近，在使用 Element-ui 的按需导入方式（vue add element）中，重新渲染入口组件 app.vue 时，我们发现了一个令人头疼的错误。

问题一：按需引入 Element-ui 导致 app.vue 重新渲染

错误示例

app.vue
<template>
  <div id="app">
    <el-button type="primary">按钮</el-button>
  </div>
</template>
<script>
import { ElButton } from 'element-ui'

export default {
  name: 'App',
  components: { ElButton }
}
</script>

当您像上面这样，使用 vue add element 安装 Element-ui 并按需引入组件，然后在 app.vue 中使用它，可能会导致一个问题：每当您使用 npm run dev 或 npm run build 重新运行或构建项目时，app.vue 将会重新渲染。

这种重复渲染会极大地影响项目开发效率，尤其是在项目需要频繁进行更改和调试的时候。

错误原因

造成这一问题的原因在于 Element-ui 按需引入的方式本身。当您通过 vue add element 安装 Element-ui 并选择按需引入组件时，它实际上将 Element-ui 作为一个独立的 npm 包安装在您的项目中，并使用Webpack进行按需加载。

这意味着，当您在项目中使用 Element-ui 组件时，Webpack 将会根据需要动态地从 Element-ui 的 npm 包中加载所需的组件并将其注入到您的项目中。

由于这种加载方式的特殊性，每次您对项目进行重新运行或构建时，Webpack 都会重新加载并注入 Element-ui 的组件，从而导致 app.vue 组件被重新渲染。

解决方案

为了避免这个问题，我们推荐您使用 Element-ui 的官方提供的全局引入方式，而不是按需引入方式。

具体做法

1. 在项目中安装 Element-ui：

npm install element-ui

2. 在项目的 main.js 或入口文件中引入 Element-ui：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 在 app.vue 中直接使用 Element-ui 组件，而无需使用 components 对象进行注册：

<template>
  <div id="app">
    <el-button type="primary">按钮</el-button>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

4. 现在，当您重新运行或构建项目时，app.vue 将不再被重新渲染，这将大大提高项目开发效率。

结语

Element-ui 是一个强大的 UI 库，但如果使用不当，它可能会给您的项目带来一些问题。通过了解上述问题及其对应的解决方案，您可以避免在项目开发中遇到类似的问题，并提高项目开发效率。