Vue.js：組件初始化時如何觸發觀察器功能

Question

有時我需要調用某個函數來響應數據屬性的更改。但是，我也需要該函數來觸發數據屬性的初始值。

當組件初始化時，監視器不會觸發，因爲在技術上監視的屬性尚未更改。所以，我最終將函數放在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; 
    } 
    } 
}