[JavaScript知识库]vue3的mainjs入口文件写法以及template模板的细微差异

以下仅是对main.js入口文件简单对比分析

vue2入口文件mian.js中引入写法

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

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

vue3入口文件mian.js中引入写法

import { createApp } from 'vue';
import App from './App.vue';

//createApp(App).mount('#app')可分解为：
/*
 创建应用实例对象-app类似于之前vue2中的vm，但app比vm更轻
const app = createApp(App)
挂载
app.mount('#app')
*/
// 连写
createApp(App).mount('#app');

vue2的组件模板文件template需要写根标签，例如

<template>
<div>
	  <div>{{ num }}</div>
	  <li v-for="item in obj.b" :key="item">
	    <a href="">{{ item }}</a>
	  </li>
</div>
</template>

vue3的组件模板文件template可以不用写根标签，例如

<template>
  <!-- vue3的template可以不用写根标签 -->
  <div>{{ num }}</div>
  <li v-for="item in obj.b" :key="item">
    <a href="">{{ item }}</a>
  </li>
</template>