Vue.js: 구성 요소가 초기화될 때 감시기 기능을 작동시키는 방법

Vue.js: 구성 요소가 초기화될 때 감시기 기능을 작동시키는 방법

때때로 나는 데이터 속성의 변화에 대응하여 몇 가지 기능을 호출할 필요가 있다.하지만 데이터 속성의 초기 가치를 위해 발사할 수 있는 기능도 필요하다.

기술적으로 관찰되고 있는 부동산이 아직 바뀌지 않았기 때문에 부품이 초기화될 때 감시자는 발포하지 않는다.그래서 결국 그 기능을 그 안에 넣게 된다.methods목적어, 그리고 감시자와 그 방법을 부르는 것.mounted갈고리를 걸다

예를 들면 다음과 같다.

new Vue({ 
  el: '#app',
  data() {
    return {
      selectedIndex: 0,
    }
  },
  methods: {
    focusSelected() {
      this.$refs.input[this.selectedIndex].focus();
    }
  },
  watch: {
    selectedIndex() {
      this.focusSelected();
    }
  },
  mounted() {
    this.focusSelected();
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <div v-for="i in 4">
    <input ref="input"/>
    <button @click="selectedIndex = (i - 1)">Select</button>
  </div>
</div>

부품이 초기화될 때 감시자에게 발포할 수 있는 방법이 있을까?

Vue의 감시자들은immediate값:

합격immediate: true옵션에서 표현식의 현재 값으로 콜백을 즉시 트리거

이럴 경우 방심원(방심원)을 설정할 수 있다.mounted훅:

new Vue({ 
  el: '#app',
  data() {
    return {
      selectedIndex: 0,
    }
  },
  mounted() {
    this.$watch('selectedIndex', (i) => {
      this.$refs.input[i].focus();
    }, { immediate: true });
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <div v-for="i in 4">
    <input ref="input"/>
    <button @click="selectedIndex = (i - 1)">Select</button>
  </div>
</div>

---

또한 다음을 지정할 수 있다.immediate에서 감시자를 위한 옵션watch이와 같은 목적:

watch: {
  foo: {
    immediate: true,
    handler(value) {
      this.bar = value;
    }
  }
}

참조URL: https://stackoverflow.com/questions/45354027/vue-js-how-to-fire-a-watcher-function-when-a-component-initializes