Vue程序入口及渲染

万物归宗，追根溯源。齐天大圣起源于灵石崩裂，程序入口起源于main函数，vue也不例外，main.js就是vue程序的入口。

从最简单入手，main.js里只写这一行

console.log('Hello Vue~');

看下运行结果

image-20200910171824793.png

改变一下，渲染个页面出来

新建一个页面App.vue

<template>
  <div id="app">
    <h1>Hello, Vue~</h1>
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

把main.js修改如下

import Vue from 'vue'
import App from './App.vue'


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

yarn serve

image-20200910173445184.png

vue中，html标签必须套在<template>中才可被识别。

但是Hello,Vue~是hard code的，我们把它变为动态的。

插值表达式

把App.vue稍作修改, Hello Vue~修改为{{message}}, 在script中，定义data()方法，返回message的值。结果和上文一致。

<template>
  <div id="app1">
    <h1>{{message}}</h1>
  </div>
</template>

<script>

  export default {
    name: 'App',
    data() {
      return {
        message: 'Hello Vue~'
      };
    }
  }

探究下main.js中的 render: h => h(App) 到底是什么意思

这是个es6语法

render: h => h(App)

等价于

render: h => {return h(App);}

等价于

render: function(h) { return h(App);}

等价于

render: function(createElement) { return createElement(App); }

这个语句的意思就是渲染页面，通过render函数。

创建vue实例时，通过render callback来渲染dom结构；render函数的参数是createElement函数，createElement函数的参数是App;这么设计的目的是渲染(render)的形式可以多种多样，比如createXXX,updateXXX,deleteXXX,而具体操作的对象也是多样化，只不过默认是create。