Vue.js中异步函数获取的变量无法正常渲染问题排查

两个警告是同一个语法错误连锁触发的：

• Vue 组件规范要求data()选项必须是返回响应式状态对象的函数，你的代码里data()没有写return语句，直接在函数体内写sum:"hello"属于无效语法，函数执行后默认返回undefined，完全不符合Vue对data选项的要求，因此触发data() should return an object警告。
• 由于data()没有正确返回状态对象，组件实例上根本不存在响应式的sum属性，模板渲染时读取{{sum}}就会触发Property "sum" was accessed during render but is not defined on instance警告。你写的getWiki方法里虽然能通过this.sum = xxx给实例临时挂载属性，但这个属性不是响应式的，即使console能打印出获取到的维基百科内容，页面也不会自动更新渲染。

修正data()的写法，在函数内部返回包裹所有响应式属性的对象即可，修正后的完整代码如下：

<script>
const wiki = require('wikipedia');
export default {
    data() {
        // 必须通过return返回状态对象
        return {
            sum: "hello"
        }
    },
    methods: {
        async getWiki() {
            try {
                const page = await wiki.page('Batman');
                console.log(page);
                const summary = await page.summary();
                console.log(summary.extract);
                this.sum = summary.extract
            } catch (error) {
                console.log(error);
            }
        }
    }
}
</script>

<template>
    <span>{{sum}}</span>
    <button @click="getWiki">Get Wiki</button>
</template>

补充说明：如果你使用的是Vite构建的Vue3项目，require写法可能触发ESM兼容报错，把导入语句改成import wiki from 'wikipedia'即可正常使用。

内容的提问来源于stack exchange，提问作者Deera Wijesundara