vue中的侦听器

最新推荐文章于 2023-01-15 21:02:54 发布

kjs--

最新推荐文章于 2023-01-15 21:02:54 发布

阅读量1.7k

点赞数 1

分类专栏：前端 vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_43157612/article/details/115639671

版权

前端同时被 2 个专栏收录

147 篇文章 3 订阅

订阅专栏

vue

38 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中的侦听器（watch）功能，包括其概念、定义与使用方法。通过watch，开发者可以监听数据变化并执行相应操作，如在用户名变化时检查其可用性。文章还探讨了watch的immediate和deep选项，用于初始化时触发和深度监听对象属性。此外，对比了watch与计算属性的区别，强调watch的自动触发和业务处理特性，适用于异步场景。

摘要由CSDN通过智能技术生成

vue中的侦听器

一.概念:

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。例如，监视用户名的变化并发起请求，判断用户名是否可用。
侦听器，也称为侦听属性。它可以监听指定的属性值的变化，只要属性值发生了变化就会自动的触发相应的侦听器
相比之下，它比计算属性更通用，特别是在有异步操作的场景下

二.侦听器的定义及使用

1.简单侦听器的定义

使用watch结构定义侦听器
定义为函数的形式,且函数名称必须和你想侦听的属性名称完全一致

watch:{
    // 定义侦听函数
    想侦听的属性名称(新值，旧值){
        // 业务处理
    }
}

2.简单侦听器的使用

不需要人为调用，也不能人为调用
只要侦听的数据发生变化，就会自动的触发
如果想获取到处理结果，一般是将结果赋值给其它的成员

export default {
    data(){
        return {
            name:'',
            value:''
        }
    },
    watch:{
        // 这个名字不能随意，只能和你想侦听的属性名称完全一致
        // 我们不能手动调用
        // 侦听器也没有返回值,所以一般是将处理结果赋值给其它的变量
        name(n,o){
            this.value = n.toUpperCase()
        }
    }
}