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: [phone]
        }
      }
    }
  },
  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
        }
    }
}