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

Watchers in 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>

---

您还可以为 watch 对象中的观察者指定 immediate 选项，如下所示：

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