vue实现数据动态
数据绑定与响应式原理
Vue通过数据绑定实现动态更新，核心是响应式系统。使用data选项定义数据，Vue会自动将其转换为响应式对象。当数据变化时，视图自动更新。
new Vue({
data() {
return {
message: 'Hello Vue!'
}
}
})计算属性与侦听器
计算属性（computed）用于派生状态，依赖的数据变化时自动重新计算。适用于复杂逻辑或性能优化场景。
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}侦听器（watch）用于观察数据变化并执行副作用操作，适合异步或开销较大的操作。
watch: {
message(newVal, oldVal) {
console.log('Message changed from', oldVal, 'to', newVal)
}
}列表渲染与条件渲染
v-for指令实现动态列表渲染，建议为每项提供唯一key以提高性能。
<ul>
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>v-if和v-show控制元素显示。v-if是条件渲染，v-show是CSS切换。
<div v-if="isVisible">条件渲染内容</div>
<div v-show="hasData">CSS切换显示</div>表单输入绑定
v-model指令实现表单输入与数据的双向绑定，支持各种输入类型。
<input v-model="message" placeholder="编辑我">
<p>输入的内容是：{{ message }}</p>对于复杂表单，可以使用修饰符如.lazy（change事件触发）、.number（自动转为数字）、.trim（自动去除首尾空格）。
组件间通信
父组件通过props向子组件传递数据，子组件通过$emit触发事件向父组件通信。
// 父组件
<child-component :message="parentMessage" @update="handleUpdate"></child-component>
// 子组件
props: ['message'],
methods: {
notifyParent() {
this.$emit('update', newValue)
}
}状态管理（Vuex）
对于大型应用，Vuex提供集中式状态管理。核心概念包括state、mutations、actions和getters。
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
})异步数据获取
在生命周期钩子（如created）或actions中获取异步数据，使用axios等库。
created() {
axios.get('/api/data')
.then(response => {
this.items = response.data
})
.catch(error => {
console.error('获取数据失败:', error)
})
}动态组件与异步组件
<component :is="currentComponent">实现动态组件切换。异步组件通过返回Promise的函数定义，实现代码分割。
components: {
AsyncComponent: () => import('./AsyncComponent.vue')
}
