.vueファイルレンダリングプロセス&jsxのvueプロジェクトへの応用

vueレンダーパス

<template>
    <div id="app">
        <div id="cover">
            <Header></Header>
            <Todo></Todo>
            <Footer></Footer>
        </div>
    </div>
</template>
<script>
import Header from './todo/header.vue'
export default {
    components: {
        Header,
        Footer,
        Todo,
    }
}
</script>
<style lang="stylus" scoped >

</style>

.vueファイルのtemplate部分はvue-loaderによってrenderメソッドに解析され、私たちのオブジェクトに配置されます.vueにデータ更新があるたびに、renderメソッドを再呼び出して新しいhtml構造を生成してdomに挿入し、最終的に私たちの結果を表示します.
jsxレンダリングプロシージャ
jsxにはrenderメソッドがあり、renderを呼び出すたびに結果が得られます.

import '../assets/styles/footer.styl'
export default {
  data() {
    return {
      author: 'Evan'
    }
  },
  render() {
    return (
      <div id="footer">
        <span>Written by {this.author}</span>
      </div>
    )
  }
}