VUE render函数

一般的，数据渲染我们这么写

//html
 <div> {{message}} </div>  
//js
new Vue({
  data(){
    return{
     message:'hello' 
   }
  }
})

使用render函数,函数内部返回createElement回调

//html
 
//js
new Vue({
  render(createElement){
    return createElement('div',{
     attrs:{
        id:'app1'
    }
    },this.message)
  },
  data(){
    return{
     message:'hello' 
   }
  }
})

会发现render产生的

<div id="app1">hello</div>

会覆盖

<div id="app"></div>

因为页面中没有了id为app的div
这也是我们不能将vue实例挂载在body和html的原因，因为会直接覆盖，
并且比

<div id="app">{{message}}</div>

加载的更优化，这是因为，dom是先与js加载的，所以会先看到{{message}}显示在页面上，而render的方式会在vue实例加载后直接显示数据在页面上