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封装过的方法感谢阅读!不足之处欢迎指正
转载自:https://segmentfault.com/a/1190000041880376