vue2数据响应式的缺陷

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <div>
      <p v-for="(item, index) in list" :key="index">
        <!-- {{ item.id }}--{{ item.text }} -->
        {{ item }}
      </p>
      <button @click="changeArray">改变数组</button>
      <p v-for="(item, index) in girls" :key="index">{{ item }}</p>
      <button @click="changeObject">改变对象</button>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
  },
  data () {
    return {
      list: ['苹果', '香蕉', '菠萝'],
      girls: {
        name: '宋江',
        age: 40,
        gender: 'male',
        hobby: '喝酒'
      }
    }
  },
  methods: {
    changeObject () {
      this.girls.name2 = '我在哪儿'
      console.log(this.girls, 'this.girls')
    },
    changeArray () {
      this.list[1] = '我是谁'
      console.log(this.list, 'this.list')
    }
  }
}
</script>

页面展示效果图

1.当点击修改对象的时候 如图：

此时对象里面的数据有被修改但是 页面不会修改 如图：

解决办法：用vue 中的set 方法

1.当点击修改数组的时候 如图：

此时数组里面的数据有被修改但是 页面不会修改 如图：

解决办法：数组更新vue并不会改变数据 当vue遇到push pop shift unshift splice sort reverse 的时候数组都会改变，尤雨溪用了重写数组的方法来实现数据的响应绑定

原因：Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的