1watch监听不到数据变化
1.1 watch 监听不到 obejct对象的变化
在项目中,当我们需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。
解决方法:此时可以设置监听对象的deep:ture。来实现监听到对象属性的变化
例子:
<input type="text" v-model="student.name"/>
new Vue({
el: '#root',
data: {
return{
student: {name:'小明',age:18}
}
},
watch: {
student: {
handler(newVal, oldVal) {
},
deep: true,
}
}
})
2 watch 监听不到新增和删除对象属性的变化
问题:在上面的例子中,虽然我们可以通过设置deep:true。来监听对象的变化,但如果我们为对象添加或者删除属性,watch是监听不到的
原因: 因为ES5的影响,watch 不能监听到对象属性的添加或删除。
解决方法:
1通过vue的this.$set(object, key, value)方法
2通过Object.assign()重新创建一个对象, 例如this.ob= Object.assign({}, this.ob, { a: 1, b: 2 })
例子:
<div @click="bySet" style="color: blue">通过$set</div>
<div @click="byObjectAssign" style="color: blue">通过Object.assign</div>
data () {
return {
ob :{a: 1}
}
}
methods: {
bySet() {
// this.ob.b = 2 // 通过点方法赋值,发现观察不到p的变化
this.$set(this.ob, 'b', 2) // 第一种解决方式,可以查看日志看到已经监听到了变化
},
byObjectAssign() {
this.p = Object.assign({}, this.p, {c: 3})
}
},
watch: {
ob: {
handler (newVal, oldVal) {
},
deep: true
}
}
3 vue 监听对象中某一个属性的变化
通过设置deep:true,可以监听对象属性的变化,但是如果修改了这个对象中的任何一个属性,都会执行handler这个方法,不过这样加大了页面性能的消耗,那怎样解决呢?
解决方法:1使用watch监听字符串的对象属性
2使用计算属性computed
例子:
watch: {
'ob.name': {
handler: function() {
//do something
},
}
}
computed: {
getName: function() {
return this.ob.name
}
}
watch: {
getName: {
handler: function() {
//do something
},
}
}
4vue 监听数组对象中某一个属性的变化
我们知道,可以通过设置deep:true来设置对象属性的变化,或者数组对象的变化。但是如果是数组对象呢?还是使用deep:true吗?这样子,watch会监听数组所有属性的变化,这样**无疑加大了页面性能的消耗, *那有什么方法可以监听数组对象某一个属性的变化呢?嘿嘿,答案肯定是有的。
解决方法:
通过vue的computed。watch监听computed的返回值,进行watch监听
例子:
<template>
<ul>
<li v-for="(form, i) in forms" :key="i">
<input type="checkbox" v-model="form.selected"> {{form.colors}}
</li>
</ul>
</template>
new Vue({
el: '#app',
data: () => ({
forms: [{
day: '12',
month: '9',
year: '2035',
colors: 'lightblue',
selected: true
},
{
day: '28',
month: '01',
year: '2017',
colors: 'lightgreen',
selected: true
}
],
}),
computed: {
selected() {
return this.forms.map(form => form.selected)
}
},
watch: {
selected(newValue) {
console.log("change made to selection")
}
}
})
*