v-show和v-if 多级菜单

<div id="app">
      <tree :datalist='treeData'></tree>
    </div>


    <script>
      const treeData = [
        {
          name: '一级 1',
          children: [
            {
              name: '二级 1-1',
              children: [
                {
                  name: '三级 1-1-1',
                  children: [
                    {
                      name: '四级 1-1-1-1'
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          name: '一级 2',
          children: [
            {
              name: '二级 2-1',
              children: [
                {
                  name: '三级 2-1-1'
                }
              ]
            }, {
              name: '二级 2-2',
              children: [
                {
                  name: '三级 2-2-1',
                }
              ]
            }
          ]
        },
        {
          name: '一级 3',
          children: [
            {
              name: '二级 3-1',
              children: [
                {
                  name: '三级 3-1-1'
                }
              ]
            },
            {
              name: '二级 3-2',
              children: [
                {
                  name: '三级 3-1-1'
                }
              ]
            }
          ]
        }
      ]


      Vue.component('tree', {
        props: ['datalist'],
        data() {
          return {
            showChildren: [],
            nohiddenChildren: []
          }
        },
        template: `<ul>
                    <li v-for='(data,index) in datalist' :key='data.name'>
                      <span @click='handleClick(index)'>{{data.name}}</span>
                      <tree :datalist="data.children" 
                            v-show="showChildren[index]" 
                            v-if='nohiddenChildren[index]'></tree>
                    </li>
                  </ul>`,
        methods: {
          handleClick(index) {
            this.showChildren.splice(index, 1, !this.showChildren[index])
            this.nohiddenChildren.splice(index, 1, true)
          }
        }
      })
      new Vue({
        el: '#app',
        data: {
          treeData
        }
      })

    </script>

实现效果

我主要说明一下 这里v-show和v-if为什么这么使用的原因：

1.点击标题，其子元素打开：
如果使用v-if作为控制的，每次点击标题，子组件都会重新渲染一回，不能保存之前子元素内部打开的状态，同时这种频繁的切换使用v-show更能够节省dom渲染，节约性能。

2.使用了v-show，为什么又使用v-if
如果单纯的使用v-show，页面在初始化的时候，会将子元素也全部渲染，只是用display:none;作为控制，这对页面性能并不是很好，此时需要使用v-if，点击了标签再渲染dom标签。