vue中render函数解析

render解析

在vue文件中其实是通过读取template再渲染到render函数中，在vue的main.js中初始状态是这样的：

 new  Vue({
     render:h=>(App)
}).$mount('#app')

以上代码可以解析成

 new  Vue({
     render:React.createElement=>{
         return h(App)
     }
}).$mount('#app')

上面是组件的一种写法，如果是标签的话，可以用下面那种写法

 new  Vue({
     render:(h)=>{
         //h有3个参数
         //第一个是要渲染的元素或者组件
         //第二个是属性，用数据对象
         //第三个是子节点内容
         return h{
            'h1',
            {},
            'render函数渲染'
         }
     }
}).$mount('#app')

js后缀文件样式

export default{
  data(){
    return {
       path:'www.baidu.com'
    }
  }
  render(h){
     consoel.log(this.path)
     return h(
       'div',
       {},
       [
         h('img',{
            attrs：this.path
         }),
         h('h1',{},'百度一下')
       ]
     )
  }
}

jsx后缀文件样式

export default{
  data(){
    return {
       path:'www.baidu.com'
    }
  }
  render(){
     consoel.log(this.path)
     return{
       <div>
         <img src={this.path}/>
         <h1>百度一下</h1>
       </div>
     }
  }
}

以上三种文件样式都可以渲染初相同的效果

jsx文件需要安装配置插件，而vue脚手架中已经配置好了，详情

在vue中jsx写法有一些语法也会不一样，如：

<input vModel={this.newTodoText} />
<input vOn:click_stop_prevent={this.newTodoText} />
<p domPropsInnerHTML={html} />

vue中配置项

而在react中改成了preset-react