vue实现数据
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 获取异步数据：
import axios from 'axios'
data() {
return { posts: [] }
},
async created() {
const response = await axios.get('/api/posts')
this.posts = response.data
}
