296 字
1 分鐘
Vue2 升級到 Vue3 - 語法差異與套件更新

這篇文章將記錄升級 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
:target.sync="form.original_group_id"// 改用v-model:target="form.original_group_id"
棄用 ::v-deep,改用 ()
.a ::v-deep .b { /* ... */}// 改用.a :deep(.b) { /* ... */}
參考資料:
Vue3 中單獨包含 templete 的 HTML 無法顯示
這樣是無法顯示的:
<template> <div>123</div></template>
要使用 template 必須要有條件判斷才能顯示:
<template v-if="true"> <div>123</div></template>
套件更新
v-clipboard
改用 vue-clipboard3
Waiting for api.github.com...
draggable
Waiting for api.github.com...
下面的 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
Waiting for api.github.com...
@input="onChanged"// 改用@select="onChanged"
參考資料:
Vue2 升級到 Vue3 - 語法差異與套件更新
https://laplusda.com/posts/vue2-to-vue3-case-1/