Why ref is not working in vue3 jsx functional components?

Question

As shown in the following code, it's not working. If I put the code on (1) outside of the function, it works. Why? Or any solutions?

// vue3.2 jsx functinal components

import { ref } from 'vue'

// const count = ref(0) // (2) it works here

export default function Counter() {
  const count = ref(0) // (1) not working here
  return (
    <>
      <div>count: {count.value}</div>
      <button
        onClick={() => {
          count.value++
        }}
      >
        add
      </button>
    </>
  )
}

score 2 · Accepted Answer · answered Aug 06 '22 at 15:36

You can change a little,use defineComponent wrapper Counter.

refer: Composition API in a functional component

import { ref } from 'vue'

// const count = ref(0) // (2) it works here

function Counter() {
  const count = ref(0) // (1) not working here
  return () => (
    <>
      <div>count: {count.value}</div>
      <button
        onClick={() => {
          count.value++
        }}
      >
        add
      </button>
    </>
  )
}

export default defineComponent(Counter);

Well, this is not a functional component- this is stateful component (as described in the issue comment) — Michal Levý, Aug 09 '22 at 14:54

score 1 · Answer 2 · answered Jul 23 '22 at 10:54

This is how Functional Components work - the function is called every time the component is rendered. Which means the new count ref is created each time a component is rendered (it is a local variable)

Functional components are an alternative form of component that don't have any state of their own.

There is no solution for that. If you need local state, do not use functional component.

Moving ref creation to module scope (2) is not solution either as it will lead to a single counter shared between all usages of your component

Why ref is not working in vue3 jsx functional components?

2 Answers2