Which command does the vue rendering function use?

The vue rendering function uses the "render" command. In vue, template HTML syntax is used to build pages, and the render function can be used to build DOM in js language. Because vue is a virtual DOM, it must be translated into a VNode function when getting the template. By using the render() function to build the DOM, vue eliminates the translation process.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

In most cases, Vue recommends using template syntax to create applications. However, in some use cases, we really need to use the full programming capabilities of JavaScript. This is when the rendering function --render comes in handy.

1. Introduction to render function

Simply put, in vue we use template HTML syntax to build the page. Using the render function we can use js language to build it. DOM. Because vue is a virtual DOM, it must be translated into a VNode function when getting the template. By using the render function to build the DOM, vue eliminates the translation process.

When using the render function to describe the virtual DOM, vue provides a function, which is the tool needed to build the virtual DOM. It is named createElement on the official website. There is also an agreed abbreviation called h.

1.1 Virtual DOM

Vue tracks how it wants to change the real DOM by creating a virtual DOM. Please look at this line of code carefully:

return createElement('h1', this.blogTitle)

createElement What exactly will it return? Not actually an actual DOM element. Its more accurate name may be createNodeDescription, because the information it contains will tell Vue what kind of node needs to be rendered on the page, including the description information of its child nodes. We describe such a node as a "virtual node", and often abbreviate it as "VNode". "Virtual DOM" is what we call the entire VNode tree built from the Vue component tree.

1.2 Parameters accepted by createElement

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签名、组件选项对象，或者
  // resolve 了上述任何一种的一个 async 函数。必填项。
  'div',

  // {Object}
  // 一个与模板中属性对应的数据对象。可选。
  {
    // (详情见1.3)
  },

  // {String | Array}
  // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
  // 也可以使用字符串来生成“文本虚拟节点”。可选。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

1.3 Use of render function

render:(h) => {
  return h('div',{
  　 // 给div绑定class属性
    class: {
      child: true,
      more: false
    },
　　// 给div绑定样式
　　style:{
  　　width:'200px',
      height:'200px',
　　},
　　// 给div绑定点击事件
    on: {
      click: () => {
        console.log('点击事件')
      }
    },
  })
}

1.4 In-depth render function data object

Just like v-bind:class and v-bind:style will be special in the template syntax Treated the same, they also have corresponding top-level fields in the VNode data object. This object also allows you to bind normal HTML attributes, as well as DOM attributes such as innerHTML (this will override the v-html directive)

{
  // 与 `v-bind:class` 的 API 相同，
  // 接受一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 与 `v-bind:style` 的 API 相同，
  // 接受一个字符串、对象，或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML attribute
  attrs: {
    id: 'foo'
  },
  // 组件 prop
  props: {
    myProp: 'bar'
  },
  // DOM 属性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器在 `on` 属性内，
  // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
  // 需要在处理函数中手动检查 keyCode。
  on: {
    click: this.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 => createElement(&#39;span&#39;, props.text)
  },
  // 如果组件是其它组件的子组件，需为插槽指定名称
  slot: &#39;name-of-slot&#39;,
  // 其它特殊顶层属性
  key: &#39;myKey&#39;,
  ref: &#39;myRef&#39;,
  // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
  // 那么 `$refs.myRef` 会变成一个数组。
  refInFor: true
}

1.5 Constraints

All VNodes in the component tree must be unique.

This means that the following rendering function is illegal:

render: function (createElement) {
  var myParagraphVNode = createElement('p', 'hi')
  return createElement('div', [
    // 错误 - 重复的 VNode
    myParagraphVNode, myParagraphVNode
  ])
}

If you really need to repeat elements/components many times, you can use factory functions to achieve it.

For example, the following rendering function renders 20 identical paragraphs in a completely legal way:

render: function (createElement) {
  return createElement('div',
    Array.apply(null, { length: 20 }).map(function () {
      return createElement('p', 'hi')
    })
  )
}

2. Application of render function

2.1 Render a simple element

// app.vue （根组件）

<template>
  <div id="app">
    <myRender></myRender>
  </div>
</template>

<script>
import myRender from &#39;./components/myRender&#39;
export default {
  components:{
    myRender
  }
}
</script>

// myRender.vue

<script>
export default {
  render:(h) => {
    return h(&#39;div&#39;,{
      class: {
        child: true,
        more: false
      },
      attrs: {
        id: &#39;foo&#39;,
        name: &#39;child&#39;
      },
  　　style: {
  　　　 width:&#39;100%&#39;,
        height:&#39;200px&#39;,
  　　},
      domProps: {
        innerHTML: &#39;我是render渲染的子组件&#39;
      }
    })
  }
}
</script>

<style scoped>
.child {
  background: pink
  font-size 24px
  letter-spacing 2px
}
.more {
  background: red
}
</style>

##2.2 Add a subtag

<script>
export default {
  render:(h) => {
    return h(&#39;div&#39;,
      {
        class: &#39;wrapper&#39;,
        attrs: {
          id: &#39;wrapper&#39;,
        },
    　　style: {
    　　　 width:&#39;100%&#39;,
          height:&#39;250px&#39;
    　　},
      },[
        h(&#39;h2&#39;,&#39;标题&#39;),
        h(&#39;div&#39;,{
          class: &#39;content&#39;,
          attrs: {
            id: &#39;content&#39;,
          },
          style:{
            width:&#39;800px&#39;,
            height:&#39;100px&#39;
          },
          domProps:{
            innerHTML:&#39;我是内容&#39;
          }
        })
      ]
    )
  }
}
</script>

<style scoped>
.wrapper
  background: pink
  letter-spacing 2px
  .content
    margin 0 auto
    background: red
    color #ffffff
    font-size 24px

</style>

2.3 Use JavaScript to replace the template function

It can be easily done in native JavaScript operation, Vue's rendering functions do not provide proprietary alternatives.

1. In v-if and v-for template syntax:

<ul v-if="items.length">
  <li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>

<script>
export default {
  data(){
    return{
      items:[1,2,3]
    }
  }
}
</script>

render function implementation:

<script>
export default {
  render: function (createElement) {
    if (this.items.length) {
      return createElement(&#39;ul&#39;, this.items.map(function (item) {
        return createElement(&#39;li&#39;, item.name)
      }))
    } else {
      return createElement(&#39;p&#39;, &#39;No items found.&#39;)
    }
  },
  data(){
    return{
      items:[1,2,3]
    }
  }
}
</script>

2. v-model

<script>
export default {
  render:function(createElement) {
    var self = this
    return createElement(&#39;div&#39;,[
        createElement(&#39;div&#39;,{class: &#39;showContent&#39;},self.inputValue),
        createElement(&#39;input&#39;,{
          class: &#39;content&#39;,
          domProps:{
            value:self.inputValue
          },
          on:{
            input:function(event){
              self.inputValue = event.target.value
            }
          }
        })
      ]
    )
  },
  data(){
    return{
      inputValue:&#39;&#39;
    }
  },
  watch:{
    inputValue:function(){
      console.log(this.inputValue)
    }
  },
}
</script>

<style scoped>
.showContent
  font-size 32px
  letter-spacing 2px
.content
  margin 10px auto
  color blue
  font-size 24px
</style>

2.4 Static slots

Usage of this.$slots

1. Parent component

<template>
  <div id="app">
    <myRender>
      <template v-slot:header>
        <div >
          头部
        </div>
      </template>
      <template #footer>
        <div >
          脚部
        </div>
      </template>
    </myRender>
  </div>
</template>

<script>
import myRender from &#39;./components/myRender&#39;
export default {
  components:{
    myRender
  }
}
</script>

2, child component

<script>
export default {
  render:function(createElement) {
    let childHeader = this.$slots.header
    let childFooter = this.$slots.footer
    return createElement(
      &#39;div&#39;,
      {
        class: &#39;showContent&#39;,
        style:{
          width:&#39;100%&#39;
        }
      },
      [
        createElement(&#39;div&#39;,{class:&#39;childHeader&#39;},childHeader),
        createElement(&#39;div&#39;,childFooter),
      ]
    )
  },
}
</script>

<style scoped>
.showContent
  letter-spacing 2px
  background-color red
  .childHeader
    color blue
    font-size 24px
</style>

##2.5 Scope slot

Usage of this.$scopedSlots

1. Parent component

<template>
  <div id="app">
    <myRender :myLayout="layout">
      <template slot-scope="childMsg">
        <div >
          {{childMsg.text}}
        </div>
      </template>
    </myRender>
  </div>
</template>

<script>
import myRender from &#39;./components/myRender&#39;
export default {
  data(){
    return{
      layout:{
        header:&#39;头部&#39;,
        footer:&#39;脚部&#39;
      }
    }
  },
  components:{
    myRender
  }
}
</script>

2. Child component

<script>
export default {
  render:function(createElement) {
    let self = this
    return createElement(
      &#39;div&#39;,
      {
        style:{
          width:&#39;100%&#39;
        },
      },[
        self.$scopedSlots.default({
          text: this.myLayout.header
        })
      ]
    )
  },
  props:{
    myLayout:Object
  }
}
</script>

[Related recommendations:

vuejs video tutorial

, web front-end development】

The above is the detailed content of Which command does the vue rendering function use?. For more information, please follow other related articles on the PHP Chinese website!