Vue选项：watch侦听器(微信小程序怎么实现watch监听)

Vue选项：watch侦听器

官方解释:

1. 侦听器的基本使用

侦听器可以监听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>

2. 获取旧值

侦听器在数据发生变化的时候就会触发,触发时,数据已经更新,我们那到就是新值,那么我们如何获取之前的旧值呢

其实当监听的属性发生变化时,侦听器会被传入两个参数

第一个参数:侦听器所监听属性的当前值,即更新后的值

第二个参数: 原来旧值

<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>

3. 监听data对象中某个对象的属性

data属性中的数据值除了是基本数据类型的数据为,还有可能是对象类型,那么我们如何监听对象数据的属性的

<div id="app">
<!-- 监听器 -->
<input type="text" v-model.number="fruit.price">

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">

const vm = new Vue({
el: "#app",
data: {
fruit:{
name:"苹果",
price: 20
},
},
watch:{
"fruit.price"(val, oldval){
console.log(val);
console.log(oldval);
}
}
})
</script>

4. 深度监听

通过上面的例子,我们知道,我们可以监听对象的特定属性的变化,,可以我们想监听整个对象的所有属性的变化就需要给对象所有的属性添加监听就不是特别的好,如果我们只是单纯的监听对象,那么属性的变化并不会触发监听器,只有整个对象被替换式才会触发

所以我们可以通过deep属性来开启对象的深度监听,

4.1 deep 选项

为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。

如果需要开启深度监听,那么监听器将不再是一个函数,而需要写成一个对象,对象中配置deep属性

<div id="app">
<!-- 监听器 -->
<input type="text" v-model.number="fruit.price">

},
// 深度监听选项
deep:true
}
}
})
</script>

此时我们就做到了即监听这整个对象的变化, 也简体对象里面所有的属性的变化,

4.2 immediate选项

监听除了deep选项外,还有immediate选项

指定 immediate: true 将立即以表达式的当前值触发回调,

watch:{
fruit:{// 此时fruite 就是一个配置对象,里面的属性都是配置选项
// handler 就是原来的监听函数, 当数据变化是执行的函数
handler(val,oldval){
console.log(val);
console.log(oldval);

},
// 深度监听选项
deep:true,
immediate: true // 理解执行监听函数handler
}
}

5. 引用类型深度监听后,属性变化,获取新旧值问题

但是细心的朋友就会发现我们在改变对象属性的时候,虽然触发了侦听器,但是我没发获取旧值了,我们拿到的两个形参的值都是对象更改后的新值.

示例:

<div id="app">
<!-- 监听器 -->
<input type="text" v-model.number="fruit.price">

})
</script>

此时当数据发生变化是, 查看handler 两个参数值

5.1 解决方案: 利用计算属性

官方方案: 观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代

既然 watch无法在变异对象或数组时监听新旧值，那么我们可以先使用JSON.parse()来浅复制一遍data对象，然后在复制的对象上修改，完了重新赋值给该data对象，这样变化前后两个对象是完全不一样的,因为它们的引用地址完全不一样，Vue可以循着两个引用地址获得新旧两个

<div id="app">
<!-- 监听器 -->
<input type="text" v-model.number="fruit.price">

},
deep:true
}
},
computed:{
fruitNew(){
return JSON.parse(JSON.stringify(this.fruit));
}
},
})
</script>

6. 可以通过Vue是实例对象的$watch属性来监听

除了 watch 选项之外，您还可以使用命令式的 vm.$watch ,通过Vue实例对象来监听数据

6.1 普通监听

可以通过实例对象调用$watch设置监听

<!-- 监听字符变化-->
<div id="app">
<!-- 监听器 -->
<input type="text" v-model="msg">

// $watch 是一个实例方法
vm.$watch("msg",(val,newVal) => {
console.log(val)
console.log(newVal);
})
</script>

6.2 监听配置

<div id="app">
<!-- 监听器 -->
<input type="text" v-model.number="fruit.price">
</div>

// $watch 是一个实例方法
vm.$watch("fruit",(val,newVal) => {
console.log(val)
console.log(newVal);
},{
deep: true
})
</script>

微信小程序怎么实现watch监听

Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动：监听属性 watch。

虽然watch的滥用会导致性能不佳，但在一些情况下我们还是需要watch，使得代码更加简洁、逻辑更加清晰(其实就是嫌麻烦...)。

小程序实现 类似vue 一样的watch 监听数据

将方法注册到app.js 中也可以使用高级一点的写法

使用装饰器模式将小程序page 重写挂在到生命周期函数上或者挂在页面this 上每次就不需要重新在调用初始化一次。本文对装饰器模式不做介绍这是个思路。等待下次实现

页面使用：

到此这篇关于微信小程序实现watch监听的文章就介绍到这了,希望大家以后多多支持！