Vue watch에서 호출하는 방법의 구덩이를 해결합니다.

이것은 watch가 methods의 방법을 호출할 때 페이지에서 자주 방법을 찾지 못한다는 것을 말한다
이럴 때는watch에서this를 출력해야 하는데,
this가 감싸는 껍질이 여러 겹으로 늘어났는지 봐서 방법을 찾지 못했지만, 나는 왜 때때로 한 겹이나 몇 겹의 껍질에 문제가 생겼는지 아직 이해하지 못했다.
예:
정상적인 상황에서this.functionname () 을 호출할 수 있습니다.
그러나 일부 상황에서 (지금 본인은 원인을 찾지 못했습니다) 컨트롤러에서this를 출력할 때 데이터가 항상 이렇게 감싸져 있는 a{name},name에서 당신의 methods를 한 층 감싸고 있기 때문에 사용 방법은this가 됩니다.a.methods.funtionname()
원인은 아직 찾고 있지만, 해결 방법은 먼저 적어 두어라.
추가 정보: Vue 사용 Best Practice - "created"및 "watch"에서 호출하지 마십시오.
나는 쓸데없는 말을 더 이상 하지 않겠다. 모두들 코드를 직접 보는 것이 좋겠다.

watch: { 
      params: {
        handler: function (val, oldVal) {
          if (val == '1') {
            this.initTableData()
          }
        },
        deep: true
      },
      property: {
        immediate: true,
        handler: function (val, oldVal) {
          this.initTableData()
        },
      },
    },

Vue 개발자들이 자주 범하는 오류 중 하나는 그들이 불필요하게created와watch에서 방법을 호출하는 것이다.그 배후의 생각은 구성 요소가 초기화된 후에watch를 실행하기를 원한다는 것이다.
//잘못된 방법created: () {this.handleChange ()}, methods: {handleChange () {/stuffhappens}, watch () {property () {this.handleChange ()}}
그러나 Vue는 이를 위해 내장된 해결 방안을 제공합니다. 이것은 우리가 자주 잊어버리는 Vue watch 속성입니다.
우리가 해야 할 일은 watch를 약간 재구성하고 두 가지 속성을 성명하는 것이다.
1.handler(newVal,oldVal) - 이것은 우리의 watch 방법 자체입니다.
2.immediate:true-대표가 만약wacth에서 성명한 후에 바로 그 안에 있는handler방법을 실행합니다. 만약false가 우리의 이전 효과와 같이 귀속될 때 실행하지 않습니다.

//  
methods: {
 handleChange() {
  // stuff happens
 }
},
watch () {
 property {
  immediate: true
  handler() {
   this.handleChange()
  }
 }
}

이상 Vue watch에서 호출하는 방법을 해결하는 이 구덩이는 바로 편집자가 여러분께 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.