render Function and virtual dom

fictitious dom

What is it? ： Used to describe the dom Of js object

effect ：vue Updating the real DOM front , fictitious dom Will be carried out in diff operation , Compare the virtual before and after the update DOM The different parts of the structure , Then, the asynchronous update queue is used to update the difference part to the real DOM in , Thus reducing the ultimate need to be true DOM Number of operations performed on , Improve the efficiency of page rendering

let vDom = {
  tag: "div",
  attributes: {
    id: "vdom",
  },
  children: {},
};

From template to reality dom：

Templates -> Compile -> become render function -> fictitious dom -> real dom

If used directly render function , The compilation process of the template is omitted ,vue Run faster

render function

render Function is used to realize virtual dom Of

Use render Function instead of template function

No need to use vue Built in instructions , I can't use it , We can all pass native js To achieve

render Function by createElement Parameter to create a virtual dom;

createElement Constitute the vue virtual dom The template of , It has three parameters ：

The first parameter is required ： It could be a html label , It can also be a component or function

The second parameter is optional ： Data objects , The dom Node configuration

The third parameter is optional ： Group nodes

<script>
export default {
  render: (createElement) => {
    return createElement(
      //  The first parameter ： Mandatory , Tag name 
      "div",
      //    The second parameter ： Optional objects , Label related information 
      {
        //  And  `v-bind:class`  Of  API  identical ,
        //  Accept a string 、 An array of objects or strings and objects 
        class: {
          baseClass: true,
          bar: false,
        },
        //  And  `v-bind:style`  Of  API  identical ,
        //  Accept a string 、 object , Or an array of objects 
        style: {
          color: "red",
          fontSize: "16px",
        },
        //  ordinary  HTML  characteristic 
        attrs: {
          id: "foo",
        },
        //  Components  prop
        props: {
          myProp: "bar",
        },
        // DOM  attribute 
        // domProps: {
        //  innerHTML: ` love you `,
        // },
        //  The event monitor is  `on`  Within the properties ,
        //  But no longer support such as  `v-on:keyup.enter`  Such a decorator .
        on: {
          click: function() {
            console.log(6688);
          },
        },
      },
      //    The third parameter ： Optional array , Child nodes are related 
      [" love you !", createElement("p", [" mua "])]
    );
  },
};
</script>
<style lang="less" scoped>
.baseClass {
  background: #ccc;
}
</style>
.baseClass {
  background: #ccc;
}
</style>