vue如何实现数据

Vue 数据实现方式

Vue 提供了多种方式实现数据管理和响应式更新，核心机制基于响应式系统和状态管理方案。

响应式数据声明

在组件选项中使用 data 函数返回对象，Vue 会自动递归转换属性为响应式：

export default {
  data() {
    return {
      message: 'Hello Vue',
      counter: 0
    }
  }
}

组合式 API 通过 ref 和 reactive 创建响应式数据：

import { ref, reactive } from 'vue'

const count = ref(0)
const state = reactive({
  items: []
})

计算属性

基于依赖关系自动缓存的派生数据，使用 computed：

const doubleCount = computed(() => count.value * 2)

状态管理

复杂应用可使用 Pinia 或 Vuex 集中管理状态：

// Pinia 示例
import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => ({
    userData: null
  }),
  actions: {
    async fetchUser() {
      this.userData = await api.getUser()
    }
  }
})

数据绑定

模板中通过指令实现数据绑定：

<input v-model="message">
<p>{{ computedMessage }}</p>
<ul>
  <li v-for="item in filteredItems" :key="item.id">
    {{ item.text }}
  </li>
</ul>

异步数据

处理异步操作时可结合 async/await：

const fetchData = async () => {
  try {
    const response = await axios.get('/api/data')
    items.value = response.data
  } catch (error) {
    console.error('Fetch error:', error)
  }
}

响应式原理

Vue 3 使用 Proxy 实现响应式，当数据变化时自动触发组件更新。手动控制更新可使用 nextTick：

await nextTick()
// DOM 已更新