Vue全家桶实践（五）---渲染函数&JSX

最近公司要重写运营管理系统，不想再维护之前的backbone了，赶紧要求前端整个重写。重开新坑，用了两周多撸出了第一版，收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来，也算简单梳理一下思路。

渲染函数&JSX

参考资料：文档

使用vue进行开发的时候，绝大部分情况下直接使用template来创建html，但在某些情况下，使用js会更有效。官方文档中就举了生成h标签的例子。
html的DOM树种，每个元素都是一个节点，比如html标签，文本，注释等。
Vue通过建立虚拟DOM，对真实DOM的变化进行追踪，通过createElement函数，返回一个虚拟节点（VNode），它包含的信息会告诉Vue页面上需要渲染出什么元素。而虚拟DOM就是由这些VNode组成的树。
实际上，我们在vue单文件组件中写的template，也会先被解析为VNode进行操作，然后再变成html在浏览器中渲染。

createElement参数

官网上有详细的createElement用例。使用js替代template时，v-if使用if/else代替，v-for使用map代替即可。而v-model就要自己实现。
但是可以看到，实际上要使用createElement函数来生成一个VNode是很麻烦的，比如：

//template
<div id="container" @click="clickHandler">
    <p>Hello</p>
<div>
// createElement
// @returns {VNode}
createElement(
  'div',
  {
    attrs: {
      id: 'container'
    },
    on: {
      click: this.clickHandler
    },
  },
  [
    createElement('p', 'Hello')
  ]
)

简单的一段模板，用createElement代码量就大了很多，所以我们更多的使用jsx语法，让我们更加接近模板。如：

import AnchoredHeading from './AnchoredHeading.vue'

new Vue({
  el: '#demo',
  render (h) {
    return (
      <AnchoredHeading level={1}>
        <span>Hello</span> world!
      </AnchoredHeading>
    )
  }
})

将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的，如果在作用域中 h 失去作用，在应用中会触发报错。
我们在使用iview的时候，就经常会需要用到render函数，例如：

// 简单模板：
render (h, params) {
  return (
    <div>
      <p>{params.row.contactName}</p>
      <p>{params.row.phone}</p>
      <p>{params.row.email}</p>
    </div>
  )
}
// 循环
render (h, params) {
  return (
    <div>
      {params.row.data.map((item) => {
        return (<tag class='cursorDefault' type='border' color='blue'>{item}</tag>)
      })}
    </div>
  )
}
// 判断&组件嵌套
render (h, params) {
  if (params.row.data=== null) {
    return
  }
  return (
    <poptip title='网店' trigger='hover' placement='left'>
      <tag color='blue'>{params.row.data}</tag>
      <div slot='content'>
        {params.row.eshops.map((shop) => {
          return (<p>{shop.title}</p>)
        })}
      </div>
    </poptip>
  )
}
// 事件绑定，使用箭头函数确定作用域。
render: (h, params) => {
  return (
    <p class="xxx" onClick={ () => { this.changeTime(params.row) } }>
      <icon size="16" color="#19be6b" type="edit" />
      {moment(params.row.time).format('YYYY-MM-DD HH:mm:ss')}
    </p>
  )
}

Vue全家桶实践（五）---渲染函数&JSX

渲染函数&JSX

猜你喜欢