# watch

hosb

현재 프로젝트에서 Vue3를 사용하고 있다. 다음에 또 활용할 수 있게 watch 기능에 대해서 작성한다. > 환경은 node.js, Vue3, setup, Composition API를 사용한다 아래와 같이 foo의 값의 변경이 일어날 때 변경될 값 newValue의 값을 활용할 수 있다. >#### 단일 ref >#### getter 나의 경우 부모 컴포넌트의 값을 자식 컴포넌트로 전달할 일이 있어 watch로 props를 감지하도록 활용했다. 출처 : https://ko.vuejs.org/guide/essentials/watchers.html#basic-example

nacho

Watch Computed 차이점 봐도 봐도 나는 차이점을 명확하게 모르겠어서 한 번 정리해보려고 한다. 👉아래의 글들을 정리하면서 최종 결론낸 것은 > : 보통의 경우에는 computed가 좋다. : 하지만 최종 응답, 그러니깐 엔터가 쳐진 순간이라고 보면 이해가 될 것인데 　답을 적을 때까지 중간 상태를 설정할 수 있기 때문에 그 경우에는 watch가 좋다! 🤔흠 velog에서 작성 중에 임시저장이 계속 되는 것도 watch가 아닐까? 글을 적다가 중간 중간 저장중이라는 것이 나오는데, 계속 내가 글을 쓰는지 지켜보고 있고, 키보드를 두드리지 않을 때 감지해서 임시저장을 해주는데 이럴 때 watch를 사용하는 것 같다! 🌞혹시 제가 생각한 차이점이 틀리다면 댓글로 알려주세요🌞 🔷 챗 GTP 답변 Comput

qwe8851

method는 주로 두가지 경우에 사용 데이터 바인딩 이벤트 바인딩 데이터 바인딩을 위해 메서드를 사용하는 경우 즉, 중괄호 사이에서 메서드를 사용해 템플릿에서 vue 인스턴스로 아웃소싱하는 경우 메서드는 컴포넌트 리렌더리어 주기에 맞춰 매번 실행됨 그러므로 변동 사항이 생기면 템플릿을 재평가하고 해당 템플릿에 호출된 모든 메서드를 다시 호출하게 됨 그래서 이벤트 바인딩 시에는 method를 주로 사용하게 되는것 computed(연산)프로퍼티는 데이터 바인딩에만 쓰임 이벤트 바인딩엔 알맞지 않음 게다가 연산 프로퍼티는 다른 데이터를 기반하는 데이터를 가져오기에 유용하여 의존하는 데이터가 바뀔 경우에만 vue에 의해 재평가하거나 재실행 된다는 장점이 있음 즉, computed는 디펜덴시로 내부에 쓰인 데이터가 변경될 경우에만 재실행 (리엑트 useEffect와 유사한듯) watch(감시자)는 **템플릿에 직접 사용하지 않음

songinho96

계산된 속성은 계산되어 파생된 값을 선언적으로 사용할 수 있게 함. 그러나 상태 변경에 대한 반응으로 '사이드 이펙트'(DOM을 변경하거나 비동기 작업의 결과를 기반으로 다른 상태를 변경하는 것)을 수행해야 하는 경우가 있음. Composition API를 사용하는 경우, watch 함수를 사용하여 반응형 속서잉 변경될 때마다 함수를 실행 할 수 있음. 감시 대상 타입 watch 의 첫 번째 인자는 다양한 유형의 반응형 "소스"일 수 있음. 참조(개선된 참조 포함), 반응형 객체, 게터 함수 또는 여러 소스의 배열이 될 수 있음. 반응형 객체의 속성을 감시할 수는 없음 대신 getter를 사용하면 가능 깊은 감시자 반응형 객체에서 watch()를 직접 호출하면 암시적으로 심층 감시자가 생성되며, 콜백은 중첩된 모든 변경에서 트리거됨. > newValue = 1, oldValue = 1 이 됨. 반응형 객체를 반환하는 게터와 구별해야

dudwns

computed 아래 예제는 count * 2 라는 표현식이 4번 중복되어 실행되고 있다. 지금은 간단한 표현식이지만 복잡한 표현식일 경우 매우 비효율적이게 된다. 해당 표현식을 함수로 만들어도 함수가 4번 호출되는 건 마찬가지므로 역시 비효율적이다. 이럴 때 사용하는 것이 Computed다. computed는 함수가 아니고 계산된 데이터다. 따라서 이중 중괄호 내부에는 실행을 의미하는 ()는 작성하지 않는다. computed는 캐싱 기능을 가지고 있기 때문에 첫 번째 double을 출력할 때 이미 해당 데

heina-effect

Vu2에서 watch함수를 사용할 때 시계는 watch, Vue2에서 조건감시자 사용법 바로 가기 Vue3 + script setup에서 사용하기 이전에는 Vue2를 사용하여 개발을 하였는데, 이번 프로젝트는 Vue3를 사용하고 있다. 사용법은 크게 차이가 없으나, watch 함수를 반응형 데이터ref와 reactive와 사용할 때 사용법이 달라 정리하려고 한다. Vue3에서 watch 함수 기본 사용법 나는 로그인시 에러가 발생하면 q-input의 rules를 사용하기 때문에 error 처리하여 인풋박스 하단에 에러메세지를 보여주도록 유효성검사를 하였다. (quasar는 유효성 검사를 조금 더 쉽게 사용할 수 있는데 이건 나중에 추가로 작성하겠음) 그러나 inp

syncstar

1. watch props emit watch 사용법 watchEffect PROPS EMIT - 즉 자식의 함수를 부모에서 끌어와서 실행한다고 보면 됨 EMIT 다른 방법

hyunj9956

문제) state.categoryList, state.genderList값이 변할때는 즉각 데이터를 읽어오는데 state.brandIdList값이 변할때는 데이터를 읽어오지 못함 해결) watch() 함수가 작동하지 않는 이유는 state.brandIdList 값을 직접 수정하지 않고 toggleBrandId() 함수를 통해 값을 변경하고 있기 때문 Vue의 반응형 시스템은 배열의 메서드 중 일부(예: push(), pop(), splice() 등)를 감지할 수 없으므로, Vue는 state.brandIdList 배열의 변경을 감지하지 못함 따라서 toggleBrandId() 함수에서 state.brandIdList 배열의 값을 직접 변경하는 대신, 새로운 배열을 생성하고 이를 state.brandIdList에 할당하면 state.brandIdList 배열의 변경을 감지할 수 있게 된다.. 그런데 너무 비효율적인것 아닌지..

moon-tree

◆ 단방향과 양방향 연결 단방향 출력 데이터가 변하면 자동으로 바뀌어서 출력 화면에서 값을 변화시킬 방법은 없음 계산식도 가능 양방향 연결 Vue의 데이터를 변화시킬 수 있는 연결 v-model 속성을 사용하여 데이터를 지정 입력창(input, select, textarea)에서만 사용 가능 한글은 IME 방식이어서 바로 반영이 안된다. (v-on:input="text = $event.targer.value" : 추가 입력이 필요하다.) ◆ VueJs의 데이터 설정 영역 설명

tygerhwang

스톱워치(Stopwatch) 앱 만들기 flutter_bloc | Flutter Package equatable | Dart Package Count App으로 알아보는 상태관리 - Cubit편 Equatable 사용해보기 1편 Equatable 사용해보기 2편 이번 글에서는 간단한 스톱워치 앱을 만들어 보려고 한다. 앱 개발을 시작하는 개발자 분들이 초기에 만들기 좋은 앱으로 Todo 앱, 알림 앱, 스톱워치, 메모 앱

androidzoro

Xcode 14부터 WatchKit App 및 WatchKit App Extension이 단일 대상으로 결합됩니다. https://developer.apple.com/documentation/xcode-release-notes/xcode-14-release-notes 이에따라 기존 App 과 Extension으로 분리되어있던 대상을 하나의 대상으로 합치는 작업을 하겠습니다. Xcode -> Editor -> Validate Setting 선택합니다. 팝업메뉴에서 Rename Embed App Extensions를 사용합니다. 해당기능을 사용하면 Extension Target이 사라집니다. watch -> Build Settings WatchKit Extension De

art11010

Watch 데이터 변경에 반응하여 실행됨 비동기식 또는 시간이 많이 수용되는 조작을 수행하려는 경우 가장 유용함 위 같은 경우 비동기 연산(API 엑세스)를 수행하고, 연산의 수행 횟수를 제한하고 최종 응답을 얻을 때까지 중간 상태를 설정할 수 있다. (computed는 불가능) Computed vs Watched Computed 계산해야 하는 목표 데이터를 정의하는 방식으로 소프트웨어 공학에서 얘기하는 **'[선언형 프로그래밍](https://ko.wikipedia.org/wiki/%EC%84%A0%EC%96%B8%ED%98%95_%ED%94%84%EB%A1%9C%EA

jinic

body 태그가 있어야하고 스크립트를 browser-sync 스크립트 다음으로 삽입해야 함 https://stackoverflow.com/questions/32764850/browsersync-not-reloading-all-pages 그렇지 않으면 snippetOptions 으로 커스텀 가능 함 https://browsersync.io/docs/options/#option-snippetOptions https://fresh-mint.tistory.com/entry/%EB%A1%9C%EC%BB%AC-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%84%9C%EB%B2%84-browser-sync-gulp-sass-scss-%EC%88%98%EC%A0%95%ED%95%98%EA%B3%A0-%EB%B0%94%EB%A1%9C-%ED%99%95%EC%9D%B8%ED%95%98%EC%9E%90

minsu2344

computed 연산 결과를 캐싱하여 re-render 될 때마다 불필요한 연산 줄임 templete 연산 위처럼 작성하면 state나 props 변경으로 렌더링 일어날 때마다 연산이 발생 computed 연산 message가 바뀌지 않으면 캐싱된 연산을 렌더링 때 사용 methods 연산 methods에서 연산을 하면 결과는 같으나 함수는 렌더링 때마다 실행되어 캐싱 이득을 취할 수 없음 watch state나 props를 감시하여 값 변경될 때의 행동 지정 watch로 fullname 만들기 watch 프로퍼티로 변화 감시를 원하는 state나 props 값 넣어 함수 생성 매개변수는 변경된 값을 가리킴 first last 변화 감지하여 fullname 생성 사실 위 방법보단 computed가 더 좋음 computed로 fullname 만들기 state에서 fullname 제거 com

heina-effect

시계는 와치...Watch watch object 사용 방법 watch는 감시자 역할을 하고 있으며, 설정한 데이터가 변화할 때 마다 watcher도 실행이 된다 `watch : {감시할데이터(){}}` 코드 예시 : `month` 데이터가 변할 때 마다 watcher도 실행 된다. > 💡Tip) input type=range 를 주어서 값을 제한줘도 된다. 이에 대한 자세한 설명은 타블로그를 참고 부탁드립니다... this.$watch()를 사용하게 된 이유 내가 처음 데이터를 셋팅해 놓은것은 [현재 날짜로부터 한달전] ~ [현재 날짜] 이기 때문에 이 날짜 안에 선택된 데이터들만 보였다. 그러나 기획에서 처음에는 [현재 날짜] ~ [현재 날짜] 로만 표시되고 데이터의 기간 필터는 걸지 않았으면 좋겠다고 하셨다. > 요약 : 캘린더의 특정 기간을 선택하게 되었을 경우에'만' 필터가 걸려서 데이터가 변경되도록 하고 싶었다. 처음에 셋팅

babypig

📌 구현목표 vuedraggable 을 이용한 table 순번 변경하기 ⚙️ 기본구조 props로 tabledData를 받아와 tableData를 cloneDeep 으로 객체 복사를 해주고 시작, ⛔ 주의할점 - vuedraggable의 기본 구조에 들어갈 template가 아닌 다른 template가 존재하면 제대로 된 값을 반환하지 못함, 데이터의 유무를 판단할 시에는 없는 데이터는 따로 빼서 분기처리해줘야함, 1. Object의 내용이 변경됨을 감지하기 위한 Watch를 사용하여 감시 대상 데이터가 변했을 때, 처리 로직을 작성 (deep: true) 2. change 이벤트 작성 vuedraggable 의 moved: 배열 내에서 이동된 요소의 정보를 포함합니다. newIndex: 이동된 요소의 현재 인덱스 oldIndex: 이동된 요소의 이전 인덱스 element: 이동된 요소 이벤트 속성으로 list Index 변경 확인

younghwan

watch 명령어를 통해서 원하는 명령어의 결과를 원하는 시간(초) 주기로 리프레시 하여 결과를 볼 수 있다. 단순히 를 하게되면 원하는 대로 동작하지 않는다. 이럴때는 를 해줘야 의도한대로 파이프 라인을 사용할 수 있다. [ref] https://www.sharedit.co.kr/posts/2000

poiuyy0420

watch v-watch 는 데이터나 수식의 값이 변할 때 어떤 처리를 하고 싶을때 사용한다. 대부분의 경우 computed 속성이 더 적절하지만, 사용자 지정 감시자(watcher) 가 필요한 경우도 있다. 이것이 Vue 가 watch 옵션을 통해 데이터의 변경에 대응하는 방법을 제공하는 이유다. 이는 데이터 변경에 대한 응답으로 비동기 혹은 비용이 많이 드는 작업을 수행하려는 경우가 가장 유용하다. 입력문자 감지 타이머 만들기 TweenMax watch 옵션은 `에니메

poiuyy0420

computed computed는 데이터의 값을 계산하여 쓸 때는 사용한다. HTML에 값을 나타내는 이름으로 산출 프로퍼티를 쓰면 무엇을 하려는지 보기만 해도 알 수 있다. {{ texIncluded }} 라고 쓰여 있으면 세금포함 금액이 표시되노 있구나 하고 보는 것만으로도 예상이 가능하다. computed 속성 대신에 메서드와 동일한 함수를 정의할 수 있다. 최종 결과를 위해, 두가지 접근 방식은 정확히 동일하다. 그러나 차이점은 computed 속성은 반응형(reactive) 종속성에 기반하여 캐시된다는 것 이다. computed 속성은 반응형 종속성 중 일부가 변경된 경우에만 재평가 된다. 즉, 데이터가 변경되지 않는다면 computed 속성에 대해 여러번 접근하더라도 함수를 다시 실행할 필요없이 이전에 계산된 결과를 즉시 반환합니다. ![](https://velog.velcdn.com/images/poiuyy0420/post/19418259-8e9c-

yeoonnii

사용자가 만든 감시자 = watch 속성! > * Vue에서 watch 속성을 사용하여 데이터 변경을 감지하고 반응 할 수 있으며, 데이터 변경 결과에 따라 추가 반응 및 데이터 조작도 가능하다. API 엑세스(비동기 연산)을 수행하고 최종응답을 얻을 때 까지 중간 상태를 설정 할 수도 있다. 비동기식 이거나 시간이 많이 소요되는 작업을 수행하려고 하는 경우 watch를 유용하게 사용할 수 있다. watch 속성의 기본 사용법 💡 watch가 변경값(=새로운 값, 이전값)을 가지지 않는 경우 아래와 같은 형태로 사용한다. watch 속성의 option 1. immediate immediate : true : 컴포넌트가 생성되자마자 즉시 실행된다. > 페이지를 처음 로드할 때 데이터 값의 변화가 없으므로 watch가 실행되지 않는다 하지만 watch를 사용해야만 데이터를 가져올 수 있는 경우, 페이지를