Vue.js：如何在组件初始化时触发观察器函数

Posted 2023-02-23

【中文标题】Vue.js：如何在组件初始化时触发观察器函数

【英文标题】：Vue.js: How to fire a watcher function when a component initializes

【发布时间】：2018-01-03 08:59:06

【问题描述】：

有时我需要调用一些函数来响应数据属性的变化。但是，我还需要该函数来触发 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>

有没有办法让我在组件初始化时触发观察者？

【参考方案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;
    
  

【讨论】：

请注意，第二个解决方案将在创建组件时触发，但在挂载之前