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