vue实现数据修改
数据绑定与响应式更新
在Vue中，通过v-model指令实现双向数据绑定，或使用this.$set方法确保响应式更新。
<template>
<input v-model="message" />
<button @click="updateData">修改数据</button>
</template>
<script>
export default {
data() {
return {
message: "初始值",
user: { name: "Alice", age: 25 }
};
},
methods: {
updateData() {
this.message = "修改后的值";
this.$set(this.user, "age", 26); // 确保响应式更新
}
}
};
</script>数组更新方法
Vue对数组的变异方法（如push、splice）进行了封装，直接调用这些方法可触发视图更新。
methods: {
updateArray() {
this.items.push("新元素"); // 自动响应
this.items.splice(0, 1, "替换元素");
}
}深层对象修改
对于嵌套对象，需逐层访问属性或使用Vue.set/this.$set确保响应式。
methods: {
updateNestedObject() {
this.$set(this.obj, "newKey", "值"); // 新增响应式属性
this.obj.nested.prop = "新值"; // 需确保nested已初始化
}
}使用计算属性与侦听器
通过computed和watch实现复杂数据逻辑的监听与派生。
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`; // 自动依赖追踪
}
},
watch: {
message(newVal) {
console.log("数据变化:", newVal); // 监听特定数据
}
}异步数据更新
在异步操作（如API请求）中修改数据时，确保在回调函数中更新。
methods: {
fetchData() {
axios.get("/api/data").then(response => {
this.dataList = response.data; // 异步更新
});
}
}
