一、Vue3简介
2020年9月，Vue.js3.0'One Piece'正式版公布，vue3反对vue2大多数个性，并更好的反对Typescript.
性能方面，相比Vue2,vue3的性能晋升了许多

  • 打包大小缩小41%
  • 首次渲染快55%，更新渲染快133%
  • 内存缩小54%
  • 应用Proxy代替defineProterty实现数据响应式
  • 重写虚构DOM的实现和Tree-Shaking（精简模块，去掉未应用过的）

二、应用vue-cli创立vue3我的项目
1、查看vue-cli版本，必须在4.5.0以上

vue -V

2、若版本过低，需降级(Vue CLI由原来的vue-cli改成了@vue/cli。若曾经全局装置了旧版本的vue-cli须要通过npm uninstall vue-cli -g卸载)

npm install -g @vue/cli

3、创立我的项目

vue create my-project

  • 抉择第三个，按Enter

  • 而后抉择TypeScript,按空格选中。（临时不选vue-router和vuex）
  • 按Enter

  • 选3.x
  • 之后的始终Enter


创立实现，cd到创立的我的项目门路下，输出npm run serve开启一个node服务

4、我的项目简介

  • 我的项目构造

  • main.ts
//程序的主入口文件，（ts文件）//引入createApp函数，创立对应的利用，产生利用的实例对象import { createApp } from 'vue'//引入App组件（所有组件的父级组件）import App from './App.vue'//创立App利用，返回对应的实例对象，调用mount办法挂载到id为app的DOM中（public文件夹下的index.html）createApp(App).mount('#app')
  • App.vue
<template><!-- Vue2中的html模板必须要有一对根标签，Vue3组件的html模板中能够没有根标签 -->  <img alt="Vue logo" src="./assets/logo.png">  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/></template><!--script标签能够设置lang为ts,反对ts代码--><script lang="ts">// defineComponent函数，作用是定义一个组件import { defineComponent } from 'vue';import HelloWorld from './components/HelloWorld.vue';//应用defineComponent()对外裸露一个定义好的组件//函数外部能够传入一个配置对象，对象与vue2统一export default defineComponent({  name: 'App',   //以后组件的名字  components: {  //注册组件    HelloWorld   //注册一个子组件  }});</script><style>#app {  font-family: Avenir, Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;}</style>

三、应用Vue3与vue2通过cli脚手架搭建的我的项目区别
1、vue2组件中必须有一个根标签,vue3能够没有根标签
2、vue2实例化应用new Vue(),vue3应用createApp()
3、vue2挂载DOM的形式是应用el属性，Vue3应用mount()办法传入DOM选择器。
4、vue3注册组件应用defineComponent办法
5、vue3反对TypeScript