开开森森学前端之render函数

前言

使用vue这么久了，可是对render函数仍是不怎么熟悉，因此写篇文章加深理解和记忆！方便往后熟练使用。

正文

mian.js中的new Vue中会传入render: h => h(App)

那么这个h其实能够用来建立元素。

他的第一个参数是必选参数

第二个和第三个都是可选参数

第一个参数就是当前要渲染的组件或者标签，也能够是个函数

第二个参数一个配置对象，里面能够传递一些html自带的原生属性

第三个参数能够是字符串或者数组 示例代码：

new Vue({
   render: h => {
      return h('div',{
        attrs:{
           id:'box'
        },
        style:{
           color:'red'
        }
      },'Dreams')
   }
}).$mount('#app')
复制代码

这里咱们用render函数生成了一个id为box,颜色为红色，文本为Dreams的div元素。

问题又来了，假设咱们渲染一个组件，组件里面要进行传值，那么该怎么书写？

new Vue({
   render: h => {
      return h(CountTo,{
        props:{
          endVal:100
        }
      })
   }
}).$mount('#app')
复制代码

那么这里咱们就能够在render函数里使用props对组件进行传值操做了。

上面这个是一个数字过渡组件，咱们传递endVal是为了告诉他到多少时中止

在此基础上，咱们若是想给组件绑定事件呢？

new Vue({
   render: h => {
      return h(CountTo,{
        props:{
          endVal:100
        },
        on:{
          'on-animation-end':(val) => {
              console.log(val)
          }
        }
      })
   }
}).$mount('#app')
复制代码

实际上这里监听了一个事件，on-animation-end这个事件实际上是CountTo组件经过$emit派发出来的. 而后咱们又想给这个组件最外层绑定一个点击事件该怎么作？

new Vue({
   render: h => {
      return h(CountTo,{
        props:{
          endVal:100
        },
        on:{
          'on-animation-end':(val) => {
              console.log(val)
          }
        },
        nativeOn:{
            'click':() => {
                console.log('click')
            }
        }
      })
   }
}).$mount('#app')
复制代码

而后咱们又想给这个组件定义一个class类名怎么办？

new Vue({
   render: h => {
      return h(CountTo,{
        'class':['count-to',true ? 'aa' : 'bb'],
        props:{
          endVal:100
        },
        on:{
          'on-animation-end':(val) => {
              console.log(val)
          }
        },
        nativeOn:{
            'click':() => {
                console.log('click')
            }
        }
      })
   }
}).$mount('#app')
复制代码

那么咱们还想使用指令和插槽而且获取dom怎么办？

new Vue({
   render: h => {
      return h(CountTo,{
        'class':['count-to',true ? 'aa' : 'bb'],
        props:{
          endVal:100
        },
        domProps:{
          //dom上的一些属性,
          //由于如今是组件因此这样写会报错
          innerHTML:'123'
        },
        on:{
          'on-animation-end':(val) => {
              console.log(val)
          }
        },
        nativeOn:{
            'click':() => {
                console.log('click')
            }
        },
        directives:[],
        slot:'default',
        key:'',
        ref:'',
        scopedSlots:{},
      })
   }
}).$mount('#app')
复制代码

那假设如今须要给一个标签添加元素怎么添加？

咱们把上面的干掉！

new Vue({
   render: h => h('div','123')
}).$mount('#app')
复制代码

这里的123是第三个参数，第二个参数咱们不写直接留空

因此页面上会渲染出

<div>123</div>
复制代码

若是咱们要在div元素里添加多个子元素呢？ 那么确定是个数组。

new Vue({
   render: h => h('div',{},[
     h('span','111'),
     h('span','222'),
   ])
}).$mount('#app')
复制代码

那么如今div里就有两个span标签了

<div>
    <span>111</span>
    <span>222</span>
</div>
复制代码

那么咱们生成的东西若是不少且不固定呢？

那么这里如何使用循环呢？

那么这里咱们新建一个组件文件

里面的内容是这样的

new Vue({
   render: h => h('div',{},[
     h('ul',{
        on:{
            'click':(event) => {
                console.log(event)
            }
        }
     },[
        h('li',{
            on:{
                'click':event => {
                    console.log(event)
                }
            }
        })
     ])
   ])
}).$mount('#app')
复制代码

那么如今div里就有一个ul标签包含一个li标签了

<div>
    <ul>
        <li></li>
    </ul>
</div>
复制代码

在render里咱们实际上是没办法使用v-for指令的，因此咱们要本身实现这个方法

let list = [{name:'Dreams'},{name:'Dreams2'}]
const getLiEleArr = h => {
    return list.map(item => h('li',{
        on:{
            'click':(event) => {
                console.log(event)
            }
        }
    },item.name))//标签内的内容
}
复制代码

这个方法写好了以后咱们把刚刚上面的改造一下

new Vue({
   render: h => h('div',{},[
     h('ul',{
        on:{
            'click':(event) => {
                console.log(event)
            }
        }
     },getLiEleArr(h))
   ])
}).$mount('#app')
复制代码

那么这样页面上就成功的渲染出以下的标签：

<div>
    <ul>
        <li>Dreams</li>
        <li>Dreams2</li>
    </ul>
</div>
复制代码

同时li和ul也有点击事件

这里须要阻止事件冒泡，但render函数里也没法使用vue的.stop修饰符 因此咱们须要给刚刚的click里使用event.stopProgation()来阻止

但又有问题来了，咱们知道使用v-for须要给每一个元素加上key，但这里咱们没有该怎么办?

回到刚刚的代码

let list = [{name:'Dreams'},{name:'Dreams2'}]
const getLiEleArr = h => {
    return list.map((item,index) => h('li',{
        on:{
            'click':(event) => {
                console.log(event)
            }
        },
        key:`item_${index}`//这里咱们加上key
    },item.name))//标签内的内容
}
复制代码

那么到这里，相信你们也对render有了一个大概的了解了。

也就是说咱们平时在模板里写的东西其实最后都会被编译为相似上面的语法！

总结

学好render函数在某些状况下可让咱们更好用js去控制一些细节的实现，但咱们也会发现，render略显复杂，可是越复杂的东西才越有它存在的意义！

各位大佬，若是发现文中的错误，请指正，我会及时修改！

感谢大佬们能在百忙中能阅读完这篇文章！