在 Vue 3 中获取数据 - Javascript

在 Vue 3 中，数据获取方式与 Vue 2 有所不同。Vue 3 中使用了 Composition API，可以通过 setup() 方法来获取数据。

1. 声明变量

在 setup() 方法中，可以使用 ref、reactive 或 computed 来声明响应式变量。

1.1 ref

使用 ref 声明的变量是一个包装对象，可以通过 .value 来获取和设置值。ref 内部提供了一些方法来设置、获取和监听变量，如 ref.value、ref.setValue()、ref.unref() 等。

import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, World!')
    console.log(message.value)  // 'Hello, World!'
    message.value = 'Hello, Vue 3!'
    console.log(message.value)  // 'Hello, Vue 3!'
    return { message }
  }
}

1.2 reactive

使用 reactive 声明的变量是一个响应式对象，可以使用对象的属性来获取和设置值。Vue 会自动追踪对象的属性变化并进行响应。

import { reactive } from 'vue'

export default {
  setup() {
    const user = reactive({ name: 'John', age: 30 })
    console.log(user.name)  // 'John'
    user.name = 'Jane'
    console.log(user.name)  // 'Jane'
    return { user }
  }
}

1.3 computed

使用 computed 声明的变量是一个计算属性，可以根据其他响应式变量的变化而自动计算得出。

import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)
    console.log(doubleCount.value)  // 0
    count.value++
    console.log(doubleCount.value)  // 2
    return { count, doubleCount }
  }
}

2. 异步获取数据

在 Vue 3 中，可以使用 async 和 await 关键字来进行异步操作。在 setup() 方法中，可以使用 watchEffect 监听数据变化，并在回调函数中进行异步操作。

import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const user = ref(null)
    watchEffect(async () => {
      const response = await fetch('https://api.example.com/user')
      const data = await response.json()
      user.value = data
    })
    return { user }
  }
}

总结

在 Vue 3 中，可以使用 ref、reactive 和 computed 来声明响应式变量，通过 setup() 方法获取数据。对于异步操作，可以使用 async 和 await 进行异步操作，并使用 watchEffect 监听数据变化。