Why write the global registered component first and then write the vue instance

I found a problem when I was writing the project today, first look at my code below

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件</title>
</head>

<body>
    <div id="app">
        <todo-item></todo-item>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>    
    new Vue({
        el: "#app",
    });
    Vue.component("todo-item", {
        template: "<h1>Hello word!</h1>"
    });
</script>
</html>

After running the code, I found that there was nothing on the browser. The code did not report an error when compiling vscode, and there was no error message in the browser controller. Later, it was found that the instance location and component location were reversed. The following is the correct code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件</title>
</head>

<body>
    <div id="app">
        <todo-item></todo-item>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    Vue.component("todo-item", {
        template: "<h1>Hello word!</h1>"
    });
    new Vue({
        el: "#app",
    });
</script>
</html>

Conclusion: The instantiation of Vue will register the globally registered components into the current instance. After the instantiation is completed, it is useless to register the components again. The same is true for the global registration of custom instructions and filters.

Why write the global registered component first and then write the vue instance

Guess you like