Vue.js：组件初始化时如何触发观察器功能 [英] Vue.js: How to fire a watcher function when a component initializes

问题描述

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

Sometimes I need to call some function in response to a change in a data property. But, I also need that function to fire for the initial value of the data property.

当组件初始化时，观察者不会触发，因为技术上观察的属性尚未更改。所以，我最终将函数放在方法对象中，然后在观察器中调用该方法并且已挂载钩。

The watcher does not fire when the component initializes since the property being watched technically hasn't changed yet. So, I end up putting the function in the methods object, and then calling that method in the watcher and the mounted hook.

以下是一个例子：

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>

是否有当组件初始化时，我可以让观察者触发？

Is there a way for me to be able to have the watcher fire when the component initializes?

推荐答案

Vue中的观察者可以选择提供立即值：

在选项中传入 immediate：true 将立即使用当前值触发回调表达式

Passing in immediate: true in the option will trigger the callback immediately with the current value of the expression

在这种情况下，您可以在已挂载 hook：

In this case, you could set a watcher in the mounted hook:

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 对象中为观察者指定立即选项，如此：

You could also specify the immediate option for a watcher in the watch object like so:

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

这篇关于Vue.js：组件初始化时如何触发观察器功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！