[Vue.js] render関数について（描画を理解）

Vue.jsにはrender関数というものがあります。Hello Worldの表示はVueインスタンスにdataを指定して、それを表示させるというシンプルな構造でした。templateとrenderにはそれぞれ特徴があるので両方学んでおくと良いですね。

Contents

1 render関数に触れてみる
2 renderとは

render関数に触れてみる

Vue-cliをインストールするとrender関数に触れることができます。
Vue-cliのインストールは下記記事からどうぞ。
[Vue.js] Vue-CLIの使い方
[基本的なVue.jsのソース]

<html>
  <head>
    <meta charset="utf-8">
    <title>vue hello world!</title>
    	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">{{ message }}</div>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: 'Hello World'
        }
      })
    </script>
  </body>
</html>

<html>

<head>

<title>vue hello world!</title>

</head>

<body>

<div id="app">{{ message }}</div>

const app = new Vue({

el: '#app',

data: {

message: 'Hello World'

}

})

</script>

</body>

</html>

Vue-cliのmain.jsファイルのVueインスタンスを見てみると、dataではなく、renderが出てきます。
ソースを見てみると、関数の形をしているようです。
[Vue-cliのmain.js]

new Vue({
  render: h => h(App),
}).$mount('#app')

new Vue({

render: h => h(App),

}).$mount('#app')

renderとは

Vueインスタンスは
new Vue()で記載し、その中にオプションオブジェクトを指定してきますね。
dataやpropsなどもオプションオブジェクトです。
renderも同様です。

renderはHTMLをビルドする描画用の関数になっています。

<html>
  <head>
    <meta charset="utf-8" />
    <title>vue hello world!(component ver)</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <hello-world></hello-world>
    </div>
 
  <script>
      Vue.component('hello-world', {
        template: '<h1>Hello World</h1>',
      });
 
      var app = new Vue({
        el: '#app',
        data: {},
      });
    </script>

  </body>
</html>

<html>

<head>

<title>vue hello world!(component ver)</title>

</head>

<body>

<hello-world></hello-world>

</div>

Vue.component('hello-world', {

template: '<h1>Hello World</h1>',

});

var app = new Vue({

el: '#app',

data: {},

});

</script>

</body>

</html>

<html>
  <head>
    <meta charset="utf-8" />
    <title>vue render </title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <body>
      <div id="app"></div>
    
    <script>
    var app = new Vue({
      el: '#app',
      render: function(createElement){
        return createElement('h1','Hello World')
      }
    })
    </script> 

  </body>
</html>

<html>

<head>

<title>vue render </title>

</head>

<body>

var app = new Vue({

el: '#app',

render: function(createElement){

return createElement('h1','Hello World')

}

})

</script>

</body>

</html>

今度はrenderとdataを連動させてみます。
[renderとdata]

<html>
  <head>
    <meta charset="utf-8" />
    <title>vue render </title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <body>
      <div id="app"></div>
    
    <script>  
    var app = new Vue({
      el: '#app',
      data: {
    message: 'Hello World'
  },
      render: function(createElement){
        return createElement('h1',this.message)
      }
    })
    </script>

  </body>
</html>

<html>

<head>

<title>vue render </title>

</head>

<body>

var app = new Vue({

el: '#app',

data: {

message: 'Hello World'

render: function(createElement){

return createElement('h1',this.message)

}

})

</script>

</body>

</html>

SearchLight