vue3 的方法，都怎么运用，使用场景多在什么时候。

Vue3中常用的方法包括：

ref: 创建响应式数据，常用于获取DOM元素或存储简单的数据。

示例：

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const name = ref('Vue')

    // 获取DOM元素
    const divRef = ref(null)
    const handleClick = () => {
      console.log(divRef.value.innerHTML)
    }

    return {
      count,
      name,
      divRef,
      handleClick
    }
  }
}
</script>

<template>
  <div>
    <p ref="divRef">Hello {{ name }}!</p>
    <button @click="count++">Click</button>
  </div>
</template>

reactive: 创建响应式对象，常用于存储复杂的数据。

示例：

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const user = reactive({
      name: 'John',
      age: 18,
      address: {
        city: 'New York',
        zipCode: '10001'
      }
    })

    return {
      user
    }
  }
}
</script>

<template>
  <div>
    <p>Name: {{ user.name }}</p>
    <p>Age: {{ user.age }}</p>
    <p>City: {{ user.address.city }}</p>
    <p>Zip Code: {{ user.address.zipCode }}</p>
  </div>
</template>

computed: 计算属性，常用于根据响应式数据计算出其他数据。

示例：

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)

    return {
      count,
      doubleCount
    }
  }
}
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="count++">Click</button>
  </div>
</template>

watchEffect: 监听响应式数据的变化，常用于在数据变化时执行一些操作。

示例：

<script>
import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watchEffect(() => {
      console.log(count.value)
    })

    return {
      count
    }
  }
}
</script>

<template>
  <div>
    <button @click="count++">Click</button>
  </div>
</template>

这些方法在开发中有不同的使用场景，通常根据需求来选择不同的方法。比如，ref用于获取DOM元素、存储简单的数据；reactive用于存储复杂的数据；computed用于根据响应式数据计算出其他数据；watchEffect用于监听响应式数据的变化等。文章来源地址https://uudwc.com/A/rZ365

vue3 的方法 ，都怎么运用，使用场景多在什么时候。

vue3 的方法，都怎么运用，使用场景多在什么时候。