侦听器
侦听器 watch 和computed(计算属性)一样 是vue组件配置选项中的一个
侦听器本质上也是一个函数 他主要用来监听数据的变化(侦听器 watch主要用来侦听data或computed这二个数据)
我们使用的时候 要侦听那个数据 就用那个数据名作为方法名即可
基本语法:
//【侦听器】
//作用:用来侦听数据有没有变化,一旦有变化就调用函数。
//语法:在和data、methods这些平级的位置写一个watch
new Vue({
el:'',
data:{},
methods:{},
//侦听器
wathch:{
//参数一:改变后的值
//参数二:改变前的值
要侦听的数据(newValue,oldValvue){
}
}
})
侦听器的基本使用:
<div id="app">
<button @click="msg = 'ccs'">修改msg的值</button>
<p>{{ msg }}</p>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'你算哪个小饼干'
},
// 写侦听器的地方
watch:{
//侦听的数据变化
//基本数据类型,这两个参数有意义。
msg(newVal,oldVal){
//侦听到数据变化之后,需要完成的行为。
console.log('数据变了',newVal,oldVal);
}
}
})
效果图:
修改前:
修改后:
侦听器在数组的使用:
【对数组进行侦听】
数组是应用类型,存在比较复杂的侦听规则。
从理论上说,修改一个数组的内容,比如修改数组中某个元素的值,或者给数组添加新的元素,都不会修改数组本身的地址。
为此, Vue.js对数组做了特殊处理,使得使用标准的数组操作方法对数组所做的修改,都可以被侦听到。
1.Vue不能检测以下数组的变动:
a.当你利用索引值直接设置一个数组时,例如: vm.items[index0fItem] = newValue
b.当你修改数组的长度时,例如:vm.items. length = newLength
2.使用标准方法修改数组可以被侦听到
push()尾部添加
pop())尾部删除
unshift()
头部添加shift())
头部删除
splice()删除、添加、替换
sort()排序
reverse()逆序
(Vue将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新,以上就是被包裹的方法。)
<div id="app">
<ul>
<li v-for="item in list">
{{ item }}
</li>
</ul>
<button @click="list.push('彭聪厕所游一游')">添加一个项</button>
</div>
<script src="./vue.js"></script>
<script>
new Vue ({
el:'#app',
data:{
list:['彭聪历险记','彭聪大战万方','彭聪来了']
},
watch:{
list(val,old){
console.log('数组发生了改变',val,old);
}
}
})
在数组中使用侦听器总结:
1.彻底替换为一个新数组,那么可以被侦听到。
2.如果使用了push()等标准的数组操作方法,那么可以被侦听到。
3.如果直接修改数组的元素,那么无法被侦听到。
(解决方法:使用$set()方法修改元素的值。Vue3语法。)
不要使用length属性来修改数组长度,而改用其他标准方法显示数组长度的变化。