vue3笔记1之‘优势、创建、新特性、目录结构’

一、vue3的优势

1. 性能的提升

打包大小减少41%

初次渲染快55%, 更新渲染快133%

内存减少54%

2.源码的升级

使用Proxy代替defineProperty实现响应式

重写虚拟DOM的实现和Tree-Shaking

3.拥抱TypeScript

Vue3可以更好的支持TypeScript

二、新的特性

1.Composition API（组合API）

setup配置

ref与reactive

watch与watchEffect

provide与 inject

2.新的内置组件

Fragment

Teleport

Suspense

3.其他改变

新的生命周期钩子

data 选项应始终被声明为一个函数

移除keyCode支持作为 v-on 的修饰符

三、创建vue3项目

1. 使用 vue-cli 创建

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上

vue --version

## 安装或者升级你的@vue/cli

npm install -g @vue/cli

## 创建Vue项目，选择Vue3

vue create vue_test

## 启动

cd vue_test

npm run serve

2.可视化面板创建

vue ui 

创建项目的时候预设选择Vue3即可

3.vite新一代的前端构建工具，跟webpack类似的

3-1.优势：

开发环境中，无需打包操作，可快速的冷启动。

轻量快速的热重载（HMR）。

真正的按需编译，不再等待整个应用编译完成。

3-2.传统构建模式，是将所有资源都打包好，再上线,而Vite有点按需加载的意思在那里了~

3-3.Vite来创建一个Vue3的项目

## 创建工程

npm init vite-app yk_vue3

## 进入工程目录

cd yk_vue3

## 安装依赖

npm install

## 运行

npm run dev

四、目录结构

1. App.vue在template标签里可以没有根标签了

<template>
	<!-- Vue3组件中的模板结构可以没有根标签 -->
	<img alt="Vue logo" src="./assets/logo.png">
	<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

2.main,js不一样

vue2:

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

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

vue2的vm

const vm = new Vue({
  render: h => h(App),
})

console.log(vm)

vm.$mount('#app')

vue3:

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

createApp(App).mount('#app')

对比：

// 引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

// 创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”)
const app = createApp(App)
console.log(app)
// 挂载
app.mount('#app')

这里的app到底是啥，我们输出到控制台看看