마운트된 Vue 트리거 감시

마운트된 Vue 트리거 감시

아래에는 탑재될 때 트리거할 vue 구성 요소가 있다.그걸 어떻게 하는 거죠?

Vue.component('check-mark', {
  name: 'check-mark',
  template: `<input :value="value"/>`,
  props: {
    value: {
      type: String,
      required: true,
    },
  },
  mounted: async function () {
    //trigger this.value watch() here
  },
  watch: {
    value: function (value) {
      if (value == 'Y') {
        this.class = 'checked';
      } else {
        this.class = 'unchecked';
      }
    },
  },
});

Vue 2.0을 기점으로, 이제는 와쳐 그 자체로 하는 방법이 있다.immediate: true.
라이프사이클에 와쳐를 실행하는 경우를 위한 사소한 주의사항이 있다. 편집을 참조하십시오.

이 기능을 사용하기 전에 계산된 속성이 아닌 감시자가 필요한지 확인하십시오.

계산된 속성에는 많은 이점이 있으며, 그렇지 않은 경우보다 더 나은 해결책이 되기도 한다.

이 기능은 계산된 속성이 부족한 경우에만 사용해야 한다.

원래 질문의 특정한 경우, 다음에 대한 계산된 속성class확실히 더 좋겠지만, 만약 다른 사람들이 이 게시물을 우연히 마주칠 경우에 대비해서 이것을 게시했는데, 그 경우는 (나처럼) 계산된 부동산이 하지 않을 것이다.

감시자는 단순한 기능 대신 물체가 될 수 있으며, 구성요소가 생성될 때(장착된 것과 다름) 감시자를 실행하라고 vue에게 지시하는 속성을 취한다.

실행된 함수는 다음 위치에 있다.handler재산

따라서, 당신의 예에서, 당신의 감시자는 다음과 같을 수 있다.

watch: {
    value: {
        handler: function(value) {
            if (value == 'Y') {
                this.class = 'checked';
            } else {
                this.class = 'unchecked';
            }
        },
        immediate: true
    },
}

편집

댓글에 '이해성'이라는 지적이 나왔다.immediate옵션이 탑재되었을 때보다는 구성요소가 생성되었을 때 감시자를 트리거한다.간단한 경우, 이것들은 동등한 것으로 볼 수 있다.
감시자의 기능을 탑재할 때 특별히 실행을 원한다면, 단순히 보고 있는 필드를 어떤 더미 값이 되도록 할 수 있다.null또는undefined그리고 나서 실제로 초기화하는 것은mounted()훅. 위의 예는 다음과 같다.

data() {
    return {
        value: undefined
    }
},
mounted() {
    // Set value to actual initial value,
    // which will trigger the watcher
    this.value = 'Y';
},
watch: {
    value(value) {
        if (value == 'Y') {
            this.class = 'checked';
        } else {
            this.class = 'unchecked';
        }
    }
}

이 경우에는 계산된 사람이 더 잘 섬길 수 있다고 생각해.

computed:{
  class(){
    return this.value === 'Y' ? 'checked' : 'unchecked'
  }
}

그러나 정말로 감시자를 사용하고 싶다면, 시계에서 하는 코드를 어떤 방법으로 추상화하여 탑재된 것으로부터 호출한다.

Vue.component('check-mark', {
  name: 'check-mark',
  template: `
    <input :value="value">
  `,
  props: {
    value: {
      type: String,
      required: true,
    },
  },
  data(){
    return {
      class: null
    }
  },
  methods:{
    setClass(value){
      if (value == 'Y') {
        this.class = 'checked';
      } else {
        this.class = 'unchecked';
      } 
    }
  },
  mounted: function () {
    this.setClass(this.value)
  },
  watch: {
    value: function (value) {
      this.setClass(value)
    },
  },
});

참조URL: https://stackoverflow.com/questions/45223000/vue-trigger-watch-on-mounted