4, the lower-level render function

Use the render function to display different H tags

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    template: ` 
       
         hello 
        `
  });

  // Different parameters render different labels
  app.component("my-title", {
    props: ['level']./ / use the render
    render(){
      const { h } = Vue;
      // Anonymous slot this.$slots.default()
      return h('h' + this.level, {}, this.$slots.default());
      // return h('h' + this.level, {}, 'hello world');
    }
    // Using template is complicated to write
    // template: `
    // 

        

    // 

        

    // 

        

    // 

        

    // 

        

    / / `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Compare the render function with the template

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    template: ` 
       
         hello 
        `
  });

  // Different parameters render different labels
  app.component("my-title", {
    props: ['level']./ / true DOM
    // <div>hello</div>
    // render function -> virtual DOM (a mapping of real DOM)
    / / {
    // tagName: 'div',
    // text: 'hello',
    // attributes: {}
    // }
    // The benefits of using render
    // 1. Make vUE performance faster;
    // 2. Make vUE more cross-platform;
    / / use the render
    render(){
      const { h } = Vue;
      // Anonymous slot this.$slots.default()
      / / virtual DOM
      // tagName: 'h' + this.level
      / / the attributes: {}
      / / text: this. $slots. The default ()
      // Vue converts the virtual DOM into the real DOM, which is displayed on the page
      return h('h' + this.level, {}, this.$slots.default());
      // return h('h' + this.level, {}, 'hello world');
    }
    // Using template is complicated to write
    // template: `
    // 

        

    // 

        

    // 

        

    // 

        

    // 

        

    / / `
  });

  const vm = app.mount('#root');
</script>

</html>
Copy the code

Perform logical

Template — > render function — > H series tags — > virtual DOM (JS object) — > Real DOM — > Display to page;

Infinitely nested render

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>hello vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    template: ` 
       
         hello 
        `
  });

  // Different parameters render different labels
  app.component("my-title", {
    props: ['level'].render(){
      const { h } = Vue;
      return h('h' + this.level, {}, [
        this.$slots.default(),
        h("div", {},"I'm div content - nested 1",
          h("h1", {style:"color:red;"}, "I'm H1 content - nested 2")]]); }});const vm = app.mount('#root');
</script>

</html>
Copy the code

The results