vue2，3render函数的简单使用

标签：函数 render DOM 元素 虚拟 vue2 组件 3render

render 函数的主要作用：

1. 创建虚拟 DOM：render 函数负责创建虚拟 DOM 元素，这些元素以 JavaScript 对象的形式表示页面的结构和内容。

2. 根据状态和数据生成 UI：render 函数根据组件的状态（data 数据）、属性（props）、计算属性（computed）、方法（methods）等信息，生成虚拟 DOM，包括元素、组件、事件处理等。

3. 渲染动态内容：render 函数允许你动态生成内容，因此你可以在组件内部根据条件、循环、计算等逻辑来生成不同的虚拟 DOM。

4. 响应式更新：当组件的状态或数据发生变化时，Vue.js 会自动重新运行 render 函数以生成新的虚拟 DOM，然后比较新旧虚拟 DOM，找出变化的部分，最后更新实际的 DOM。

Vue2和3之间的区别是： Vue2用的是 createElement 函数去创建虚拟DOM元素，vue3呢是用h（或者使用createVNode）函数去创建虚拟DOM元素，更加简洁，还有就是Vue3引入Composition API，允许使用setup函数去编写组件逻辑，包括render函数，使得逻辑更加灵活可组合

vue3render例子：

App.vue:

<template>   <div id="app">     <h1>什么是Vue中的Render函数？</h1>     <Heading tag="ul" />   </div> </template>
<script> import Heading from './Heading' export default {   components: {     Heading   } } </script>
<style lang="stylus"> #app   font-family Avenir, Helvetica, Arial, sans-serif   -webkit-font-smoothing antialiased   -moz-osx-font-smoothing grayscale   text-align center   color #2c3e50   margin-top 60px </style>

Heading.vue:

<script> import { h } from 'vue' export default {   props: {     tag: String   },   data () {     return {       people: ['红', '黄', '蓝']     }   },   render () {     return h(this.tag, {}, this.people.map(name => h('li', {}, `${name}`)))     // 传入的元素createElement('标签/组件名', {选项}, '可以是子元素，也可以是文本节点')   } } </script>
<style>
</style>

实现效果：

vue2的话将代码中的h更换成createElement就可以了。

 

 

 

标签：函数,render,DOM,元素,虚拟,vue2,组件,3render
From： https://www.cnblogs.com/Ly021/p/17755165.html