>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 16200 个阅读者 刷新本主题
 * 贴子主题:  Vue watcher的高级用法 回复文章 点赞(0)  收藏  
作者:flybird    发表时间:2024-03-29 06:37:14     消息  查看  搜索  好友  邮件  复制  引用

立即执行

watch 是在监听属性改变时才会触发,有些时候,我们希望在组件创建后 watch 能够立即执行

可能想到的的方法就是在 create 生命周期中调用一次,但这样的写法不优雅,或许我们可以使用这样的方法

export default {
    data() {
        return {
             msg: ''
        }
    },
    watch: {
        msg: {
            handler: 'sayMsg',
            immediate: true
        }
    },
    methods: {
        sayMsg() {
          console.log(this.msg)
        }
    }
}

深度监听

在监听对象时,对象内部的属性被改变时无法触发 watch ,我们可以为其设置深度监听

export default {
  data() {
    return {
      obj: {
        name: '张三',
        msg: {
          sex: '男',
          age: 18,
          tel: 18888888888
        }
      }
    }
  },
  watch: {
    obj: {
      handler: 'sayMsg',
      // immediate: true
      deep: true
    }
  },
  methods: {
    sayMsg() {
      console.log(this.obj.msg.age)
    }
  }
}

触发监听执行多个方法

export default {
    data: {
        name: 'Joe'
    },
    watch: {
        name: [
            'sayName1',
            function(newVal, oldVal) {
                this.sayName2()
            },
            {
                handler: 'sayName3',
                immaediate: true
            }
        ]
    },
    methods: {
        sayName1() {
            console.log('sayName1==>', this.name)
        },
        sayName2() {
            console.log('sayName2==>', this.name)
        },
        sayName3() {
            console.log('sayName3==>', this.name)
        }
    }
}

watch监听多个变量

watch本身无法监听多个变量。但我们可以将需要监听的多个变量通过计算属性返回对象,再监听这个对象来实现“监听多个变量”

export default {
    data() {
        return {
            msg1: 'apple',
            msg2: 'banana'
        }
    },
    compouted: {
        msgObj() {
            const { msg1, msg2 } = this
            return {
                msg1,
                msg2
            }
        }
    },
    watch: {
        msgObj: {
            handler(newVal, oldVal) {
                if (newVal.msg1 != oldVal.msg1) {
                    console.log('msg1 is change')
                }
                if (newVal.msg2 != oldVal.msg2) {
                    console.log('msg2 is change')
                }
            },
            deep: true
        }
    }
}

程序猿的技术大观园:www.javathinker.net
  Java面向对象编程-->集合(下)
  JavaWeb开发-->Web运作原理(Ⅱ)
  JSP与Hibernate开发-->JPA API的高级用法
  Java网络编程-->客户端协议处理框架
  精通Spring-->计算属性和数据监听
  Vue3开发-->组合(Composition)API
  卫琴姐姐最新制作的Vue3视频教程,强烈推荐!!!
  聊聊Nodejs中的模块化和事件循环
  vue3-Composition-API的用法
  JS中==和===的区别
  Vue 3新特性RFC-0026异步组件的全新API
  Vue自定义数据验证指令
  Vue路由传递参数详细说明
  Vue经典面试题: Vue.use和Vue.prototype.$xx有血缘关系吗? -
  vue封装翻转卡片效果
  理解前后端分离的概念
  一看就懂得移动端rem布局、rem如何换算
  HTML5 内联 SVG
  JavaScript 的字符串以及处理方法
  JavaScript 语法大全
  非常实用的CSS样式
  更多...
 IPIP: 已设置保密
树形列表:   
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。