watch监听,vuewatch监听
学过vue2的朋友一定学过监听器，监听器主要用来监控页面数据或者路由的变化来执行相应的操作。在vue3中，也有监听器的用法，功能基本相同。这篇文章会详细告诉你。
目录
观察监听器的使用情况。Listener reactive监听多个参数并执行自己的逻辑。Listener Reactive监听多个参数并执行相同的逻辑。在上一节中，我们简要介绍了vue3项目中的计算属性。本节继续讲解vue3的基础知识。
在本节中，我们将讨论vue3的监听器。
学过vue2的朋友一定学过监听器，监听器主要是用来监控页面数据或者路由变化来执行相应的操作。在vue3中，也有监听器的用法，功能基本相同。Listener是常用的Vue API之一，用来监听一个数据，并在数据发生变化时做一些自定义逻辑。本文将首先列出监听器在Vue中的使用方式，然后分析源代码解释为什么可以这样使用以及监听器的实现原理。让我们稍微谈一谈听众。
watch 侦听器使用。
要使用watch API，至少需要指定两个参数：source和callback，其中callback被显式地指定为仅函数，所以区别在于它的使用方式实际上只在source中。
接下来，我们来看看vue3监听器的基本用法：
模板
差异
h1监视侦听器/h1
El-输入垂直模型=num /
英国铁路公司
英国铁路公司
el按钮type= primary @ click= num num 1/El按钮
/div
/模板
脚本
从“vue”导入{ watch，ref }
导出默认值{
setup() {
const num=ref(1)
手表(编号，(新值，旧值)={
Console.log(新值：，newVal，旧值：，oldVal)
})
返回{ num，}
}
}
/脚本
样式范围。El-输入{
宽度：100px
}
/风格
上面的代码是页面上有一个数字，点击一次按钮，数字加一，然后监听器监听数字的变化，打印出最新值和旧值。
好的.以上案例是vue3监听器的一个简单案例。侦听器像计算属性一样，可以创建多个侦听器。这个没问题，案例就不写了，和上一节多重计算属性的说法一致。如果你不明白，请阅读我的上一篇博客。
我们上面说过，watch API至少需要指定两个参数：source和callback。从上面的案例可以看出，确实有两个。source是被监控的数据，callback是被监控的回调。那么为什么至少是呢？
是的，因为他有第三个参数，——配置对象。
在vue2中，我们打开页面就像让监听器立即执行一样，而不是在数据第一次发生变化时才开始执行。这时候有一个参数叫做immediate。该参数已设置，并将在第一次创建时执行。所以，vue3也可以用。
当刷新并执行上述案例时，发现在点击按钮之前，也就是创建num的时候，并没有执行监听器。因此，添加immediate参数可以让监听器立即执行操作。
模板
差异
h1监视侦听器/h1
El-输入垂直模型=num /
英国铁路公司
英国铁路公司
el按钮type= primary @ click= num num 1/El按钮
/div
/模板
脚本
从“vue”导入{ watch，ref }
导出默认值{
setup() {
const num=ref(1)
手表(编号，(新值，旧值)={
Console.log(新值：，newVal，旧值：，oldVal)
}, {
即时：正确
})
返回{ num，}
}
}
/脚本
样式范围。El-输入{
宽度：100px
}
/风格
我们可以看到，在刷新页面后，控制台在单击按钮将num加1之前有数据要打印。为什么？因为我们将immediate添加到true，所以让监听器立即执行。控制台输出最新的值，也就是我们初始化的值1。旧值不可用，因此它输出undefined。
侦听器监听 reactive
上面说了监听器监听单个数据，也可以用来监听对象的变化。
模板
差异
h1监视侦听器/h1
el-input v-model=num.age /
英国铁路公司
英国铁路公司
el按钮type= primary @ click= num . age num 1/El按钮
/div
/模板
脚本
从“vue”导入{观察、参考、反应}
导出默认值{
setup() {
常数=反应性({
姓名：“我是。”,
年龄：10岁
})
手表(编号，(新值，旧值)={
console.log(newVal，oldVal)
})
返回{ num }
}
}
/脚本
样式范围。El-输入{
宽度：100px
}
/风格
例如，在上面的代码中，我们监听对象num的变化。
看效果。监听整个reactive对象时，里面的属性值发生变化时确实可以被监听器检测到，但是newVal和oldVal的值是新的，默认值是10。点击后新值是11很正常，但旧值不应该是10吗？为什么这里旧值11像新值？
这是毫无疑问的。如果监控整个无功数据，只能回调到最新值，不能得到旧值。
那么问题来了，我会修改年龄属性，我会得到年龄的旧值。我该怎么办？其实我们只需要监测num下的年龄就可以了。先看下面的代码。
模板
差异
h1监视侦听器/h1
el-input v-model=num.age /
英国铁路公司
英国铁路公司
el按钮type= primary @ click= num . age num 1/El按钮
/div
/模板
脚本
从“vue”导入{观察、参考、反应}
导出默认值{
setup() {
常数=反应性({
姓名：“我是。”,
年龄：10岁
})
watch(数字年龄，(新值，旧值)={
console.log(newVal，oldVal)
})
返回{ num }
}
}
/脚本
样式范围。El-输入{
宽度：100px
}
/风格
我们的监控对象直接是num.age，监控age属性值，保存看看效果。
结果可以看到我们什么都没做，监听者直接给我们报了警告。你什么意思？其实我们不能这样直接监控。
当我们需要监控一个对象属性时，不能直接通过object point属性来监控，而是需要传入一个getter方法，也就是arrow函数。下面的代码才是正确的做法。
模板
差异
h1监视侦听器/h1
el-input v-model=num.age /
英国铁路公司
英国铁路公司
el按钮type= primary @ click= num . age num 1/El按钮
/div
/模板
脚本
从“vue”导入{观察、参考、反应}
导出默认值{
setup() {
常数=反应性({
姓名：“我是。”,
年龄：10岁
})
watch(()=num.age，(newVal，oldVal)={
console.log(newVal，oldVal)
})
返回{ num }
}
}
/脚本
样式范围。El-输入{
宽度：100px
}
/风格
好了，保存刷新，我们发现监听器已经停止报错了，当我们点击按钮把年龄加1的时候，就可以平滑的监控年龄的变化，回调最新的值和最后的值。
通过箭头功能，我们可以监控对象属性。
很多人说vue2在听对象的时候需要设置深度听听者。vue3为什么不需要这个？因为他听的是有反应的对象，默认是深度倾听。但是，如果您正在监听数组中深度嵌套的对象或属性更改，您仍然需要将deep选项设置为true。
看看下面的例子，我们监视深度嵌套的时间属性值。其实我觉得没必要。实际上不使用箭头函数也是可以的。但是让我们把它写下来。
模板
差异
h1监视侦听器/h1
El-input v-model= num . todo . time /
英国铁路公司
英国铁路公司
El-button type=" primary " @ click= num . todo . time num . todo . time 1/El-button
/div
/模板
脚本
从“vue”导入{观察值、参考值、反应值、计算值}
导出默认值{
setup() {
常数=反应性({
姓名：“我是。”,
年龄：10岁，
待办事项：{
姓名：“弹吉他”，
时间：1
}
})
watch(()=num，(newVal，oldVal)={
console.log(newVal.todo.time，oldVal.todo.time)
})
返回{ num }
}
}
/脚本
样式范围。El-输入{
宽度：100px
}
/风格
保存代码并刷新。我发现点了之后就不听了。
这时候可以添加深度监控。
模板
差异
h1监视侦听器/h1
El-input v-model= num . todo . time /
英国铁路公司
英国铁路公司
El-button type=" primary " @ click= num . todo . time num . todo . time 1/El-button
/div
/模板
脚本
从“vue”导入{观察值、参考值、反应值、计算值}
导出默认值{
setup() {
常数=反应性({
姓名：“我是。”,
年龄：10岁，
待办事项：{
姓名：“弹吉他”，
时间：1
}
})
watch(()=num，(newVal，oldVal)={
console.log(newVal.todo.time，oldVal.todo.time)
}，{ deep: true })
返回{ num }
}
}
/脚本
样式范围。El-输入{
宽度：100px
}
/风格
加上深度倾听{deep:true}
我们可以看到信息被打印出来了。其实我觉得这个方法有点多余，但是如果用了呢？哈哈哈哈，根据情况选择使用。
但是有一点要注意！深度监听需要遍历被监听对象中的所有嵌套属性，这在大型数据结构中使用时开销很大。所以请只在必要的时候使用，并注意性能。
监听多个参数执行各自逻辑
一开始我不想说，但是我已经被迫依赖莱莱很久了。我简单提一下。
比如我们需要听多个参数，就说两个参数吧。然后，每个参数听完之后，执行逻辑就不一样了。我们可以创建多个监听器分别监听，不用写所有代码，只写关键代码。
//第一个
手表(编号，(新值，旧值)={
console.log(newVal，oldVal)
})
//第二个
手表(()=boy.age，(newVal，oldVal)={
console.log(newVal，oldVal)
})
监听多个参数执行相同逻辑
这意味着无论num改变还是boy.age改变，我执行的代码都是相同的。看下面这个案例：
模板
差异
h1监视侦听器/h1
el-input v-model=num.name /
el-input v-model=num.age /
英国铁路公司
英国铁路公司
El-button type=" primary " @ click= num . todo . time num . todo . time 1/El-button
/div
/模板
脚本
从“vue”导入{观察值、参考值、反应值、计算值}
导出默认值{
setup() {
常数=反应性({
姓名：“我是。”,
年龄：10岁，
待办事项：{
姓名：“弹吉他”，
时间：1
}
})
手表([()=编号名称，()=编号年龄]，(新值，旧值)={
console.log(newVal，oldVal)
})
返回{ num }
}
}
/脚本
样式范围。El-输入{
宽度：100px
}
/风格
保存页面并修改名称和年龄的值。
上面我们以数组的形式传入数据源，返回的回调参数、新值、旧值都以数组的形式返回。新值和旧值数组中的顺序就是我们数据源传入的顺序，可以看出来。
如果不想让他返回数组，可以这样改。其实也差不多。了解一下，根据实际情况有选择地使用就可以了。
模板
差异
h1监视侦听器/h1
el-input v-model=num.name /
el-input v-model=num.age /
英国铁路公司
英国铁路公司
El-button type=" primary " @ click= num . todo . time num . todo . time 1/El-button
/div
/模板
脚本
从“vue”导入{观察值、参考值、反应值、计算值}
导出默认值{
setup() {
常数=反应性({
姓名：“我是。”,
年龄：10岁，
待办事项：{
姓名：“弹吉他”，
时间：1
}
})
手表([()=编号名称，()=编号年龄]，([新名称，新年龄]，[旧名称，旧年龄])={
console.log(新名称、新年龄、旧名称、旧年龄)
})
返回{ num }
}
}
/脚本
样式范围。El-输入{
宽度：100px
}
/风格
保存看看效果。
以上是Vue3中监听器手表的使用教程的详细讲解。更多关于Vue3中监听器观察的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。