从 vue 导入 {ref} 时出错？答案

【问题标题】：Getting error while importing {ref} from vue?从 vue 导入 {ref} 时出错？
【发布时间】：2020-06-07 17:22:11
【问题描述】：

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

<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 警告]：属性或方法“容量”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

发现于

---> 在 src/App.vue

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

【问题讨论】：

setup() 是 Composition API 的一部分，它是仅在 Vue 3.0+ 或 vuejs/composition-api 插件中有效的结构。您正在使用其中之一吗？
是的 @AugustoMoura 我的 vue --version 是 @vue/cli 4.2.2
@AugustoMoura 当我执行这个命令时 npm list vue 我得到了这个 vue@2.6.11 你能帮帮我吗？？
vue-cli 不是 vue 它是一个 cli 工具，因此使用 v-4.2.2 reallt 只会影响您引导项目的方式。
是的，我的 vue 是第 2 版

标签： javascript vue.js vuejs2

【解决方案1】：

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

目前，您可以download the Composition API plugin，也可以切换到Options API，这是目前在Vue中支持制作单文件组件的方式

【讨论】：

是的，我下载使用它，终端中的错误消失了，但网页中出现此错误 vue.runtime.esm.js?2b0e:619 [Vue 警告]：属性或方法“容量”未定义实例，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。见：vuejs.org/v2/guide/…。在 ---> 在 src/App.vue 中找到
请帮助我@Jason
您是从vue 还是@vue/composition-api 导入ref？它对我有用@stack
options API 可能是学习 Vue 的更好起点，因为它更简单，即使在 Vue 3 及更高版本中也能继续工作。

【解决方案2】：

当前的 Vue Js 不支持 {ref} 包。

有两种方法

导入@vue/composition-api npm包就可以这样使用了

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

你可以使用传统的方法

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

【讨论】：