• vue中watch监听的高阶使用


    watch高阶使用

    立即执行

    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
            }
        }
    }
    
    
  • 相关阅读:
    第十四周学习进度
    团队十日冲刺17
    团队十日冲刺16
    找水王
    搜狗输入法评价
    团队十日冲刺15
    团队十日冲刺14
    团队十日冲刺13
    团队十日冲刺12
    团队十日冲刺11
  • 原文地址:https://www.cnblogs.com/wangqingjiu/p/12836369.html
Copyright © 2020-2023  润新知