vue实现向data中的数组对象添加元素，在页面添加元素并且视图自动更新

在Vue.js中，当你需要向`data`对象中的数组添加新元素，并希望页面实时更新显示这个变化时，可以按照以下步骤操作：

1. 首先，确保你在组件的`data`选项中定义了一个数组，例如：

export default {
  data() {
    return {
      items: [] // 定义一个空数组
    }
  }
}

2. 当你需要添加新元素时，可以使用Vue提供的`push()`方法或者直接赋值操作，比如：

methods: {
  addItem() {
    this.items.push({ key: 'newElement', value: '这是新添加的元素' }); // 使用 push 方法
    // 或者
    this.items = [...this.items, { key: 'newElement', value: '这是新添加的元素' }]; // 使用扩展运算符
  }
}

3. 调用该方法，比如在模板中绑定事件处理函数：

<button @click="addItem">添加新元素</button>
<ul v-for="(item, index) in items" :key="index">
  <li>{{ item.key }} - {{ item.value }}</li>
</ul>

4. 当你点击“添加新元素”按钮时，`addItem`方法会被调用，数据会实时更新。由于Vue采用了响应式的数据绑定机制，所以视图也会根据数据的变化自动刷新。