vue复习(二)--vue中数据监测与改变

小结一下vue中几种数据的监测和改变
vue会对data中的数据进行监视，引用官网的解释
“Vue 实例的数据对象。Vue 会递归地把 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化”

实例化之前data中传入的数据是被监视的，如果在实例化之后往data中添加的属性将不被监视
一、对象中的数据检测

<template>
  <div>
    <div>{{obj.gender}}</div>
    <button @click="addAttr">添加属性</button>
    <button @click="changeAttr">改变属性</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: "wang",
        age: 20
      }
    };
  },
  methods: {
    addAttr() {
      this.obj.gender = "女";
      console.log(this.obj.gender,'添加属性')//属性能添加进去 但是vue检测不到，视图不更新
    },
    changeAttr() {
      this.obj.gender = "男";
      console.log(this.obj.gender,'修改属性')//属性能修改 但是vue检测不到，视图不更新
    }
  }
};

运行效果如下，属性能添加到obj对象，也能修改，但是vue无法检测到

vue内置方法$set可以添加属性，并且可以被vue检测到，vm.$set(给哪个对象添加，添加什么属性，值)

运行效果

二、数组中的数据监测
通过数组下标直接修改值，vue无法检测到

运行效果

filter()等不改变原数组的方法无法触发视图更新

以下方法修改数组会触发视图更新
push(),pop(),shift(),unshift(),splice(),sort(),reverce()。
注意：以上方法是经过vue封装的，并不是数组原型上的方法
console.log(Array.prototype.push() === this.arr.push());//false

        console.log(Array.prototype.pop() === this.arr.pop());//false
        console.log(Array.prototype.shift() === this.arr.shift());//false
        console.log(Array.prototype.unshift() === this.arr.unshift());//false
        console.log(Array.prototype.splice() === this.arr.splice());//false
        console.log(Array.prototype.sort() === this.arr.sort());//false
        console.log(Array.prototype.reverse() === this.arr.reverse());//false!

将修改后的数组替换掉原数组也能触发视图更新

小结：
1.vue实例化之前往data中添加的数据会被vue检测到，后期自己添加的数据无法被劫持到，需要通过vm.$set(obj,attr,val)方法给data中的对象添加属性，注意不可直接往vm上添加属性
2.能改变原数组的方法在vue中使用也可被vue检测到，但是这些方法并不是数组原型上的，而是vue封装过的方法
感谢阅读！不足之处欢迎指正