Vue.js (15) watch

Devcury·2022년 9월 9일
4

vue.js

목록 보기
17/27

watch 역시 computed처럼 감시를 하는 메소드 묶음이다. 해당 변수를 감시하고 변화가 되면 해당 메소드를 실행한다.

먼저 watch를 선언하기 위해서는 data에 있는 변수명 그대로 watch에 선언하면 된다. 나머지는 로그처럼 진행이 된다.
위의 형태는 간단한 watch이다.

다음은 object안에 있는 값의 변화를 감지하는 법이다.
이러한 형태로 감지가 가능하다.

다음은 배열 같은 주소값이 변하지 않는 데이터들에 대하여 알아보자. 위의 array는 위에서 봤던 일반적인 watch 메소드에서는 감지되지 않는다. 위처럼 deep 속성을 true로 넣어주어야 감지할 수 있다.

여기서 또 주목할 점은 old value나 value나 값이 같다는 점이다. 원래 old value는 이전의 상태를 보여주지만 배열은 primitive가 아닌 reference 형태이기 때문에 이전의 값이나 현재 값이나 같다.

  • primitive와 reference의 차이를 아는 사람이라면 바로 이해가 되겠지만 그 내용을 이해하지 못한 상태라면 primitive와 reference의 차이가 무엇인지에 대하여 학습이 필요하다고 생각된다. 해당 내용은 javascript만의 문제가 아니라 대다수의 프로그래밍 언어에 사용되는 개념이기 때문에 꼭 학습하도록 하자.

다음은 immediate 옵션인데, 간단하게 설명하자면 즉시 실행이라고 보면 될 것 같다. 앞서 본것처럼 watch는 해당 값이 변화해야 실행되는데 가끔 값이 변환되지 않더라도 바로 한번 실행되었으면 하는 내용들이 있다. 그럴 경우 사용하는 옵션이다.

profile
잘하고 싶은 개발자

0개의 댓글