从 vue 导入 {ref} 时出错？

Question

我是 vue js 的新手，通过 vue-mastery 教程学习，我通过查看教程编写了代码 我的代码是

<template>
<div>Capacity: {{ capacity }}</div>
</template>

<script type="module">
import { ref } from "vue";
export default{
setup(){
const capacity = ref(3);
return { capacity };
}
};
</script>

当我运行此代码时，我在终端中收到错误是 “在‘vue’中找不到导出‘ref’ 在网络浏览器中错误是 vue.runtime.esm.js?2b0e:619 [Vue warn]：属性或方法“capacity”未在实例上定义，但在渲染期间引用。通过初始化该属性，确保该属性在数据选项中或对于基于类的组件是反应性的。请参阅：https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

发现于

---> 在 src/App.vue

我的要求是在浏览器中打印容量：3任何人请帮助我提前致谢！

Answer 1

您的代码正在使用 Composition API，当前版本的 Vue 不支持该 API（它将成为今年晚些时候发布的 Vue 3 的一部分）

目前，您可以下载 Composition API 插件，或者切换到 Options API，这是当前在 Vue 中支持的制作单文件组件的方式

Answer 2

Vue2 JS 不支持 {ref} 包。

有2种方法

1. 导入@vue/composition-api npm包，你可以像这样使用

    import { ref } from "@vue/composition-api"
    export default{
      setup() {
        const capacity = ref(3);
        return { capacity }
      }
   }
   

2. 可以用传统方法

   export default {
     data() {
       return {
         capacity: 3
       }
     }
   }