Vue2〈脚本设置>：为什么简单的例子会抛出错误？

new9mtju 于 2023-03-13 发布在 Vue.js

关注(0)|答案(2)|浏览(100)

我曾经使用基于类的样式定义Vue2组件，并希望将我的代码库迁移到组合API。正如我从文档中了解到的，组合API和编写单个文件组件的script setup方法在Vue 2.7中受支持。但即使是简单的示例也会导致错误。
package.json

"vue": "2.7.14",

test.vue

<script setup>
  import {ref} from 'vue'

  const count = ref(0);
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

它编译得很好，但是在浏览器控制台中抛出一个错误：

App.js:144 Property or method "count" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. 

found in

---> <Test> at test.vue

知道为什么会失败吗？

vue.js

来源：https://stackoverflow.com/questions/75694138/vue2-script-setup-why-does-simple-example-throw-error

2条答案

按热度按时间

kyks70gy1#

作为解决方法，您可以使用setup()函数替换<script setup>，但仍迁移到合成API

<script>
import { ref } from "vue";

export default {
   setup() {
    const count = ref(0);
    return { count }
   }
};
</script>

<template>
  <button @click="count++">Counter: {{ count }}</button>
</template>

我已经在Codesanbox中运行了
根据Vue文档Migration to Vue 2.7，<script setup>应与Vue 2.7配合使用。
但我也很难让它与Codesanbox一起工作
Composition API确实可以工作，您可以在控制台输出{value: 0}中看到它
但是模板编译出了问题。