javascript Computed在Vue 3脚本设置中如何工作？

zbsbpyhn 于 2022-11-20 发布在 Java

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

我正在尝试让computed在<script setup>中工作：

<template>
  <div>
    <p>{{ whatever.get() }}</p>
  </div>
</template>

<script setup>
import {computed} from "vue";

const whatever = computed({
    get() {
        console.log('check')
        return 'check?';
    }
})
</script>

console.log()通过，但return语句似乎抛出了一个错误：

check
Vue warn]: Unhandled error during execution of render function 
  at <Cms>
Uncaught TypeError: $setup.whatever.get is not a function
at Proxy.render (app.js?id=d9e007128724c77a8d69ec76c6c081a0:39550:266)
at renderComponentRoot (app.js?id=d9e007128724c77a8d69ec76c6c081a0:25902:44)
at ReactiveEffect.componentUpdateFn [as fn] (app.js?id=d9e007128724c77a8d69ec76c6c081a0:30019:57)
at ReactiveEffect.run (app.js?id=d9e007128724c77a8d69ec76c6c081a0:23830:29)
at setupRenderEffect (app.js?id=d9e007128724c77a8d69ec76c6c081a0:30145:9)
at mountComponent (app.js?id=d9e007128724c77a8d69ec76c6c081a0:29928:9)
at processComponent (app.js?id=d9e007128724c77a8d69ec76c6c081a0:29886:17)
at patch (app.js?id=d9e007128724c77a8d69ec76c6c081a0:29487:21)
at render (app.js?id=d9e007128724c77a8d69ec76c6c081a0:30630:13)
at mount (app.js?id=d9e007128724c77a8d69ec76c6c081a0:28882:25)

我做错了什么？

JavaScript

来源：https://stackoverflow.com/questions/71458861/how-does-computed-work-in-vue-3-script-setup

2条答案

按热度按时间

gajydyqb1#

在 * * <template> * * 中：
仅 Getter ：

{{ myVal }}
<p v-text="myVal" />

获取器和设置器：

<input v-model="myVal">
- 重要提示： * * 请勿 * * * * * * * 使用 myVal.get() 或 myVal.set(value) ! 使用：
正在获取： myVal
设置（分配）：myVal = value

在 * * <script setup> * * 中：
仅 Getter ：

const someReactiveRef = ref(null)
const myVal = computed(() => someReactiveRef.value)

中的每一个
获取程序和设置程序：

const someReactiveRef = ref(null)

const myVal = computed({
  get() {
    return someReactiveRef.value
  },
  set(val) {
    someReactiveRef.value = val
  }
})
// myVal can now be used in `v-model`

格式
当 reactive ref 来自一个 reactive() 对象的属性时，你不需要在 setter 或 getter 中使用 .value 。例如：

const state = reactive({
  someProp: null
})

const myVal = computed({
  get() {
    return store.someProp
  },
  set(val) {
    store.someProp = val
  }
})

格式
请记住，您始终可以在 reactive 中使用 computed 。例如：
第一个

- 重要说明： * *
当将非 React 性参考传递给 computed 时， Vue 将警告您（不需要计算的 Package 器）。
当向其传递包含循环相关性（例如：组件示例） Vue 将再次警告您并建议使用 shallowRef 或 markRaw 。

赞(0）回复(0）举报 2022-11-20

j5fpnvbx2#

计算属性以字段的形式出现。无论你是传入函数（如computed(() => /*...*/)）还是用get()方法（如果你没有提供set()方法，这里是等效的）传入对象，都是如此。
模板应该只使用计算属性的名称，这里是whatever。

<template>
  <div>
    <p>{{ whatever }}</p>
  </div>
</template>

赞(0）回复(0）举报 2022-11-20

我来回答

javascript Computed在Vue 3脚本设置中如何工作？

2条答案

相关问题

热门标签

最新问答