进入vue3
vue3的简介：发布时间：2020.9
开发时间：耗时2年多
作者：尤雨溪
对于vue2版本的提升
一、性能提升
- 打包大小减少41%
- 初次渲染快51%，更新渲染快133%
- 内存占用减少54%
二、源码升级
- 使用Proxy 代替Object.defineProperty 实现双向数据绑定
- 重写虚拟DOM的实现和Tree-Shaking
- vue3 更好的支持typescript
三、新的特性
1.组合式api方式
setup配置、ref和reactive、watch和watchEffect、provide和inject
2.新的内置组件
Fragment、Teleport、Suspense
注：其他的改变新的生命周期钩子，移除KeyCode作为v-on的修饰符
对于vue3项目的新建
在创建vue3项目前要先检查自己的脚手架版本配置：
1.确保vue-cli 脚手架的版本在4.5.0版本以上，这样才能创建vue3项目工程。（查看自己的脚手架版本：vue -V 或 vue - - version
2.版本过低的情况下可以使用npm install -g @vue/cli进行新版本的安装
创建项目：vue create 文件名称
进入项目文件夹 ： cd 文件名称
启动项目：npm run serve
在创建项目时可以依据自己的需求进行配置
最后一个为手动选择功能可根据需求来选择自己项目中涵盖的东西
1.入口文件与vue2进行对比：
vue3中的main.js
// vue3 入口文件 main.js
// 引入的不是Vue构造函数了，而是createApp 这个工厂函数（工厂函数就是返回值为一个对象的函数）
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App).mount('#app') // app 相当于vue2中的vm，但是比vm轻，里面绑定的属性和方法更少，而不是像vm那样用的不用的都绑上，显的有点重
vue2中的main.js
importVuefrom'vue'
importAppfrom'./App.vue'
const vm =newVue({
render:h=>h(App),
}).$mount('#app'
对比：
//vue3 引入的是createApp 这个函数，而不是vue2中的的 Vue 构造函数啦。
//vue3中的 app 类似于之前vue2中的vm, 但是app应用实例对象比vm 更轻，里面绑定的属性和方法更少
在app组件标签中在vue2中在组件的html中要使用根组件把元素套起来。
在vue3中可以不使用根组件。
vite对于webpack的提升
1.新的工程创建工具能够更加轻量的热加载，实现更快的服务启动
2.对于ts等拥有更好的支持能够做到开箱即用
3.按需编译不再等待应用编译完成
使用vite创建项目
npm create vue@latest
入口文件为index.html
在index.html中重要的东西
1.引入main.ts
2.展示的位置
在main.ts中有createApp(App）.mount(#app)
在src中两个重要的东西
1.main.ts
2.app.vue
//在main.ts中解释
//引入createApp用于创建应用
import {createApp} from "vue"
引入App根组件
import App from “./App.vue”
如果飘红那证明在app.vue中没东西
在组件中基本结构
就是template
script如果出现下划线证明要写ts但在工程中依旧可以使用js在里面脸上lang="ts"
style
//挂载
createApp (App）.mount("#app")
总结：1.在vite项目中，index.html是项目入口文件，在项目的最外层
2.加载index.html后，vite解析<script type="module" src="xxx"指向的js
3.vue3中是通过createApp函数创建一个实例
