vue2检测对象和数组生效问题

总结

对象

如果没有在data里面定义的属性名，想要添加新的属性名，就需要vm.$set()方法，使vue能够检测到，或者使用vm.$forceUpdate()钩子强制刷新数据只是这样做不会给新的属性名添加get()set()方法，下次还想改变这个属性名的值，还需要调用vm.$forceUpdate()钩子

vm.$forceUpdate()钩子 适合一次性的且修改的地方比较多

数组

不能通过数组的下标直接修改，可以使用vm.$set()方法，还可以使用vue官网提供的修改数组的方法，这样做都是响应式的。

也可以使用 vm.$forceUpdate()钩子  只不过，他只生效一次。

代码案例

<template>
  <div class="test">
    <div>test</div>
    <div>
      {{arr}}
      <span @click="arrMethod">点击改变数组</span>
    </div>
    <div>
      {{obj}}
      <span @click="objMethod">点击改变对象</span>
    </div>
    <div>
      <span @click="forceUpdateAfter">点击测试$forceUpdate()的对象属性 以后是不是响应式的</span>
      <br>
      <span>很显然不是响应式的如果以后想再次生效只能再掉用$forceUpdate()钩子</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [1, 2, 3, 4],
      obj: {
        a: "a",
        b: {
          c: "c"
        }
      },
      temp: {}
    };
  },
  methods: {
    arrMethod() {
      //this.arr = [5, 6, 7, 8];//可以直接改变根元素
      //this.arr[0] = 111; //不能通过下标直接该值，不然vue检测不到数组变化
      //可以通过 vm.$set(要改变的数组,下标,改变后的值) 来改变 或者Vue.set()
      this.$set(this.arr, 0, 1111);

      //this.$forceUpdate();//通过vue的生命周期钩子 vm.$forceUpdate() 也可以实现$set()方法的效果， 强制刷新，解决页面不会重新渲染的问题
    },
    objMethod() {
      this.obj.b.d = "d"; //不能直接添加没有在data里面定义的属性和值
      //可以通过 vm.$set(要改变的对象,属性名,改变后的属性值) 来改变 或者Vue.set()
      //this.$set(this.obj.b, "d", "d");
      this.$forceUpdate();
      console.log(this.obj);
    },
    forceUpdateAfter() {
      this.obj.b.d = "ddd";
      console.log(this.obj);
    }
  }
};
</script>
<style lang="scss" scoped>
</style>