Vue3带来了什么?
1.性能的提升
打包减少;初次渲染快;内存减少。
2.源码升级
使用Proxy代替defineProperty实现响应式;
重写虚拟DOM的实现和Tree-Shaking
3.使用了Typescript
4.新的特性
composition API 组合API
setup配置
ref与relative
watch与watchEffect
5.新的内置组件
Fragment
Teleport
Suspense
6.其他
新的生命周期钩子
data选项应该始终被声明为一个函数
移除keycode支持作为v-no的修饰符
Vue3.0过程的创建
1.使用vue-cli创建
首先检查版本号 vue --version 大于4.5版本 否则重新安装
创建 在当前目录下cmd 输入vue create vue3_test
启动 cd vue3_test npm run serve
2.使用vite创建
Vite是新一代前端构建工具,与Webpack工作模式不同,vite可以无需打包快速冷启动,热重载。左边是之前的webpack 右边是vite
相比启动速度,vite更快 vite还没大规模应用,因此还是使用cli创建出来的工程
但是由于多数人使用vue-cli创建,因此我们也使用vue-cli来创建
与vue2创建的工程不同:
在mian.js文件中
//引入的不再是vue构造函数,引入的是一个名为createAPP的工厂函数
import { createApp } from 'vue'
import App from './App.vue'
//创建应用实例对象--app(类似之前Vue2中的vm,但是app比vm更轻)
createApp(App).mount('#app')
apply.mount('#app')
引入的不再是vue构造函数,引入的是一个名为createAPP的工厂函数
创建应用实例对象–app(类似之前Vue2中的vm,但是app比vm更轻)
与之前不同:vue2中mian.js
/*const vm = new Vue({
render:h=>h(App)
})
vm.$mount('#app')*/
Vue3组件中的App.vue中的template中可以没有根标签 div