Vue 对象

在 Vue.js 中，操作对象是常见的任务之一。Vue 提供了许多方法和指令来方便地操作对象，包括动态添加属性、遍历对象、响应式更新等。以下是一些常见的对象操作及其详细说明和示例。

创建对象

在 Vue 组件的 data 中创建对象：

export default {data() {return {myObject: {key1: 'value1',key2: 'value2'}};}
}

添加属性

使用 Vue 的 this.$set 方法可以动态添加响应式的属性：

this.$set(this.myObject, 'key3', 'value3');

或者直接添加属性（注意：这种方式添加的属性在 Vue 2.x 中不会是响应式的，Vue 3.x 中可以正常响应）：

this.myObject.key3 = 'value3';

删除属性

使用 Vue 的 this.$delete 方法可以删除对象的属性：

this.$delete(this.myObject, 'key1');

修改属性

直接修改对象的属性值：

this.myObject.key2 = 'newValue';

遍历对象

可以使用 v-for 指令遍历对象的属性和值：

<template><div><ul><li v-for="(value, key) in myObject" :key="key">{{ key }}: {{ value }}</li></ul></div>
</template>

深拷贝对象

在某些情况下，可能需要创建对象的深拷贝。可以使用 JSON.parse 和 JSON.stringify 方法来实现：

let newObject = JSON.parse(JSON.stringify(this.myObject));

或者使用 Object.assign 方法（浅拷贝）：

let newObject = Object.assign({}, this.myObject);

监听对象变化

使用 watch 监听对象属性的变化：

export default {data() {return {myObject: {key1: 'value1',key2: 'value2'}};},watch: {'myObject.key1'(newVal, oldVal) {console.log(`key1 changed from ${oldVal} to ${newVal}`);}}
}

深度监听对象

如果需要监听对象的深层变化，可以在 watch 中设置 deep: true：

export default {data() {return {myObject: {key1: 'value1',key2: 'value2',nested: {key3: 'value3'}}};},watch: {myObject: {handler(newVal, oldVal) {console.log('myObject changed', newVal, oldVal);},deep: true}}
}

示例

以下是一个完整的 Vue 组件示例，演示了如何在 Vue.js 中进行各种对象操作：

<template><div><button @click="addProperty">添加属性</button><button @click="deleteProperty">删除属性</button><button @click="modifyProperty">修改属性</button><button @click="logObject">打印对象</button><ul><li v-for="(value, key) in myObject" :key="key">{{ key }}: {{ value }}</li></ul></div>
</template><script>
export default {data() {return {myObject: {key1: 'value1',key2: 'value2'}};},methods: {addProperty() {this.$set(this.myObject, 'key3', 'value3');},deleteProperty() {this.$delete(this.myObject, 'key1');},modifyProperty() {this.myObject.key2 = 'newValue';},logObject() {console.log(this.myObject);}}
}
</script><style scoped>
button {margin-right: 10px;
}
</style>