Vue3-1-概述与创建项目

概述 Vue3支持vue2的大多数特性更好的支持Typescript打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%使用Proxy代替defineProperty实现数据响应式重写虚拟DOM的实现和Tree-ShakingComposition (组合) API 与Vue2的区别 Vue3支持大部分Vue2特性Vue3中设计了一套强大的组合API代替Vue2中的option API，复用性更强更好支持TSVue3中使用Proxy和Reflect代替了Vue2中的Object.defineProperty()来实现响应式数据重写了虚拟DOM，渲染速度更快新的组件 Fragment 片段（不再需要包括在根标签里）Teleport 瞬移（到达指定HTML标签处）Suspense 不确定（异步任务时友好显示） 新的脚手架工具Vite 创建Vue3项目 使用 vue-cli 创建 下载Vue脚手架npm install -g @vue/cli查看是否成功，成功出现版本号vue --version创建自己的项目vue create my-project选第三个然后一路默认cd my-projectnpm run serve浏览器中输入 http://localhost:8080/ 就能看到Vue界面了 使用 vite 创建 vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发它做到了本地快速开发启动, 在生产环境下基于 Rollup 打包快速的冷启动，不需要等待打包 *** 作即时的热模块更新，替换性能和模块数量的解耦让更新飞起真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变使用 npm i create-vite-appnpm init vite-app cd npm installnpm run dev 基本介绍

App.vue中个部分信息介绍

<template> 
  
  <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拦截