非SFC模式下Composition API更新reactive对象模板未响应问题

问题根因 #

你同时加载了两份独立的Vue构建实例，两者的响应式系统完全隔离，导致创建的响应式对象无法被应用实例识别，自然无法触发视图更新。

具体错误点 #

• index.html通过script标签引入了UMD格式的Vue 3.2.23，挂载了全局Vue对象，你通过这个全局对象的createApp方法创建了应用实例
• index.js中又单独导入了ESM版本Vue的reactive方法，这个方法属于另一个完全独立的Vue实例，用它创建的响应式对象不会被全局Vue创建的应用追踪依赖，更新后无法触发模板重渲染

解决方案（二选一即可） #

方案1：全量使用ESM版本的Vue #

删除index.html中引入UMD版本Vue的script标签，将index.js修改为如下内容：

//index.js
import { createApp, reactive } from "https://cdn.jsdelivr.net/npm/vue@3.2.23/dist/vue.esm-browser.prod.js";

createApp(
{
    template: `<div>{{ model.firstName }} <p><button @click="buttonClicked">click me</button></p></div>`,
    setup() {
        let model = reactive({ firstName: "test" });

        let buttonClicked = () => {
            model.firstName = "something new";
            console.log(model);
        };

        return { model, buttonClicked };
    }
}
).mount("#app");

方案2：直接使用全局Vue对象上的API #

删除index.js中的import语句，直接调用全局Vue上挂载的reactive方法：

//index.js
Vue.createApp(
{
    template: `<div>{{ model.firstName }} <p><button @click="buttonClicked">click me</button></p></div>`,
    setup() {
        let model = Vue.reactive({ firstName: "test" });

        let buttonClicked = () => {
            model.firstName = "something new";
            console.log(model);
        };

        return { model, buttonClicked };
    }
}
).mount("#app");

内容的提问来源于stack exchange，提问作者Ching Kuo