Vuejs 组件不会立即渲染

Question

我有一个 vue 应用和一个组件。该应用程序只需输入并更改下面显示的名称，当有人更改名称时，以前的名称将保存在一个数组中。我有一个自定义组件来显示不同的列表项。但是，组件列表项不会立即呈现。相反，只要我在输入中键入一个字母，组件 otems 就会呈现。是什么赋予了？为什么这不会立即呈现列表项？

(function(){
var app = new Vue({
    el: '#app',
    components: ['name-list-item'],
    data: {
        input: '',
        person: undefined,
        previousNames: ['Ian Smith', 'Adam Smith', 'Felicia Jones']
    },
    computed: {
        politePerson: function(){
            if(!this.person) {
                return 'Input name here';
            }
            return "Hello! To The Venerable " + this.person +", Esq."
        }
    },
    methods: {
        saveInput: function(event){
            event.preventDefault();
            if(this.person && this.previousNames.indexOf(this.person) === -1) {
                this.previousNames.push(this.person);
            }
            this.setPerson(this.input);
            this.clearInput();
        },
        returnKey: function(key) {
            return (key + 1) + ". ";
        },
        clearInput: function() {
            this.input = '';
        },
        setPerson: function(person) {
            this.person = person;
        }
    }
});

Vue.component('name-list-item', {
    props: ['theKey', 'theValue'],
    template: '<span>{{theKey}} {{theValue}}</span>'
});
})()

这是我的 HTML。

<div id="app">
        <div class="panel-one">
            <span>Enter your name:</span>
            <form  v-on:submit="saveInput">
                <input v-model="input"/>
                <button @click="saveInput">Save</button>
            </form>
            <h1>{{politePerson}}</h1>
        </div>
        <div class="panel-two">
            <h3>Previous Names</h3>
            <div>
                <div v-for="person, key in previousNames" @click='setPerson(person)'><name-list-item v-bind:the-key="key" v-bind:the-value="person" /></div>
            </div>
        </div>
</div>

Answer 1

在实例化 Vue 之后才定义组件，因此在第一次更新之前它不会应用组件。