Products
GG网络技术分享 2025-03-18 16:14 16
官方解释:
侦听器可以监听data对象属性或者计算属性的变化
watch是观察属性的变化
所以watch的属性名必须要与观察人的名字保持一致;
只要观察的值发生了变化才会触发,
<div id="app">
<!-- 监听器 -->
<input type="text" v-model="msg">
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
msg:""
},
watch:{
msg(){
console.log("数据发生了变化")
console.log(arguments)
}
}
})
</script>
通过这个理解,我们就会发现, 只要数据一但发生变化,那么监听函数msg就会被触发, 监听函数中接受两个参数,第一个参数是数据变化后的新值, 第二个参数是数据变化后的旧值
尽管大部分时间我们用不到侦听器, 但侦听器对于处理异步操作非常适合,
例如我们需要将用户输入的内容延迟5秒后现在在页面上
<div id="app">
<!-- 监听器 -->
<input type="text" v-model="msg">
{{showMsg}}
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
msg:"",
showMsg: ""
},
watch:{
msg(){
let newValue = this.msg
setTimeout(() => {
this.showMsg = newValue
},5000)
}
}
})
</script>
侦听器在数据发生变化的时候就会触发,触发时,数据已经更新,我们那到就是新值,那么我们如何获取之前的旧值呢
其实当监听的属性发生变化时,侦听器会被传入两个参数
第一个参数:侦听器所监听属性的当前值,即更新后的值
第二个参数: 原来旧值
<div id="app">
<!-- 监听器 -->
<input type="text" v-model="msg">
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
msg:"",
},
watch:{
msg(val, oldval){
console.log(val);
console.log(oldval);
}
}
})
</script>
data属性中的数据值除了是基本数据类型的数据为,还有可能是对象类型,那么我们如何监听对象数据的属性的
<div id="app">
<!-- 监听器 -->
<input type="text" v-model.number="fruit.price">
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
fruit:{
name:"苹果",
price: 20
},
},
watch:{
fruit(val, oldval){
console.log(val);
console.log(oldval);
}
}
})
</script>
如果我们按照之前的监听方式, 那么我们就会发现,当我们修改fruit属性值的时候,侦听器不会被触发, 侦听器会在fruit对象整体被修改时触发.
为了监听对象里某个特定属性的变化,可以在侦听器的名称中使用.操作符, 就像访问这个对象的属性
<div id="app">
<!-- 监听器 -->
<input type="text" v-model.number="fruit.price">
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
fruit:{
name:"苹果",
price: 20
},
},
watch:{
"fruit.price"(val, oldval){
console.log(val);
console.log(oldval);
}
}
})
</script>
通过上面的例子,我们知道,我们可以监听对象的特定属性的变化,,可以我们想监听整个对象的所有属性的变化就需要给对象所有的属性添加监听就不是特别的好,如果我们只是单纯的监听对象,那么属性的变化并不会触发监听器,只有整个对象被替换式才会触发
所以我们可以通过deep属性来开启对象的深度监听,
为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。
如果需要开启深度监听,那么监听器将不再是一个函数,而需要写成一个对象,对象中配置deep属性
<div id="app">
<!-- 监听器 -->
<input type="text" v-model.number="fruit.price">
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
fruit:{
name:"苹果",
price: 20
},
},
watch:{
fruit:{// 此时fruite 就是一个配置对象,里面的属性都是配置选项
// handler 就是原来的监听函数, 当数据变化是执行的函数
handler(val,oldval){
console.log(val);
console.log(oldval);
},
// 深度监听选项
deep:true
}
}
})
</script>
此时我们就做到了即监听这整个对象的变化, 也简体对象里面所有的属性的变化,
监听除了deep选项外,还有immediate选项
指定 immediate: true 将立即以表达式的当前值触发回调,
watch:{
fruit:{// 此时fruite 就是一个配置对象,里面的属性都是配置选项
// handler 就是原来的监听函数, 当数据变化是执行的函数
handler(val,oldval){
console.log(val);
console.log(oldval);
},
// 深度监听选项
deep:true,
immediate: true // 理解执行监听函数handler
}
}
但是细心的朋友就会发现我们在改变对象属性的时候,虽然触发了侦听器,但是我没发获取旧值了,我们拿到的两个形参的值都是对象更改后的新值.
示例:
<div id="app">
<!-- 监听器 -->
<input type="text" v-model.number="fruit.price">
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
fruit:{
name:"苹果",
price: 20
},
},
watch:{
fruit:{
handler(val,oldval){
console.log(11)
console.log(val);
console.log(oldval);
},
deep:true
}
},
})
</script>
此时当数据发生变化是, 查看handler 两个参数值
官方方案: 观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代
既然 watch无法在变异对象或数组时监听新旧值，那么我们可以先使用JSON.parse()来浅复制一遍data对象，然后在复制的对象上修改，完了重新赋值给该data对象，这样变化前后两个对象是完全不一样的,因为它们的引用地址完全不一样，Vue可以循着两个引用地址获得新旧两个
<div id="app">
<!-- 监听器 -->
<input type="text" v-model.number="fruit.price">
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
fruit:{
name:"苹果",
price: 20
},
},
watch:{
fruitNew:{
handler(val,oldval){
console.log(11)
console.log(val);
console.log(oldval);
},
deep:true
}
},
computed:{
fruitNew(){
return JSON.parse(JSON.stringify(this.fruit));
}
},
})
</script>
除了 watch 选项之外，您还可以使用命令式的 vm.$watch ,通过Vue实例对象来监听数据
可以通过实例对象调用$watch设置监听
<!-- 监听字符变化-->
<div id="app">
<!-- 监听器 -->
<input type="text" v-model="msg">
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
msg:'你好'
}
})
// $watch 是一个实例方法
vm.$watch("msg",(val,newVal) => {
console.log(val)
console.log(newVal);
})
</script>
<div id="app">
<!-- 监听器 -->
<input type="text" v-model.number="fruit.price">
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
fruit:{
name:"苹果",
price: 20
},
}
})
// $watch 是一个实例方法
vm.$watch("fruit",(val,newVal) => {
console.log(val)
console.log(newVal);
},{
deep: true
})
</script>Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动：监听属性 watch。
虽然watch的滥用会导致性能不佳，但在一些情况下我们还是需要watch，使得代码更加简洁、逻辑更加清晰(其实就是嫌麻烦...)。
小程序实现 类似vue 一样的watch 监听数据
将方法注册到app.js 中也可以使用高级一点的写法
使用装饰器模式将小程序page 重写挂在到生命周期函数上或者挂在页面this 上每次就不需要重新在调用初始化一次。本文对装饰器模式不做介绍这是个思路。等待下次实现
| setWatcher(page) { let data = page.data; // 获取page 页面data let watch = page.watch; for(let i in watch){ let key = i.split(\'.\'); // 将watch中的属性以\'.\'切分成数组 let nowData = data; // 将data赋值给nowData let lastKey = key[key.length - 1]; let watchFun = watch[i].handler || watch[i]; // 兼容带handler和不带handler的两种写法 let deep = watch[i].deep; // 若未设置deep,则为undefine this.observe(nowData, lastKey, watchFun, deep, page); // 监听nowData对象的lastKey } }, /\\*\\* \\* 监听属性 并执行监听函数 \\*/ observe(obj, key, watchFun, deep, page) { let val = obj[key]; // 判断deep是true 且 val不能为空 且 typeof val===\'object\'（数组内数值变化也需要深度监听） if (deep && val != null && typeof val === \'object\') { for(let i in val){ this.observe(val, i, watchFun, deep, page); // 递归调用监听函数 } } let that = this; Object.defineProperty(obj, key, { configurable: true, enumerable: true, set: function (value) { // 用page对象调用,改变函数内this指向,以便this.data访问data内的属性值 watchFun.call(page, value, val); // value是新值，val是旧值 val = value; if (deep) { // 若是深度监听,重新监听该对象，以便监听其属性。 that.observe(obj, key, watchFun, deep, page); } }, get: function () { return val; } }) } |
页面使用：
| onLoad: function () { app.setWatcher(this); setTimeout(()=>{ this.setData({ name:\"kangbosodoa\" }) },2000) }, watch: { name: { handler(newValue,oldvalue) { console.log(this) console.log(newValue,oldvalue,\"变化了\"); }, deep: true }, type:{ handler(newValue) { console.log(newValue,\"属性发生变化\"); }, deep: true // 是否深度监听 } }, |
到此这篇关于微信小程序实现watch监听的文章就介绍到这了,希望大家以后多多支持！
Demand feedback
