.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>
    )
  }
}