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.两种渲染方法的应用场景。后续补充。