vue响应式对象

在vue中与视图中绑定的数据，其数据的变化会驱动视图的更新，这是因为vue是响应式

那么有没有那么一种情况数据的变化视图没有变化呢？

答案肯定是有的，例如对象的属性变化vue并不能监听到，因此数据的变化并不能驱动视图更新

vue也提供了$set方法来更新对象属性值的变化，但是也会有奇怪的现象比如

<template>
  <div class="test">
    <div>{{people.male.name}}</div>
    <button @click="testData">test</button>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
 
  data () {
    return {
      people: {
        male: {
          name: 'man',
          hair: 'short',
        },
      }
    }
  },
  methods: {
    testData() {
      this.people.male.name = 'dust';
    },
  },
}
</script>

这样修改，视图会在执行完testData后发生改变，实际上是初始化在data中的数据vue已经全部处理成响应式对象

注意：这里只是在初始化时候的键值对是响应式对象的，下面代码不会改变cloth的视图

<template>
  <div class="test">
    <div>{{people.male.name}}</div>
    <div>{{people.male.cloth || '111'}}</div>
    <button @click="testData">test</button>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
 
  data () {
    return {
      people: {
        male: {
          name: 'man',
          hair: 'short',
        },
      }
    }
  },
  methods: {
    testData() {
      this.people.male.name = 'dust';
      this.people.male.cloth = 'blue';
    },
  },
}
</script>

初始化时候显示的是“111”，在执行完testData()之后，name变成了dust,但是cloth仍为“111”，因为新增的属性不是响应式的

有人会说这个时候cloth原本并不存在，这个时候是不会变，那在新增完已经存在的情况下，再次修改cloth的值，会触发视图更新吗？

<script>
export default {
  name: 'HelloWorld',
 
  data () {
    return {
      people: {
        male: {
          name: 'man',
          hair: 'short',
        },
      }
    }
  },
  methods: {
    testData() {
      this.people.male.name = 'dust';
      this.people.male.cloth = 'blue';
    },
    testAgain() {
      this.people.male.cloth = 'red';
    },
  },
}
</script>

先执行testData()，这时对象内已经存在了cloth，之后再执行testAgain()，这时视图同样不会发生变化，还是因为此属性并不在响应式监听范围内

那么就用$set()方法即可把其变为响应式的了

this.$set(this.people.man, 'cloth', 'blue');

这时视图会触发更新

综上所述：

data()内初始化数据vue会处理成响应式属性

$set()可以把新增的处理成响应式属性

直接添加新的属性并不能成为响应式属性

数组push等操作可触发更新vue已对此类操作做了特殊处理