likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 38

小结一下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复习(二)--vue中数据监测与改变vue内置方法$set可以添加属性,并且可以被vue检测到,vm.$set(给哪个对象添加,添加什么属性,值)vue复习(二)--vue中数据监测与改变运行效果vue复习(二)--vue中数据监测与改变二、数组中的数据监测通过数组下标直接修改值,vue无法检测到vue复习(二)--vue中数据监测与改变运行效果vue复习(二)--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!

将修改后的数组替换掉原数组也能触发视图更新vue复习(二)--vue中数据监测与改变小结:1.vue实例化之前往data中添加的数据会被vue检测到,后期自己添加的数据无法被劫持到,需要通过vm.$set(obj,attr,val)方法给data中的对象添加属性,注意不可直接往vm上添加属性2.能改变原数组的方法在vue中使用也可被vue检测到,但是这些方法并不是数组原型上的,而是vue封装过的方法感谢阅读!不足之处欢迎指正