How does Computed work in Vue 3 script setup?-CodePudding

I'm trying to get computed to work in <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>

The console.log() comes through but the return statement seems to throw an error:

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)

What am I doing wrong?

CodePudding user response：

Getter only:

const someReactiveRef = ref(null)

const myVal = computed(() => someReactiveRef.value);

Getter & setter:

const someReactiveRef = ref(null)

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

When the reactive ref is coming from a reactive() object's property, you don't need the .value in either the setter or the getter. Example:

const store = reactive({
  someProp: null
})

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

Important notes:

when passing a non-reactive reference to a computed, Vue will warn you (the computed wrapper is unnecessary).
when passing it a ref which contains a cyclic dependency (e.g: a component instance) Vue will again warn you and advise on using either shallowRef or markRaw.

CodePudding user response：

Try like this:

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

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

Also if you are only using it with get() it can be removed. Like this:

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

CodePudding user response：

Computed properties appear as fields. This is true regardless of whether you pass in a function (as in computed(() => /*...*/)) or an object with a get() method (which is equivalent here if you don't provide a set() method).

Your template should simply use the name of your computed property, which here is whatever.

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