Vue Render function creates DOM node code instance

Although using the createElement function in render to create DOM nodes is not very intuitive, it can still meet some special needs in the design of some independent components. A simple render example is as follows:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div >
    <my-component :list="list"></my-component>
  </div>
  <script src=""></script>
  <script>
    ('my-component', {
      props: {
        list: {
          type: Array,
          default: () => []
        }
      },
      render(createElement) {
        if () {
          return createElement('ul', (item => createElement('li', item)))
        } else {
          return createElement('p', 'Empty list')
        }
      }
    })
    new Vue({
      el: '#app',
      data: {
        list: ['html', 'css', 'javascript']
      }
    })
  </script>
</body>
</html>

In addition, since v-if, v-else, v-show and other instructions cannot be used in render, you need to implement it manually by yourself. Take the commonly used v-model for example:

('my-component', {
  data() {
    return {
      message: ''
    }
  },
  render(createElement) {
    return createElement(
      'div',
      [
        createElement(
          'input',
          {
            on: {
              input: e =>  = 
            }
          }
        ),
        createElement('p', )
      ]
    )
  }
})

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.