Vue页面的渲染

1.使用components 子组件进行局部的渲染

new Vue({
    el:"#app",
　　components:{
　　　　login,//渲染在app元素中的Login子组件。
　　}
    
})

 

2.使用render进行将el指定的整个元素都覆盖 和react中的render方法一样。

new Vue({
　　
   el:"#app",
　　//即将整个app元素进行渲染 都渲染成了templateName的内容  
　　render:function(createElement){ //createElement是一个函数
    　　return createElement(templateName)； 
    }
  
})

 在使用脚手架vuecli的时候，有个runtime-compiler 和runtime-only的使用，在runtion comiler中使用的就是第一种的渲染方式，先将template==>ast （抽象语法树）==>render==>虚拟Dom==>真实的屏幕显示的UI.

runtime only是使用第二种方式进行渲染的：render==>虚拟Dom==>UI

所以runtime only 相对另一个来说相对轻量，性能也比较高，无需进行template的转换。