Vue的渲染方式（如何將組件添加到實例控制區域）

1.Vue渲染組件的兩種方式

1.1先定義註冊組件, 然後在Vue實例中當做標籤來使用

<div id="app">
   <one></one>//在實例中當做標籤使用
</div>
<template id="one">
    <div>
        <p>我是組件22</p>
    </div>
</template>

<script>
   Vue.component("one",{
        template:"#one", 
   });
   let vue = new Vue({
 	  el:"#app",
    });
</script>

1.2先定義註冊組件, 然後通過Vue實例的render方法來渲染

<div id="app"></div>
<template id="one">
    <div>
        <p>我是組件22</p>
    </div>
</template>

<script>
   Vue.component("one",{
        template:"#one", 
   });
   let vue = new Vue({
 	   el:"#app",
 	   render:function(creatElement){
            let html = creatElement("one");
            return html;
        },
    });
</script>

2.兩種渲染方法的區別

2.1當做標籤來渲染, 不會覆蓋Vue實例控制區域。渲染後代碼如下：

    <div id="app">
        <div>
            <p>我是組件22</p>
        </div>
    </div>

2.2通過render方法來渲染, 會覆蓋Vue實例控制區域。渲染後代碼如下：

<div>
    <p>我是組件22</p>
 </div>

3.兩種渲染方法的應用場景。後續補充。