Vue中侦听器的基本用法示例

编辑: admin 分类: javascript 发布时间: 2022-01-01 来源:互联网
目录
  • 前言
  • 一、侦听器的基本用法
  • 二、侦听器的格式
  • 三、实现刚进入页面就触发监听和深度监听
    • 深度监听
    • 深度监听返回侦听对象子属性的值
  • 最后

    前言

    Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

    一、侦听器的基本用法

    <div id="demo">{{ fullName }}</div>

    var vm = new Vue({
el: '#demo',
data: { 
    firstName: 'Foo', 
    lastName: 'Bar', 
    fullName: 'Foo Bar' }, 
watch: { 
    firstName: function (val) { 
        this.fullName = val + ' ' + this.lastName }, 
    lastName: function (val) { 
        this.fullName = this.firstName + ' ' + val } } })

    这段代码的作用就是监听firstName和fullName，当它们发生变化的时候，就改变fullname的值。

    二、侦听器的格式

    方法格式的侦听器

    • 缺点1：无法在刚进入页面的时候，自动触发！
    • 缺点2：如果侦听的是一个对象，如果属性中的属性发生了变化，不会触发侦听器！

    对象格式的侦听器

    • 好处1：可以实现刚进入页面，自动触发!
    • 好处2：可以实现深度监听，也就是监听对象中的属性是否变化！

    三、实现刚进入页面就触发监听和深度监听

    刚进入页面就触发监听

    通过添加immediate选项来实现

    const vm = new Vue({
    el: '#app',
    data: {
        info: {
            username: 'admin'
        } 
    },
    watch:{
        info:{
            handle(newVal){
                console.log(newVal)
            },
        【文章出处:台湾服务器  转载请保留连接】    // 实现刚进入页面就触发监听
            immediate: true
        }
    }
})

    深度监听

    在上述代码中，当username发生变化时我们是不能监听成功的，因为变化的是对象属性的值，因此需要深度监听，添加deep选项即可

    const vm = new Vue({
    el: '#app',
    data: {
        info: {
            username: 'admin'
        } 
    },
    watch:{
        info:{
            handle(newVal){
                console.log(newVal)
            },
            // 实现刚进入页面就触发监听
            immediate: true,
            // 实现深度监听,只要对象中的任何一个属性变化了，都会触发“对象的侦听”
            deep: true
        }
    }
})

    深度监听返回侦听对象子属性的值

    上述代码中执行结果是打印info这个对象，我们希望打印的username的值，需要加上newVal.username还是比较麻烦的，我们其实可以直接监听并打印变化子属性的值，只需要在要监听的子属性外面加上一层单引号即可：

    const vm = new Vue({
    el: '#app',
    data: {
        info: {
            username: 'admin'
        } 
    },
    watch:{
        'info.username': {
            handle(newVal){
                console.log(newVal)
            }
        }
    }
})

    最后

    ⚽本文介绍了Vue中的侦听器的基本使用以及如何实现深度监听，希望大家阅读完有一定的收获呦~

    到此这篇关于Vue中侦听器基本用法的文章就介绍到这了,更多相关Vue侦听器用法内容请搜索hwidc以前的文章或继续浏览下面的相关文章希望大家以后多多支持hwidc！

    【本文转自：荆州网站优化提供，感恩】
    更多阅读