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

访客 阅读:119 2022-06-06 14:30:29 评论:0

小结一下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封装过的方法
感谢阅读!不足之处欢迎指正


标签:前端
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

搜索
排行榜
关注我们

一个IT知识分享的公众号