vue.js - Vuejs 不同种类的入口点令人困惑

Question

我创建了两个 Vuejs 项目。 第一个 main.js 看起来像这样:

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

import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";



Vue.config.productionTip = false

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

第二个看起来像这样:

import Vue from "vue";
import App from "./App";
import router from "./router";

import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";


Vue.use(BootstrapVue);

Vue.config.productionTip = false;

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

请有人向我解释这段代码之间的区别，特别是用两种不同的方式创建新的 vue 实例？

Answer 1

对于第一个 main.js:

首先你必须了解所有的渲染:

render: h => h(App) 是以下内容的简写:

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

可以缩短为:

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

可以再次缩短为(如上所述，h 是 createElement 的别名):

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

然后进一步缩短为(使用 ES6“粗箭头”语法):

render: h => h(App);

H，它来自术语“hyperscript”，在许多虚拟dom实现中常用。 “Hyperscript”本身代表“生成HTML结构的脚本”，因为HTML是“超文本标记语言”的缩写。

并且 $mount 允许您在需要时显式挂载 Vue 实例。这意味着您可以延迟 vue 实例的安装，直到您的页面中存在特定元素或某个异步过程完成，这在将 vue 添加到将元素注入(inject) DOM 的遗留应用程序时特别有用，我也使用过当我想在多个测试中使用相同的 vue 实例时，这在测试中经常出现:

// Create the vue instance but don't mount it
const vm = new Vue({
  template: '<div>I\'m mounted</div>',
  created(){
    console.log('Created');
  },
  mounted(){
    console.log('Mounted');
  }
});

// Some async task that creates a new element on the page which we can mount our instance to.
setTimeout(() => {
   // Inject Div into DOM
   var div = document.createElement('div');
   div.id = 'async-div';
   document.body.appendChild(div);

  vm.$mount('#async-div');
},1000)

对于第二个，我强烈建议您查看当前的 Vue 文档:

https://v2.vuejs.org/v2/guide/instance.html

将所有模板代码放在 App.vue 中(而不是放在 index.html 的 #app div 中)允许我们使用 Vue 的运行时版本，它比完整版本小。

但让我们把它分解:

1. el: '#app',将在您的 index.html 文件中查找 div <div id="app"></div> ;

2. 路由器，将允许您在全局范围内使用路由器；

3. 组件:{ App }，导入你的 App.vue，以及你在那里导入的所有组件，通常你把人们经常放在这个文件中:侧边栏组件，标题组件，可导航的东西;

4. template: "<App/>" , 将在你的 HTML 中创建一个 id="app"的 div，只有在它导入你在那里导入的 App.vue 组件或在这个文件中创建的 HTML 之后，你文件中的所有内容都将被这个 div 包装。人们经常使用 <router-view>加载路由器页面组件。

第二个实例的目的是让 index.html 更干净，并将所有内容都放在 App.vue 中