当前位置：首页 > VUE

vue实现数据

2026-03-28 00:40:34VUE

Vue 数据绑定与状态管理实现

Vue.js 提供了多种方式实现数据绑定和状态管理，核心机制包括响应式数据、计算属性、方法以及 Vuex/Pinia 等状态管理库。

响应式数据声明

在组件选项中使用 data 属性声明响应式数据，Vue 会自动追踪变化并更新视图：

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

模板中的数据绑定

通过双大括号语法或指令实现数据绑定：

<div>{{ message }}</div>
<button @click="counter++">Count: {{ counter }}</button>

计算属性

使用 computed 处理依赖其他属性的派生数据：

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('')
  }
}

方法调用

通过 methods 定义可复用函数：

methods: {
  increment() {
    this.counter++
  }
}

组件间通信

父组件通过 props 传递数据：

// 父组件
<ChildComponent :msg="message" />

// 子组件
props: ['msg']

子组件通过 $emit 触发事件：

this.$emit('update', newValue)

Vuex 状态管理

安装并配置 Vuex store：

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return { count: 0 }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

组件中访问和修改状态：

this.$store.commit('increment')
console.log(this.$store.state.count)

Pinia 状态管理（推荐）

创建 store 文件：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

组件中使用：

import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
counter.increment()

组合式 API（Vue 3）

使用 ref 和 reactive 创建响应式数据：

import { ref, reactive } from 'vue'

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

数据请求示例

使用 axios 获取异步数据：

vue实现数据

import axios from 'axios'

data() {
  return { posts: [] }
},
async created() {
  const response = await axios.get('/api/posts')
  this.posts = response.data
}