watch 속성

watch 속성은 νŠΉμ • λ°μ΄ν„°μ˜ λ³€ν™”λ₯Ό κ°μ§€ν•˜μ—¬ μžλ™μœΌλ‘œ νŠΉμ • λ‘œμ§μ„ μˆ˜ν–‰ν•΄μ£ΌλŠ” μ†μ„±μž…λ‹ˆλ‹€.

watch μ½”λ“œ ν˜•μ‹

watch μ†μ„±μ˜ κ΅¬ν˜„ μ½”λ“œ ν˜•μ‹μ€ λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

new Vue({
  data() {
    return {
      message: 'Hello'
    }
  },
  watch: {
    message: function(value, oldValue) {
      console.log(value);
    }
  }
})

μœ„ μ½”λ“œλŠ” messageλΌλŠ” 데이터에 watch 속성을 μ§€μ •ν•œ μ½”λ“œμž…λ‹ˆλ‹€. message의 데이터가 λ³€ν•  λ•Œλ§ˆλ‹€ watch 속성에 μ •μ˜ν•œ message ν•¨μˆ˜κ°€ μ‹€ν–‰λ˜λ©΄μ„œ μ½˜μ†”μ— λ³€ν•œ 데이터λ₯Ό 좜λ ₯ν•©λ‹ˆλ‹€.

watch μ‹€μš© 문법

μ•žμ˜ μ˜ˆμ‹œμ—μ„œ μ‚΄νŽ΄λ³Έ 기본적인 문법 말고도 μ•„λž˜μ™€ 같이 λ‹€μ–‘ν•œ ν˜•νƒœλ‘œ watch 속성을 κ΅¬ν˜„ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

1. watch 속성에 λ©”μ„œλ“œ ν•¨μˆ˜λ₯Ό μ—°κ²°

watch λŒ€μƒ 속성에 ν•¨μˆ˜λ₯Ό μ—°κ²°ν•˜λŠ” λŒ€μ‹  λ©”μ„œλ“œ ν•¨μˆ˜λ₯Ό μ—°κ²°ν•  수 μžˆμŠ΅λ‹ˆλ‹€.













Β 



new Vue({
  data() {
    return {
      message: 'Hello'
    }
  },
  methods: {
    logMessage() {
      console.log(this.message);
    }
  },
  watch: {
    'message': 'logMessage' // λŒ€μƒ 속성과 λ©”μ„œλ“œ ν•¨μˆ˜λ₯Ό 맀칭
  }
})

2. ν•Έλ“€λŸ¬μ™€ 초기 μ‹€ν–‰ μ˜΅μ…˜

watch λŒ€μƒ 속성에 μ•„λž˜μ™€ 같이 handler()와 immediate 속성을 μ •μ˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€.









Β 
Β 
Β 
Β 




new Vue({
  data() {
    return {
      message: 'Hello'
    }
  },
  watch: {
    'message': {
      handler(value, oldValue) {
        console.log(value);
      },
      immediate: true // μ»΄ν¬λ„ŒνŠΈκ°€ μƒμ„±λ˜μžλ§ˆμž μ¦‰μ‹œ μ‹€ν–‰
    }
  }
})