vue2 响应式原理的缺点及解决办法

vue2 响应式的缺点是：

1. 无法监听到对象属性的动态添加和删除
2. 无法监听到数组下标和length长度的变化

我们可以用以下方法解决：

this.$set   this.$delete

完整代码如下：

<template>
  <div>
    <p>姓名：{{ person.name }}</p>
    <p>性别：{{person.sex}}</p>
    <p>爱好：{{person.hobby}}</p>
    <button @click="add">添加性别</button>
    <button @click="del">删除名字</button>
    <button @click="update">更新数组</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      person: {
        name: "张三",
        age: 18,
        hobby:['吃','喝','玩']
      },
    };
  },
  methods: {
    add() {
      // this.person.sex = "女"; //直接修改对象下面的属性是不会引起页面视图变化的
      this.$set(this.person,'sex','女') //当点击按钮的时候，视图会更新
    },
    del(){
      // delete this.person.name  //直接删除对象下面的某个属性是不会引起页面视图变化的
      this.$delete(this.person,'name')  //当点击按钮的时候，视图会更新
    },
    update(){
      // this.person.hobby[0] = '56' //此时视图是不更新的
      // 方法一：
      this.$set(this.person.hobby,1,'睡觉') // 表示修改这个数组中的索引是1的值，修改为 睡觉
      // 方法二：
      this.person.hobby.splice(1,1,'睡觉') //表示从索引为1的值开始，修改数组，修改的长度为 1 （即只修改这一项）
    } 
  },
};
</script>