從 Vue 2 升級到 Vue 3 + Vite, v-model 語法修正

| 2026-06-182026-06-18

這次從 Vue 2 升級到 Vue 3 + Vite 的過程中，後台管理系統的按鈕集體罷工，點了完全沒反應，讓人一度懷疑是不是人生也卡住了。經過一番開箱檢查，終於抓到這幾個幕後黑手！

以下是這次的災情與拯救指南，幫大家把 Vue 2 舊語法順利轉換成現代化的 Vue 3 風格。

為什麼按鈕點了沒反應？三大全面罷工原因

1. 彈窗搞失蹤：Dialog 的雙向綁定變心了

在 Vue 2 的 Element UI 時代，控制彈窗顯示是用 v-model:visible="dialogVisible"。

但是在 Vue 3 的 Element Plus 裡，它已經悄悄改名叫 v-model="dialogVisible" 了！

因為語法對不上，雖然程式背後把狀態改成 true，但 Dialog 本尊根本收不到訊號，難怪怎麼點按鈕都像在點空氣。

2. 警告噴不停：el-row 的 flex 屬性退役

以前寫彈性佈局會加上 type="flex"，現在 Element Plus 預設就已經是 Flex 佈局了，這個屬性不但多餘還會狂噴警告，直接拿掉世界就清淨了。

3. 泡泡提示與確認視窗：找不到全域的 this

舊程式很喜歡用 this.$message 或 this.$confirm。雖然全域載入時可能還拿得到，但在現代化的 Vue 3 組合式 API（Composition API）世界裡，這種寫法不僅不夠直覺，還容易在搬家時鬧失蹤。

一圖看懂：Vue 2 與 Vue 3 修正對照表

我們把這次搬家的修改重點整理成表格，按圖索驥就不會迷路：

檢查項目	Vue 2 舊寫法	Vue 3 現代化修正
彈窗顯示	`v-model:visible="dialogVisible"`	`v-model="dialogVisible"`
訊息提示	`this.$message`	`ElMessage`（需從 `element-plus` 引入）
確認視窗	`this.$confirm`	`ElMessageBox.confirm`（需從 `element-plus` 引入）
網格佈局	`el-row type="flex"`	直接寫 `el-row` 即可（預設即為 flex）
程式風格	`export default { data(), methods: {} }`	擁抱 `<script setup>` 組合式 API

核心程式碼大改造

既然要改，就直接升級成最潮的 <script setup> 風格，程式碼看起來乾淨俐落！

舊版 Option API 風格（Vue 2）

JavaScript

export default {
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    handleDelete() {
      this.$confirm('確定要刪除嗎？').then(() => {
        this.$message.success('刪除成功');
      });
    }
  }
}

新版 Script Setup 風格（Vue 3）

JavaScript

import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const dialogVisible = ref(false);

const handleDelete = () => {
  ElMessageBox.confirm('確定要刪除嗎？', '提示', {
    type: 'warning'
  }).then(() => {
    ElMessage.success('刪除成功');
  }).catch(() => {
    // 取消刪除
  });
};

總結

程式搬家總會遇到幾顆絆腳石，這次的按鈕罷工事件，說穿了就是 Dialog 的雙向綁定語法變更 導致的慘劇。只要把 v-model:visible 改回 v-model，並順手將舊式的 this 改為直接引入 element-plus 的組件，按鈕們就會乖乖聽話，重回工作崗位囉！

Max的程式語言筆記