vue实现赋值方法
Vue 实现赋值的方法
在 Vue 中，赋值操作需要遵循响应式规则，确保数据变化能够触发视图更新。以下是常见的赋值方法：
直接赋值（仅适用于根级属性）
对于 Vue 实例的 data 对象中的根级属性，可以直接通过 this.propertyName 进行赋值：
data() {
return {
message: 'Hello'
}
},
methods: {
updateMessage() {
this.message = 'New value'; // 直接赋值
}
}Vue.set 方法（解决响应式限制）
当需要给对象添加新属性或修改数组指定索引时，需使用 Vue.set（Vue 2.x）或 this.$set：
// 对象新增属性
this.$set(this.someObject, 'newProperty', 'value');
// 数组修改
this.$set(this.someArray, index, newValue);数组的响应式修改
Vue 对数组的以下方法进行了响应式封装：
push()/pop()shift()/unshift()splice()sort()/reverse()
// 正确做法
this.items.splice(index, 1, newItem);
// 错误做法（不会触发视图更新）
this.items[index] = newValue;对象的多属性更新
使用 Object.assign() 或展开运算符创建新对象：
this.someObject = Object.assign({}, this.someObject, {
newProp1: value1,
newProp2: value2
});
// 或使用展开运算符
this.someObject = { ...this.someObject, newProp: value };深层嵌套对象的赋值
对于嵌套对象，建议使用计算属性或深度拷贝：
// 使用 lodash 的 _.set
import _ from 'lodash';
_.set(this.deepObject, 'path.to.property', newValue);
this.deepObject = { ...this.deepObject }; // 触发更新使用 v-model 双向绑定
在模板中可以直接使用 v-model 进行表单元素的双向绑定：
<input v-model="message">
<!-- 等同于 -->
<input :value="message" @input="message = $event.target.value">注意事项
- 避免直接修改 Vuex state，应通过 mutations 提交修改
- 对于复杂数据结构，考虑使用 Vue 3 的
reactive或ref - 数组长度修改需要通过
splice实现响应式更新
