這篇文章將記錄升級 Vue2 到 Vue3 時的一些語法差異和套件更新。

Vue3 與 Vue2 的語法差異#

捨棄 this.$set#

直接進行操作即可

this.$set(element, 'isOpen', 1);
// 改用
element.isOpen = 1;

捨棄 $vnode#

使用 key 或 index 替代 $vnode

在 props 中應該還需要加入 product_item_index: {type: Number, default: 0}。

<div class="btn btn-danger btn-block" @click="$parent.deleteItem($vnode.key)">刪除</div>
// 改用
<div class="btn btn-danger btn-block" @click="$parent.deleteItem(product_item_index)">刪除</div>

捨棄 this.$delete#

this.$delete(items, item_index);
// 改用
items.splice(item_index, 1);

使用 v-model 替代 .sync#

vue3中使用sync实现双向数据绑定 - 掘金

:target.sync="form.original_group_id"
// 改用
v-model:target="form.original_group_id"

棄用 ::v-deep，改用()#

.a ::v-deep .b {
  /* ... */
}
// 改用
.a :deep(.b) {
  /* ... */
}

參考資料：

• Vue SFC CSS Features - vuejs.org
• ::v-deep在vue3中的替代方案是什么？ - segmentfault.com

Vue3 中單獨包含 templete 的 HTML 無法顯示#

這樣是無法顯示的：

<template>
  <div>123</div>
</template>

要使用 template 必須要有條件判斷才能顯示：

<template v-if="true">
  <div>123</div>
</template>

套件更新#

v-clipboard 改用 vue-clipboard3#

draggable#

下面的 item 要改用 #item="{ element, index }" 的寫法，element, index 不能更改名稱。

<draggable v-model="product.carousels"
          item-key="carousels"
          class="dragArea"
          :group="{ name:'img-area', pull:'clone', put:false }">
  <template #item="{ element, index }">
    <div class="item" :key="`element-${index}`">
    </div>
  </template>
</draggable>

VueMultiselect#

文件

@input="onChanged"
// 改用
@select="onChanged"

參考資料：

Vue 3 迁移指南

Vue 2.x 至 3.0 快速升級指南