Vue2.0 $set()使用

<template>
  <div class="home">
    <div
      v-for="(item,index) in items"
      :key="index"
    >{{item}}</div>
    <button @click="btn()">修改</button>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      items: { obj1: "11" },
    };
  },
  methods: {
    btn() {
      this.$set(this.items, 'age', 10); // 成功
    },
  },
};
</script>

处理没有在data定义变量，通过$set实现数据双向绑定的

原理 

每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

 

受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。