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>

以上代码直接改变people.male.name绑定的视图直接更新了

为什么在嵌套两层的对象的值，直接赋值能够改变，那$set()没有意义了？

实际上是初始化在data内的数据vue已经全部处理成响应式对象

注意这里只是在初始化