【侦听器的基本结构】
作用:用来侦听数据有没有变化,一旦有变化就调用函数
语法: 在和data、methods这些平级的位置写一个watch
new Vue({
el:'',
data:{},
methods:{},
//侦听器
watch:{
// 参数一:改变前的值
// 参数二:改变后的值
要侦听的数据(newValue,oldValue){
}
}
})
基本使用:
<body>
<div id="app">
<button @click="msg = '我好喜欢'">点我有惊喜</button>
<p>{{ msg }}</p>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'你好坏',
},
//写侦听器的地方
watch:{
//侦听的数据变化
//基本数据类型,这两个参数有意义。
msg(newValue,oldValue){
//侦听到数据变化之后,需要完成的行为。
console.log('数据改变了',newValue,oldValue);
}
}
})
</script>
</body>
数组中使用侦听器
【对数组进行侦听】
数组是应用类型,存在比较复杂的侦听规则。
从理论上说,修改一个数组的内容,比如修改数组中某个元素的值,或者给数组添加新的元素,都不会修改数组本身的地址。为此.Vue.is对数组做了特殊处理,使得使用标准的数组操作方法对数组所做的修改,都可以被侦听到。
1.Vue不能检测以下数组的变动:
a.当你利用索引值直接设置一个数组时,例如:vm.items[index0fItem] = newValue b.当你修改数组的长度时,例如:vm.items.length = newlength
2.使用标准方法修改数组可以被侦听到
https://v2.cn.vueis.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B
push() 尾部添加
pop()尾部删除
unshift()头部添加
shift()头部删除
splice()删除、添加、替换
sort()排序
reverse()逆序
(Vue将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新,以上就是被包裹的方法。)
<body>
<div id="app">
<ul>
<li v-for = "item in list" key:>{{item}}</li>
</ul>
<button @click="list.push('李嘉图')">添加</button>
<button @click="list.pop()">删除</button>
<!-- 利用索引值改变数组时间,不能被侦听到 -->
<button @click="list[0] = '绘梨衣' ">修改第一项</button>
<button @click="list.splice(1,0,'零')">修改第一项</button>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
list:['诺诺','凯撒','楚子航','路明非']
},
watch:{
//复杂数据类型,这两个参数没有意义,因为地址没变。
//所以复杂类型中,一般不会写这两个参数,因为这两个参数的值是一样的,就算写也只写一个。
list(newValue,oldValue){
console.log('数据改变了',newValue,oldValue);
}
}
})
</script>
总结:
彻底替换为一个新数组,那么可以被侦听到。
如果使用了push()等标准的数组操作方法,那么可以被侦听到。
如果直接修改数组的元素,那么无法被侦听到。
(解决方法:使用$set(()方法修改元素的值。Vue3语法。)
不要使用length属性来修改数组长度,而改用其他标准方法显示数组长度的变化。