一、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