Vue3使用vue-fontawesome时，渲染问题

在写一个目录树的时候，希望在点击文件图标后，icon会从关闭的样子变成打开的

关闭

打开

哼哧哼哧从网上一顿百度，变成了大概如下面所示

<i :class="icon"></i>

const icon = ref("fas fa-folder")
function click() {
    console.log("click")
    icon.value = "fas fa-folder-open"
}

用vue-fontawesome做字体图标，然后利用vue的class动态去渲染。但是发现页面一直显示的关闭icon。但是控制台显示"click"表示确实已经执行了click函数。

一通乱找，最终在vue github的issue找到了答案:vue-core

答案就是<i>标签会扰乱vue的更新渲染的操作。使用font-awesome-icon替代。(font-awesome-icon标签我是在fontawesome看到的，早点看到都不用搜这么久了)

改完之后大概类似下图

<font-awesome-icon :class="icon" />

const icon = ref("fas fa-folder")
function click() {
    console.log("click")
    icon.value = "fas fa-folder-open"
}