Vue.js：组件初始化时如何触发观察程序功能

Question

有时我需要调用一些函数来响应数据属性的变化。但是，我还需要该函数为data属性的初始值触发。

组件初始化时，监视程序不会触发，因为从技术上讲，监视的属性尚未更改。因此，我最终将函数放入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>

当组件初始化时，有没有办法让我的观察者启动？

Answer 1

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;
    }
  }
}