前端 - vue2怎么双向绑定一个对象？

Question

这个对象里的属性个数和key都是未知的

Answer 1

在Vue 2中，要实现对象的双向绑定，可以使用Vue.set方法和vm.$set方法。这两个方法都可以在Vue实例上设置响应式对象或数组。

首先，需要明确对象里属性个数和key都是未知的情况，是无法直接使用v-model的，因为v-model在编译过程中会尝试直接替换为prop绑定，如果属性不存在，则编译失败。

这种情况下，可以先使用Object.assign或...运算符将源对象赋值给新的目标对象，然后再使用v-model绑定新对象。

例如：

<template>  <div>    <input v-model="newObject" />    <p>{{ newObject }}</p>  </div></template><script>export default {  data() {    return {      originalObject: {},    };  },  created() {    // 将源对象赋值给新对象    this.newObject = Object.assign({}, this.originalObject);  },  watch: {    // 当原对象发生变化时，更新新对象    originalObject(newVal) {      this.newObject = Object.assign({}, newVal);    },  },};</script>

在这个示例中，通过监听originalObject的变化，当原对象发生变化时，新的对象会进行相应的更新。这样就可以实现双向绑定。但是这个示例只能处理属性个数和key都是已知的情况，对于未知的情况，无法使用此方法。因为在未知的情况下，我们无法知道原对象有什么属性，也就无法使用Object.assign进行复制。

对于属性个数和key都是未知的情况，可能需要考虑使用第三方库如Vuex或者Vue3的Composition API来进行处理。