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：

首先，您必须了解所有渲染：

渲染器：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”，在许多虚拟域实现中通常使用。 “ Hyperscript”本身代表“生成HTML结构的脚本”，因为HTML是“超文本标记语言”的首字母缩写。

$ mount允许您在需要时显式安装Vue实例。这意味着您可以延迟vue实例的安装，直到页面中存在特定元素或某些异步过程完成为止，这在将vue添加到将元素注入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://vuejs.org/v2/guide/instance.html

在App.vue中拥有所有模板代码（而在index.html的#app div中没有），我们可以使用仅运行时的Vue版本，该版本小于完整版本。

但让我们分手吧：

el: '#app',将在您的index.html文件中查找div <div id="app"></div>;
路由器，将允许您在全局范围内使用路由器；
组件：{App}，导入App.vue，以及所有已导入到其中的组件，通常将人们经常放在此文件中：侧栏组件，标题组件，可导航的内容；

4。template: "<App/>"，只有在导入其中导入的App.vue组件或在此文件中创建的HTML后，才会使用id =“ app”在HTML中创建div。被这个div包裹。人们经常使用<router-view>来加载路由器页面组件。

第二个实例的目的是拥有更整洁的index.html并将所有内容包含在App.vue中

Vue.js的各种入口点令人困惑

1 个答案: