Vue2 + Element‑UI 与 Vue3 + Element‑Plus 简单对比案例

实现同一个功能：计数器 + 输入框绑定 + 按钮弹窗提示，同样业务逻辑，直观对比语法差异。 Vue2 使用 Options API；Vue3 使用 <script setup>（现在主流写法），可以看到编码、组件逻辑组织、导入方式的差距。

案例 1：Vue2 + Element‑UI（单文件组件）

依赖版本：vue@2.7，element‑ui

<!-- Vue2 Demo.vue -->
<template>
  <div class="demo">
    <!-- Vue2模板必须只有一个根标签 -->
    <el-card>
      <h3>Vue2 + Element‑UI</h3>
      <el-input v-model="inputVal" placeholder="请输入内容"></el-input>
      <p>计数器：{{ count }}</p>
      <el-button type="primary" @click="handleAdd">计数器+1</el-button>
      <el-button type="success" @click="showMsg">弹出提示</el-button>
    </el-card>
  </div>
</template>

<script>
// Vue2：选项式API Options API
export default {
  name: "Demo",
  data() {
    // 所有响应式数据写在data函数中
    return {
      count: 0,
      inputVal: ""
    };
  },
  methods: {
    // 所有方法放在methods
    handleAdd() {
      this.count++;
    },
    showMsg() {
      this.$message.success(`输入框内容：${this.inputVal}`);
    }
  }
};
</script>

<style scoped>
.demo {
  width: 400px;
  margin: 20px;
}
</style>

main.js Vue2 入口：

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

Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})

Vue2 特点观察

1. 模板只能一个根 div，多标签直接报错
2. 数据放data()，方法放methods，计算属性放computed，逻辑被拆分到不同选项
3. 全部靠this访问变量、调用组件实例方法 this.$message
4. 全局插件通过 Vue.use()，new Vue ({el:'#app'}) 挂载

案例 2：Vue3 + Element‑Plus（<script setup>）

依赖版本：vue@3，element‑plus，Vite 项目

<!-- Vue3 Demo.vue -->
<template>
  <!-- Vue3支持多根节点，不需要外层div包裹 -->
  <el-card class="demo">
    <h3>Vue3 + Element‑Plus</h3>
    <el-input v-model="inputVal" placeholder="请输入内容"></el-input>
    <p>计数器：{{ count }}</p>
    <el-button type="primary" @click="handleAdd">计数器+1</el-button>
    <el-button type="success" @click="showMsg">弹出提示</el-button>
  </el-card>
</template>

<script setup>
// 组合式API script setup：变量、函数直接写，直接给模板使用
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// ref定义响应式基础类型，脚本内需要 .value 修改
const count = ref(0)
const inputVal = ref('')

const handleAdd = () => {
  count.value++
}

const showMsg = () => {
  ElMessage.success(`输入框内容：${inputVal.value}`)
}
</script>

<style scoped>
.demo {
  width: 400px;
  margin: 20px;
}
</style>

main.js Vue3 入口：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

Vue3 特点观察

1. 模板允许多根节点（Fragment），不需要外层容器
2. <script setup>：数据、函数写在一起，逻辑聚合，不需要export default、不需要this
3. 响应式需要手动导入ref/reactive；脚本修改要.value，模板使用不需要.value
4. 组件库方法不再依赖实例this.$message，直接导入函数ElMessage调用
5. 使用createApp创建实例，.mount('#app')挂载

两者核心差距总结（对照案例）

表格

补充：Vue3 也可以写 Vue2 那种 Options API，但是新项目几乎都用 script‑setup 组合式写法。