VUE render函数

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

//html
 
{{message}}
//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产生的

hello

会覆盖

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

{{message}}

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

你可能感兴趣的:(VUE render函数)