평론watch의 촉발 조건은 무엇입니까?

많은 사람들이 워치를 사용하는 것에 익숙하지만, 워치의 진정한 촉발 조건을 아는 사람은 드물다.만약 vue의 원리를 손금 보듯 잘 알지 못한다면watch를 조심스럽게 사용하세요.
예시 1, 다음에watch를 터치합니까?

<script>
 new Vue({
 data() {
  return {
  city: {id: 1, name: 'Beijing'}
  }
 },
 watch: {
  city() {
  console.log('city changed')
  }
 },
 created() {
  this.city = {id: 1, name: 'Beijing'}
 }
 })
</script>

created 방법에서 도시에 대상을 다시 부여했기 때문에 도시의 앞뒤의 지향이 다르다
예 2:

<script>
 new Vue({
 data() {
  return {
  city: {id: 1, name: 'Beijing'}
  }
 },
 watch: {
  city() {
  console.log('city changed')
  }
 },
 created() {
  this.city.name = 'Shanghai'
 }
 })
</script>

트리거되지 않습니다. 왜냐하면created 방법이 실행된 후에city의 지향은 변하지 않기 때문입니다
만약 우리가 이러한 업데이트를 포착하기를 원한다면, 이렇게 코드를 써야 한다.

watch: {
 city: {
  handler: () => console.log('city changed'),
  deep: true
 }
}

옵션 deep를true로 설정하면 vue가 대상 내부의 변화를 포착할 수 있습니다.
다음은 watch의 수조에 대해 토론해 보겠습니다.

<script>
new Vue({
 el: '#body',
 data() {
  return {
   cities: ['Beijing', 'Tianjin']
  }
 },
 watch: {
  cities() {
   console.log('cities changed')
  }
 }
})
</script>

그럼 다음 중 어떤 조작이cities의watch 리셋을 촉발합니까?

this.cities = ['Beijing', 'Tianjin']
this.cities.push('Xiamen')
this.cities = this.cities.slice(0, 1)
this.cities.pop();
this.cities.sort((a,b)=>a.localeCompare(b));
this.cities[0] = 'Shenzhen'
this.cities.splice(0, 1)
this.cities.length = 0

답은 마지막 세 줄만 터치하지 않는다는 것이다.
보충 지식: vue 깊이watch와watch 즉시 리셋
기초용법
검색 상자에 검색 키워드를 입력할 때 자동으로 검색을 터치할 수 있습니다. 이때 검색 상자의change 이벤트를 감청하는 것 외에 우리는watch를 통해 검색 키워드의 변화를 감청할 수 있습니다.

<template>
 <div>
  <span> </span>
  <input v-model="searchVal" />
 </div>
</template>
<script>
export default {
 data() {
 return {
  searchVal: ''
 }
 },
 watch: {
 //  ， 
 searchVal(newValue, oldValue) {
  if (newValue !== oldValue) {
  this.loadData()
  }
 }
 },
 methods: {
 loadData() {
  //  ， 
 }
 }
}
</script>

즉시 촉발
위의 코드를 통해 값이 변할 때 불러오는 데이터를 터치할 수 있습니다. 그러나 페이지를 초기화할 때 데이터를 불러오려면created나 mounted 생명주기 갈고리에서 다시 loadData 방법을 호출해야 합니다.하지만 지금은 이렇게 쓰지 않아도 됩니다. 워치의 즉각적인 트리거 속성을 설정하면 만족할 수 있습니다.

export default {
 watch: {
 //  ， 
 searchValue: {
 //  handler ,   newValue "" ， oldValue  undefined
  handler(newValue, oldValue) {
  if (newValue !== oldValue) {
   this.loadData()
  }
  },
  //  
  immediate: true
 }
 }
}

깊이 감청
사용자가 폼의 임의의 항목을 수정한 후에 폼 페이지가 수정된 상태로 변경되기를 원하는 폼 페이지입니다.만약에 전례에서watch의 작법에 따라 우리는 표의 모든 속성을 감청해야 한다. 너무 번거롭다. 이럴 때watch의 깊이 감청deep를 사용해야 한다

export default {
 data() {
 return {
  formData: {
  name: '',
  sex: '',
  age: 0,
  deptId: ''
  }
 }
 },
 watch: {
 //  ， 
 formData: {
  //  ， ， newValue oldValue 
  handler(newValue, oldValue) {
  //  
  },
  //  deep true, watch 
  deep: true
 }
 }
}

수시로 감청, 수시로 취소, $watch 알아보기
이러한 요구가 있습니다. 폼이 있습니다. 편집할 때 폼의 변화를 감청해야 합니다. 변화가 발생하면 저장 단추를 사용하십시오. 그렇지 않으면 저장 단추가 비활성화됩니다.
이때 새로 추가된 폼에 대해 직접watch를 통해 폼 데이터(formData라고 가정)를 감청할 수 있다. 상기에서 말한 바와 같이 폼을 편집할 때 폼은 데이터를 메워야 한다. 이럴 때formData의 값을 수정하면watch를 터치하여 저장 단추를 사용할지 정확하게 판단할 수 없다.지금 $watch에 대해 알아야 돼요.

export default {
 data() {
 return {
  formData: {
  name: '',
  age: 0
  }
 }
 },
 created() {
 this.$_loadData()
 },
 methods: {
 //  
 $_loadData() {
  setTimeout(() => {
  //  
  this.formData = {
   name: ' ',
   age: 18
  }
  //  ， 
  const unwatch = this.$watch(
   'formData',
   () => {
   console.log(' ')
   },
   {
   deep: true
   }
  )
  //  
  setTimeout(() => {
   this.formData.name = ' '
  }, 1000)
  }, 1000)
 }
 }
}

상례에 의하면 우리는 필요할 때this.$를 통해watch는 데이터 변화를 감청합니다.그러면 어떻게 감청을 취소합니까, 전례에서this.$watch는 하나의 값인 unwatch를 되돌려줍니다. 함수입니다. 취소가 필요할 때 unwatch () 를 실행하면 취소할 수 있습니다
이상의 이 평론 vue.watch의 촉발 조건은 무엇입니까? 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.