vue render函数基础使用

vue render是直接渲染成dom树没有编译过程。渲染更高效、方便逻辑处理。

vue render分两种情况使用

1. 在组件中直接通过render创建组件，这种情况可以结合template一起使用 通过render创建组件拥有template组件全部方法属性

components:{
        NodeContent: {
           props: {
            level: {
              type: Array
            }
          },
          render(h) {
            if (this.level.length) {
              return h('div', this.level.map(function (item) {
                return h('p', item)
              }))
            }else{
              return h('p', '传入数组长度为0')
            }
            
          }
      } 
    },
<node-content :level='level'></node-content>//直接在template中应用

2. 直接使用render生成单文件视图 直接生成视图，可以绑定class id 以及样式。

export default {
        name: "two",
        render: function (h) {
            return h('div', 
                {
                    class:['two'],
                },['111',this.$store.state.datamag.sex]
            )
        },
    }

更多使用教学移步官网