vue的计算属性和侦听器区别,监听器vue
本文主要介绍Vue基金会的监听器，有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
监听器监听器在vue中的用法是什么？vue listener-watch vue listener-深度聆听，立即总结。
vue中什么是侦听器
在开发中，我们在数据返回的对象中定义数据，这个数据可以通过插值语法绑定到templat。
当数据发生变化时，模板中绑定的数据会自动更新以显示最新的数据。但是，这种变化是通过自动监听模板中数据的值来转换的。
在某些情况下，我们希望监视代码逻辑中某些数据的变化，然后我们需要使用监听器监视。
官方定义:Vue提供了一种更通用的方法来通过观察选项响应数据的变化。当数据更改时需要执行异步或昂贵的操作时，这种方法最有用。
对象，关键是要侦听的响应属性。property——包含数据或计算属性，值是对应的回调函数。该值也可以是方法名，或者是带有额外选项的对象。实例化时将调用$watch()。有关深度、立即和刷新选项的更多信息，请参见$watch。
侦听器的用法
选项：手表
类型：{[key: string]: string 函数对象数组}
侦听器watch的配置选项：
默认情况下，观察器只监听数据的引用更改，不会响应数据内部属性的更改：
这时候我们可以用一个选项deep进行更深层次的倾听；另一个属性是，我们希望第一个立即执行：此时，我们使用immediate选项；此时不管后面的数据有没有变化，被拦截的函数都只会执行一次；
data的内容：
data() {
返回{
信息：{
名称：“cgj”
}
}
}
观察：{
信息：{
处理程序(新值，旧值){
console.log(新值，旧值)
}
深：真的，
即时：真的，
}
}
另一个在Vue3文档中没有提到，但是在Vue2文档中提到的是监听对象的属性：
info.name: function(newValue，oldValue) {
console.log(新值，旧值)
}
另一种方法是使用$watch的API:
具体的$watch，可以查看官方API(几种方式):instance method Vue.js
const app=createApp({
data() {
返回{
答：1，
乙：2，
丙：{
d: 4
},
e: 5，
外宾：6岁
}
},
观察：{
//侦听顶级属性
一个(瓦尔，老瓦尔){
console.log(`新：${val}，旧：${oldVal} `)
},
//字符串方法名
b:“某种方法”，
//当任何被侦听对象的属性发生更改时，都会调用此回调，无论它的嵌套有多深。
丙：{
处理程序(val，oldVal) {
console.log(c已更改)
},
深：真的
},
//侦听单个嵌套属性
c.d: function (val，oldVal) {
//做点什么
},
//这个回调会在监听开始后立即调用。
e: {
处理程序(val，oldVal) {
console.log(e changed )
},
即时：正确
},
//可以传入回调数组，它们会被逐个调用
女：[
手柄1 ，
函数句柄2(val，oldVal) {
console.log(handle2已触发)
},
{
处理程序：函数handle3(val，oldVal) {
console.log(handle3已触发)
}
/* .*/
}
]
},
方法：{
someMethod() {
console.log(b已更改)
},
handle1() {
console.log(“句柄1已触发”)
}
}
})
const VM=app . mount(# app)
vm.a=3 //=新：3，旧：1
vue侦听器-watch
目标：可以监听数据/计算属性值的变化。
语法：
观察：{
正在侦听的属性名(newVal，oldVal){
}
}
例子代码：
模板
差异
输入类型=text v-model=name
/div
/模板
脚本
导出默认值{
data(){
返回{
名称：“”
}
},
//Target:检测到名称值的更改。
/*
语法：
观察：{
变量名(newVal，oldVal){
//这里会自动触发变量名对应值的改变。
}
}
*/
观察：{
//newVal:当前最新值
//oldVal:最后一个矩值
名称(新值，旧值){
console.log(newVal，old val)；
}
}
}
/脚本
风格
/风格
小结:如果要监听属性更改，可以使用监听属性观察器。
vue侦听器-深度侦听和立即执行
目标：可以监听数据/计算属性值的变化。
语法：
观察：{
正在侦听的属性名(newVal，oldVal){
}
}
例子代码：
模板
差异
输入类型=text v-model=user.name
输入类型=text v-model=user.age
/div
/模板
脚本
导出默认值{
data(){
返回{
用户：{
名称： ，
年龄：0岁
}
}
},
//Target:侦听对象
/*
语法：
观察：{
变量名(newVal，oldVal){
//这里会自动触发变量名对应值的改变。
},
变量名：{
处理程序(newVal，oldVal){
},
Deep: true，//深度监听(对象内部层的值发生变化)
Immediate: true //立即监听(当处理程序打开网页时监听一次)
}
}
*/
观察：{
用户：{
处理程序(newVal，oldVal){
//用户中的对象
console.log(newVal，old val)；
},
深：真的，
即时：正确
}
}
}
/脚本
风格
/风格
小结:立即立即监听、深度监听、处理程序固定方法触发
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。