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

Vue3中常用的方法包括：

1. 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>

1. 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>

1. 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>

1. 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用于监听响应式数据的变化等。