Computed如何在Vue3腳本設定中作業？-有解無憂

我正在努力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)

我究竟做錯了什么？

uj5u.com熱心網友回復：

僅吸氣劑：

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`

當反應 ref 來自reactive()物件的屬性時，您不需要.valuesetter 或 getter 中的。例子：

const store = reactive({
  someProp: null
})

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

重要筆記：

當傳遞一個對 a 的非回應式參考時computed，Vue 會警告你（計算的包裝器是不必要的）。
當傳遞一個包含回圈依賴（例如：組件實體）的 ref 時，Vue 會再次警告你并建議使用shallowRefor markRaw。

uj5u.com熱心網友回復：

計算屬性顯示為欄位。無論您是傳入函式（如 in computed(() => /*...*/)）還是帶有get()方法的物件（如果您不提供set()方法，這在此處等效），這都是正確的。

您的模板應該簡單地使用計算屬性的名稱，這里是whatever.

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

uj5u.com熱心網友回復：

試試這樣：

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

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

此外，如果您僅將其與get()它一起使用，則可以將其洗掉。像這樣：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/442946.html

標籤：Vue.js Vuejs3 vue-composition-api vue 脚本设置

上一篇：使用Vue在渲染串列中顯示/隱藏div

下一篇：如何將vue.js資料同步到全域javscript變數