Vue中使用渲染函数render实现无限节点的树

前言

我们在Vue的官方文档其中一节渲染函数 & JSX中有这么一句话:『Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。』,在实际项目中还真的遇到过一些使用模板解决不了的问题,如要生成一棵无限的Dom树,或者生成无限层级的菜单等情况。

这些情况下,使用模板真的是束手无策,使用过react的同学可能就知道,使用jsx可以轻松使用递归实现。当然使用Vue也可以使用jsx来实现,我也尝试去安装babel插件,结果插件要求node的版本>=4, <=9,装不成功,想想我对h函数还是挺熟悉的,算了,直接使用h函数来解决吧。

废话不多数,先上在线DemoGithub上源码地址

代码分析

template代码如下:

<template>
  <article class="pageview">
    <header class="header fixed">
      <div class="container"><a
          class="back back_ico"
          href="javascript:void(0);"
          @click="goBack"
        ></a><span class="title">{{msg}}</span></div>
    </header>
    <section class="main">
      <div
        id="menu"
        class="clearfix menu"
      >
        <node-content :nodes="data" />
      </div>
    </section>
  </article>
</template>

这里面,主要是使用了node-content这个本页面使用render(createElement)创建的自定义组件。

JS代码段如下:

export default {
  name: 'RenderTreeDemo',
  components: {
    NodeContent: {
      props: {
        nodes: {
          required: true
        }
      },
      render (h) {
        // const nodes = this.nodes
        function clickHandler (e) {
          // console.log(e)
          let el = e.target
          let nextSibling = el.nextElementSibling
          if (nextSibling) {
            if (el.classList.contains('open')) {
              el.classList.remove('open')
              el.classList.add('close')
              nextSibling.classList.add('hide')
            } else {
              el.classList.remove('close')
              el.classList.add('open')
              nextSibling.classList.remove('hide')
            }
          }
        }
        function renderNode (nodes) { // 关键代码,递归生成树
          if (nodes.length > 0) {
            return h('ul', {}, nodes.map((_) => {
              return h('li', { key: _.id }, [
                h('a', {
                  'class': {
                    name: true,
                    open: _.children.length > 0
                  },
                  attrs: {
                    href: 'javascript:void(0);'
                  },
                  on: {
                    click: clickHandler
                  }
                }, [_.name])
              ].concat(
                _.children.length > 0 ? renderNode(_.children) : []
              ))
            }))
          }
        }
        return this.nodes.length > 0 ? renderNode(this.nodes) : h()
      }
    }
  },
  data () {
    return {
      msg: '渲染函数 Tree Demo',
      data: [
        {
          id: 0,
          name: '节点1',
          children: [
            {
              id: 1,
              name: '节点1-1',
              children: []
            },
            {
              id: 2,
              name: '节点1-2',
              children: [
                {
                  id: 7,
                  name: '节点1-2-1',
                  children: [
                    {
                      id: 10,
                      name: '节点1-2-1-1',
                      children: []
                    },
                    {
                      id: 11,
                      name: '节点1-2-1-2',
                      children: []
                    }
                  ]
                },
                {
                  id: 8,
                  name: '节点1-2-2',
                  children: []
                }
              ]
            }
          ]
        },
        {
          id: 3,
          name: '节点2',
          children: [
            {
              id: 4,
              name: '节点2-1',
              children: []
            },
            {
              id: 5,
              name: '节点2-2',
              children: []
            }
          ]
        },
        {
          id: 6,
          name: '节点3',
          children: []
        }
      ]
    }
  },
  methods: {
    goBack: goBack
  }
}

主要的思路:既然模板实现不了递归生成树,我们要使用js实现主要有两种选择,要么在render函数中使用jsx,要么直接使用render(createElement)渲染函数带进来的createElement函数,其实就是h函数来实现递归生成。

扩展

实际应用中,我们往往需要扩展许多功能,如:对树接点绑定一些Dom操作的交互效果,对树节点增删改查,拖放改动节点结构等等。在Vue中有两种思路,要么通过js直接操作dom,要么通过操作数据驱动Dom节点的变化。一般要结合着来使用与进行。感兴趣的同学可以通过深度学习Element UITree组件

作者: 博主

Talk is cheap, show me the code!

发表评论

电子邮件地址不会被公开。

Captcha Code