vue学习笔记[3]

main.js里的一些疑问

这段时间正在尝试使用vue做一个小玩意，接触了vue-router，也接触了vuex。学习了一段时间后，我要从main.js开始梳理我的学习过程 。

使用vue大多会使用vue-cli来创建工程，那创建工程后，在根目录下的index.html里主要内容只有

<div id="app"></div>

然后，在main.js里是这样写的

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

如果只看以上代码，没有对比网上其他示例代码的话，可能发现不了什么。但是如果对比其他代码，会发现有很多好玩的地方。比如我在网上的一些demo里发现，有些示例中new Vue()却写成这样

// 示例一
new Vue({
  el: '#app',
  router
})

而我按照这样写，得到却是空白页。

我不得不去看官方文档，来看这个图

如果在new Vue()没有template选项，就会编译el及其后代元素。而我的index.html只有<div id="app"></div>所以显示为空白。

之后打开，示例一中的index.html却看到了

// 示例一
<div id="app">
<router-view></router-view>
</div>

看到这里我就大概明白，我为什么会得到一个空白页，而人家得到的却不是空白页了。原因在于人家在index.html就使用了router让页面得到了显示。

再来看第二个示例，main.js如下

// 示例二
new Vue({
  router,
  store,
  render: h => h(App) 
}).$mount('#app')

使用了render选项，h=>h(App)是什么？

我从思否上直接复制一段如下：

render: h => h(App) 是下面内容的缩写：

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

进一步缩写为(ES6 语法)：

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

再进一步缩写为：

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

按照 ES6 箭头函数的写法，就得到了：

render: h => h(App);

Vue.js 里面的 createElement 函数，这个函数的作用就是生成一个 VNode节点，render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。

关于$mount与el

我目前的理解是没有太大区别，都是挂载。

template 选项与render选项

现在还有一个问题是

  components: { App },
  template: '<App/>'

与

render: h=>h(App)

有什么区别？

来看官方文档 - 渲染函数 & JSX

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。