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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。