|
目录
作用
语法
简单监听
深度侦听：
监听对象单个属性的变化
?监听复杂数据类型
作用
? ? watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
语法
? watch: {
? ? ? ? ? ? ? ? //参数一：改变后的值。
? ? ? ? ? ? ? ? //参数二：改变前的值。
? ? ? ? ? ? ? ? // 要侦听的数据(newValue, oldValue) {
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? }
简单监听
<body>
<div id="app">
<!-- 点击按钮改变天气 -->
<h1>今天天气,{{info}}</h1>
<button @click="change">切换天气</button>
</div>
<script>
new Vue({
el: '#app',
data: {
isHot: true,
},
computed: {
info() {
return this.isHot ? '炎热' : '凉爽'
},
},
methods: {
change() {
this.isHot = !this.isHot;
}
},
watch: {
info(newvalue, oldValue) {
console.log(newvalue, oldValue) // 炎热 凉爽
},
}
})
</script>
</body>
深度侦听：
?1.deep（深度侦听）：默认情况下，侦听器无法侦听对象的属性值的变化，如果想实现这个效果，则需要添加deep配置为true
2. handler（固定方法触发）：因为你要添加deep的配置，所以，侦听器的形式要变更为对象形式，只有对象才能添加其它的配置, 同时侦听函数必须为handler
3. immediate（立即侦听）：如果需要默认一进页面就触发一次，添加immediate配置选项为true
语法：
watch:{
handler(newv){
// 处理
},
deep:true,
immediate:true
}
?
<body>
<div id="baat">
<h3>a的值是:{{ numbers.a}}</h3>
<button @click="numbers.a++">+1</button>
<h3>b的值是:{{ numbers.b}}</h3>
<button @click="numbers.b++">+1</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#baat',
data: {
numbers: {
a: 1,
b: 1
}
},
// (1)事件监听
watch: {
//监视多级中所有属性的的变化 深度监视
numbers: {
// 深度监视开启
deep: true,
handler(newvalue, oldValue) {
console.log("a或b发生改变")
}
}
}
});
</script>
</body>
监听对象单个属性的变化
? ? 监听对象单个属性的变化
data: {
// 用户的信息对象
info: {
name: 'a',
add: {
city: '南昌'
}
}
},
// 所有的侦听器，都应该被定义到 watch 节点下
watch: {
// 如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
'info.name'(newVal) {
console.log(newVal)
}
}
?监听复杂数据类型
【对数组进行侦听】
数组是引用类型,存在比较复杂的侦听规则。
从理论上说，修改一个数组的内容，比如修改数组中某个元素的值,或者给数组添加新的元素,都不会修改数组本身的地址
为此，Vue.is对数组做了特殊处理,使得使用标准的数组操作方法对数组所做的修改,都可以被侦听到。
1.Vue不能检测以下数组的变动:
a.当你利用索引值直接设置一个数组时,例如:vm.items[indexOfItem] = 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% '
push()尾部添加
?pop()尾部删除
unshift()头部添加
?shift()头部删除
splice()删除、添加、替换
sort()排序
reverse()逆序
(Vue将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新,以上就是被包裹的方法。)
<body>
<div id="app">
<ul>
<li v-for="item in infot">{{item}}</li>
</ul>
<button @click="infot.push('小妮')">点击添加</button>
</div>
<script>
new Vue({
el: '#app',
data: {
isHot: true,
infot: ["小白", "小花", "小小"]
},
watch: {
//复杂数据类型，这连个参数没有意义，因为地址没变。
//所以复杂类型中，一般不会写这两个参数，因为这两个参数的值是一样的，就算写也只有一个。
// infot(newvalue, oldValue) {
// console.log(newvalue, oldValue)
// //['小白', '小花', '小小', '小妮', __ob__: Observer]
// // ?['小白', '小花', '小小', '小妮', __ob__: Observer]
// }
infot(val) {
console.log(val)
//['小白', '小花', '小小', '小妮', __ob__: Observer]
}
}
})
</script>
</body>
<!--
1.Vue不能检测以下数组的变动:
a.当你利用索引值直接设置一个数组时,例如:vm.items[index0fItem] = newValue b.当你修改数组的长度时，例如:vm.items.length = newLength
在数组中使用侦听器总结:
1.彻底替换为一个新数组,那么可以被侦听到。
2.如果使用了push()等标准的数组操作方法,那么可以被侦听到。
3.如果直接修改数组的元素,那么无法被侦听到。
(解决方法:使用$set()方法修改元素的值。Vue3语法。)
不要使用length属性来修改数组长度,而改用其他标准方法显示数组长度的变化。
-->
|