vue的渲染函数 - render

一、render函数是什么？

简单的说，在vue中我们使用模板HTML语法来组建页面的，使用render函数我们可以用js语言来构建DOM。因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。

当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫 createElement，可以简写为 h。

官网示例： 分别使用 html语法 和 render函数 来实现根据传入的 level ，生成 h1-h6 不同的标题格式。

  1. 使用html语法的形式：

父组件:

<template>
  <div>
    <child :level='level'>hello world</child>
  </div>
</template>

<script>
  import child from '@/components/child'
  export default {
  	name: 'index,
    components: { child },
    data() {
      return {
        level: 4
      };
    },
  };
</script>

child子组件:

<template>
  <div>
    <h1 v-if="level === 1">
      <slot></slot>
    </h1>
    <h2 v-if="level === 2">
      <slot></slot>
    </h2>
    <h3 v-if="level === 3">
      <slot></slot>
    </h3>
    <h4 v-if="level === 4">
      <slot></slot>
    </h4>
    <h5 v-if="level === 5">
      <slot></slot>
    </h5>
    <h6 v-if="level === 6">
      <slot></slot>
    </h6>
  </div>
</template>
<script>
  export default {
    props: {
      level: {
        require: true,
        type: Number
      }
    }
  };
</script>

页面效果：
在这里插入图片描述
2. 使用render函数的形式：

child子组件：

<script>
  export default {
    props: {
      level: {
        require: true,
        type: Number,
      }
    },
    render(createElement) {
      return createElement('h' + this.level, this.$slots.default);
    }
  };
</script>

页面效果：
在这里插入图片描述
总结：
对比两种实现方式，我们发现这里使用模板并不是最好的选择，不但代码冗长，而且在每一个级别的标题中都重复书写了。
使用render函数实现看起来代码精简很多，但是需要非常熟悉 Vue 的实例属性。在这个例子中，我们需要知道，向组件中传递不带v-slot指令的子节点时（子组件child中的“hello world”），这些子节点被存储在组件实例中的 this.$slots.default 中。

二、render函数的参数

render函数 即渲染函数，它是个函数，render 函数的返回值是 VNode（即虚拟节点，也就是我们要渲染的节点）。
createElement 是 render函数 的 参数 ，它本身也是个函数，并且有三个参数。

1. createElement 第一个参数是必填的，可以是String | Object | Function

  • String：表示的是HTML 标签名；
  • Object ：一个含有数据的组件选项对象；
  • Function ：返回了一个含有标签名或者组件选项对象的async函数。

代码示例：

export default {
    render(createElement) {
      // String
      return createElement('h1');

      //Object
      return createElement({
        template: " <div>锄禾日当午</div> "
      })

      // Function
      let domFun = function () {
        return {
          template: " <div>锄禾日当午</div> "

        }
      }
      return createElement(domFun())
    }
};

2. createElement 第二个参数是选填的，一个与模板中属性对应的数据对象，常用的有 class | style | attrs | domProps | on

  • class：控制类名；
  • style ：样式；
  • attrs ：用来写正常的 html 属性 id src 等；
  • domProps ：用来写原生的dom 属性；
  • on：用来写原生方法；

代码示例：

export default {
	let self = this
    render(h) {
      return h('div', {
        // 与 `v-bind:class` 的 API 相同，
        // 接受一个字符串、对象或字符串和对象组成的数组
        'class': {
          'red': true,
          'bold': true
        },

        // 与 `v-bind:style` 的 API 相同，
        // 接受一个字符串、对象，或对象组成的数组
        style: {
          background: 'yellow'
          fontSize: '18px'
        },

        // 普通的 HTML 特性
        attrs: {
          id: 'text'
        },

        // 组件 prop
        props: {
          myProp: 'text'
        },

        // DOM 属性
        domProps: {
          innerHTML: 'hello text'
        },

        // 事件监听器在 `on` 属性内，
        // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
        // 需要在处理函数中手动检查 keyCode。
        on: {
          click() {
          	self.clickHandler()
          }
        },

        // 仅用于组件，用于监听原生事件，而不是组件内部使用
        // `vm.$emit` 触发的事件。
        nativeOn: {
          click: this.nativeClickHandler
        },

        // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
        // 赋值，因为 Vue 已经自动为你进行了同步。
        directives: [
          {
            name: 'my-custom-directive',
            value: '2',
            expression: '1 + 1',
            arg: 'foo',
            modifiers: {
              bar: true
            }
          }
        ],

        // 作用域插槽的格式为
        // { name: props => VNode | Array<VNode> }
        scopedSlots: {
          default ({props}) {
          	return createElement('span', props.text)
          } 
        },

        // 如果组件是其它组件的子组件，需为插槽指定名称
        slot: 'name-of-slot',

        // 其它特殊顶层属性
        key: 'myKey',
        ref: 'myRef',
        
        // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
        // 那么 `$refs.myRef` 会变成一个数组。
        refInFor: true
      })

    },
	methods: {
      clickHandler () {
        console.log(111)
     },
   	  nativeClickHandler () {
   		console.log(111)
     }
   }
};

<style>
  .red {color: red;}
  .bold {font-weight: 700;}
</style>

页面效果：
在这里插入图片描述

3. createElement 第三个参数是选填的，代表子级虚拟节点 (VNodes)，由 createElement() 构建而成，正常来讲接收的是一个字符串或者一个数组，一般数组用的是比较多的

export default {
    render(h) {
      return h('div', {}, [h('h1', 'hello world'), h('h6', 'hello text')])
    }
};

页面效果：
在这里插入图片描述

三、v­-model在render函数中的使用

在render函数中，没有提供 v-model 的实现，所以我们必须自己实现相应的逻辑。render函数通过input方法实现数据双向绑定，但与 v-model 相比，这可以更好地控制交互细节。

父组件：

<template>
  <div>
    <Input v-model="name" :name="name"/>
    <p>{{name}}</p>
  </div>
</template>

<script>
import Input from '../components/Input'
export default {
  name: 'index',
  components: {
    Input
  },
  data () {
    return {
      name: 'John'
    }
  }
}
</script>

子组件：

<script>
export default {
  name: 'Input',
  props: {
    name: {
      type: String,
      default: ''
    }
  },
  render (createElement) {
    let self = this
    return (createElement('input', {
      domProps: {
        value: self.name
      },
      on: {
        input (event) {
          self.$emit('input', event.target.value)
        }
      }
    }))
  }
}
</script>

页面效果：
在这里插入图片描述
当子组件 name 改变，父组件也随之更新：
在这里插入图片描述

四、v-if 和 v­-for在render函数中的使用

在html中使用的 v-if 可以通过 if / else 来替代，v-for 则可以通过 map 方法来替代。

<template>
  <div>
    <ul v-if="list.length > 0">
      <li v-for="(item,i) in list" :key="i">{{item}}</li>
    </ul>
    <p v-else>暂时没有数据</p>
  </div>
</template>

将上面的html代码用render函数生成：

render (createElement) {
  if (this.list.length > 0) {
	return createElement('ul', this.list.map((item) => {
	  return createElement('li', item)
	}))
  } else {
	return createElement('p', '暂时没有数据')
	}
}

五、插槽

1. 通过this.$slots访问静态插槽的内容

父组件：

<Child>你好，我是插槽的内容</Child>

子组件Child：

// 每个插槽都是一个 VNode 数组
render: function (createElement) {
  // `<div><slot></slot></div>`
  return createElement('div', this.$slots.default)
}

页面效果：
在这里插入图片描述

2. 通过 this.$scopedSlots 访问作用域插槽

父组件：

<Child v-slot="slotProps">{{slotProps.message}}</Child>

子组件Child：

// 每个作用域插槽都是一个返回若干 VNode 的函数
data () {
  return {
	message: '你好，我是作用域插槽内容'
  }
},
render: function (createElement) {
  // `<div><slot :message="message"></slot></div>`
  return createElement('div', [
    this.$scopedSlots.default({
      message: this.message
    })
  ])
}

页面效果：
在这里插入图片描述
如果是具名插槽有 name 属性，例如 name 属性为 text ，则在render函数中要使用 this.$scopedSlots.name属性 来访问子组件中的变量：

父组件：

<Child v-slot:text="slotProps">{{slotProps.message}}</Child>

子组件Child：

render: function (createElement) {
  // `<div><slot name="text" :message="message"></slot></div>`
  return createElement('div', [
    this.$scopedSlots.text({
      message: this.message
    })
  ])
}

3. 通过 渲染函数中的scopedSlots字段 访问作用域插槽

它不同于 $scopedSlots，它是存在于 render数据对象 中的一个对象；
它的作用是获取 子组件向父组件 抛出的内容，而不是 像 $slots 和 $scopedSlots 那样抛出内容给父组件。

我们把上面实例进行改写，让父组件通过作用域插槽获取到子组件暴露的内容：

父组件：

<Child>
	<template v-slot:header="{props}">{{ props.text }}</template>
	<template v-slot:content="{props}">{{ props.text }}</template>
	<template v-slot:default="{props}">{{ props.text }}</template>
</Child>

子组件Child：

<template>
  <div>
    <slot name="header" :props="props1"></slot>
    <slot name="content" :props="props2"></slot>
    <slot name="default" :props="props3"></slot>
  </div>
</template>

<script>
export default {
  name: 'Child',
  data () {
    return {
      props1: {
        text: '你好，我是具名插槽header的内容'
      },
      props2: {
        text: '你好，我是具名插槽text的内容'
      },
      props3: {
        text: '你好，我是默认插槽的内容'
      }
    }
  }
}
</script>

我们把父组件改写为通过render函数渲染：

render (createElement) {
    return createElement('SlotSon', {
      // 在数据对象中传递 `scopedSlots`
      // 格式为 { name: props => VNode | Array<VNode> }
      scopedSlots: {
        // 对应 v-slot:header="{props}"
        header ({props}) {
          return props.text
        },
        // 对应 v-slot:content="{props}"
        content ({props}) {
          return props.text
        },
        // 对应 v-slot:default="{props}"
        default ({props}) {
          return props.text
          // 也可写为：return createElement('span', props.text)
        }
      }
    })
  }

页面效果：
在这里插入图片描述

4. 总结

v-slot 或者单纯的<slot>标签 ===> 子组件 this.$slots.default
v-slot:name 或者 #name ===> 子组件 this.$slots.name
v-slot="xxx" ===> 子组件抛出 this.$scopedSlots.default(xxx)/ 父组件使用scoepdSlots: { default(xxx){ return VNode } }
v-slot:name="xxx" ====> 子组件抛出this.$scopedSlots.name(xxx)/ 父组件使用scoepdSlots: { name(xxx){ return VNode } }

六、render函数中的事件修饰符

修饰符前缀
.passive&
.capture!
.once~
.capture.once 或.once.capture~!
<template>
  <div class="one">1
    <div class="two">2
      <div class="three">3</div>
    </div>
  </div>
</template>

将上面的html代码用render函数生成，并添加事件，使用事件修饰符：

<script>
export default {
  name: 'Box',
  render (h) {
    let self = this
    return h('div', {
      class: {
        'one': true
      },
      on: {
        '!click' () {
          self.clickHandler(1)
        }
      }
    }, ['1', h('div', {
      class: {
        'two': true
      },
      on: {
        '!click' () {
          self.clickHandler(2)
        }
      }
    }, ['2', h('div', {
      class: {
        'three': true
      },
      on: {
        '~!click' () {
          self.clickHandler(3)
        }
      }
    }, '3')])])
  },
  methods: {
    clickHandler (num) {
      console.log(num)
    }
  }
}
</script>

<style>
  .one,.two,.three {
    border: 1px solid #222;
  }
  .one {
    width: 500px;
    height: 500px;
    background-color: yellow;
  }
  .two {
    width: 300px;
    height: 300px;
    background-color: pink;
  }
  .three {
    width: 100px;
    height: 100px;
    background-color: deepskyblue;
  }
</style>

页面效果：
在这里插入图片描述

点击box3，click事件从顶层开始往下触发， .capture 修饰符生效：
在这里插入图片描述

七、JSX语法糖

JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到 < ，JSX就当 HTML 解析，遇到 { 就当 JavaScript 解析。复杂的render函数书写异常痛苦，这就是为什么会有一个Babel插件，用于在 Vue 中使用 JSX 语法，它可以让我们回到更接近于模板的语法上。

render(h) {
    return (
      <Child1 level={1}>
        <span>Hello</span> world!
      </Child1>
    )
  }

总结

参考链接: Vue - 渲染函数render，VUE render 函数中使用插槽、具名插槽与作用域插槽，在vue中使用JSX
官网链接：渲染函数 & JSX

# vue.js # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟