vue监听器原理,vue的计算属性和侦听器区别
随着Vue的使用越来越多，Vue的其他知识点也逐渐被大家所熟悉。这一次，监视侦听器用于页面上的计算。本文主要介绍了Vue中监听器基本用法的相关信息，有需要的可以参考一下。
目录
前言一、听者的基本用法二。听众III的格式。一进入页面就触发倾听和深度倾听。深度监听返回监听对象的子属性的值。最后
前言
Vue通过watch选项提供了一种更通用的方式来响应数据的变化。当数据更改时需要执行异步或昂贵的操作时，这种方法最有用。
一、侦听器的基本用法
div id=demo{{ fullName }}/div
var vm=new Vue({
埃尔： #演示，
数据：{
名字：“福”，
姓氏：“酒吧”，
全名： Foo Bar }，
观察：{
名字：函数(值){
this . full name=val this . last name }，
姓氏：函数(值){
this . full name=this . first name val } })
这段代码的目的是侦听firstName和fullName，并在它们发生变化时更改fullname的值。
二、侦听器的格式
的格式的侦听器
缺点：第一次进入页面不能自动触发！
缺点：如果你在监听一个对象，如果属性中的属性发生变化，监听器不会被触发！
对象格式的侦听器
1:刚进入页面就可以自动触发！
2:可以实现深度监控，即监控对象中的属性是否发生变化！
三、实现刚进入页面就触发监听和深度监听
一进入页面就触发监控
这是通过添加immediate选项实现的。
const vm=new Vue({
埃尔： #app ，
数据：{
信息：{
用户名：“管理员”
}
},
观察：{
信息：{
句柄(新值){
console.log(newVal)
},
//一进入页面就触发监控。
即时：正确
}
}
})
深度监听
在上面的代码中，当用户名改变时，我们无法成功监控，因为改变的是对象属性的值，所以需要深度监控。只需添加深度选项。
const vm=new Vue({
埃尔： #app ，
数据：{
信息：{
用户名：“管理员”
}
},
观察：{
信息：{
句柄(新值){
console.log(newVal)
},
//一进入页面就触发监控。
即时：真的，
//实现深度监听，每当对象中的任何属性发生变化，都会触发“对象监听”。
深：真的
}
}
})
深度监听返回侦听对象子属性的值
上面代码的执行结果是打印对象信息。把newVal.username加到我们要打印的用户名上比较麻烦。我们实际上可以直接监控和打印被改变的子属性的值，只需要在要监控的子属性外面加一层单引号：
const vm=new Vue({
埃尔： #app ，
数据：{
信息：{
用户名：“管理员”
}
},
观察：{
信息用户名:{
句柄(新值){
console.log(newVal)
}
}
}
})
最后
本文介绍了监听器在Vue中的基本用途以及如何实现深度监听。希望你看完会有所收获~
关于监听器在Vue中的基本用法的这篇文章就到这里了。更多关于Vue中监听器用法的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。