Vue3-1-概述与创建项目

概述

1. Vue3支持vue2的大多数特性
2. 更好的支持Typescript
3. 打包大小减少41%
4. 初次渲染快55%, 更新渲染快133%
5. 内存减少54%
6. 使用Proxy代替defineProperty实现数据响应式
7. 重写虚拟DOM的实现和Tree-Shaking
8. Composition (组合) API

与Vue2的区别

1. Vue3支持大部分Vue2特性
2. Vue3中设计了一套强大的组合API代替Vue2中的option API，复用性更强
3. 更好支持TS
4. Vue3中使用Proxy和Reflect代替了Vue2中的Object.defineProperty()来实现响应式数据
5. 重写了虚拟DOM，渲染速度更快
6. 新的组件

• Fragment 片段（不再需要包括在根标签里）
• Teleport 瞬移（到达指定HTML标签处）
• Suspense 不确定（异步任务时友好显示）

7. 新的脚手架工具Vite

创建Vue3项目

使用 vue-cli 创建

1. 下载Vue脚手架npm install -g @vue/cli
2. 查看是否成功，成功出现版本号vue --version
3. 创建自己的项目vue create my-project
4. 选第三个然后一路默认
5. cd my-project
6. npm run serve
7. 浏览器中输入 http://localhost:8080/ 就能看到Vue界面了

使用 vite 创建

1. vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发
2. 它做到了本地快速开发启动, 在生产环境下基于 Rollup 打包
3. 快速的冷启动，不需要等待打包操作
4. 即时的热模块更新，替换性能和模块数量的解耦让更新飞起
5. 真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变
6. 使用

• npm i create-vite-app
• npm init vite-app
• cd
• npm install
• npm run dev

基本介绍

App.vue中个部分信息介绍

<template> <!-- 模板 -->
  <!-- 在vue2中必须要有一对根标签，在vue3中可以没有 -->
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" /> <!-- 使用这个子组件 -->
</template>

<script lang="ts">
// 可以使用ts代码
import HelloWorld from './components/HelloWorld.vue'
// 引入组件

//暴露出去一个定义好的组件
export default {
      
      
  name: 'App', // 当前组件名App
  components: {
      
      
    HelloWorld // 注册子级组件
  }
}
</script>

main.ts基本介绍

// 主程序入口
import {
    
     createApp } from 'vue' // 引入Vue解构除对应应用
import App from './App.vue' // 引入App所有父级组件
import './index.css' // 引入CSS样式

createApp(App).mount('#app') // 创建App应用返回对应的实例对象，并用mount拦截