Vue3.0入门基础教学(一)

1. 认识 Vue3

1) 了解相关信息

• Vue.js 3.0 “One Piece” 正式版在今年 9 月份发布
• 2 年多开发, 100+位贡献者, 2600+次提交, 600+次 PR
• Vue3 支持 vue2 的大多数特性
• 更好的支持 Typescript

2) 性能提升

• 打包大小减少 41%
• 初次渲染快 55%, 更新渲染快 133%
• 内存减少 54%
• 使用 Proxy 代替 defineProperty 实现数据响应式
• 重写虚拟 DOM 的实现和 Tree-Shaking

3) 新增特性

• Composition (组合) API
• setup
  • ref 和 reactive
  • computed 和 watch
  • 新的生命周期函数
  • provide 与 inject
  • …
• 新组件
  • Fragment - 文档碎片
  • Teleport - 瞬移组件的位置
  • Suspense - 异步加载组件的 loading 界面
• 其它 API 更新
  • 全局 API 的修改
  • 将原来的全局 API 转移到应用对象
  • 模板语法变化

2. 创建 vue3 项目

1) 使用 vue-cli 创建

## 安装或者升级
npm install -g @vue/cli
## 保证 vue cli 版本在 4.5.0 以上
vue --version
## 创建项目
vue create my-project

然后的步骤

• Please pick a preset - 选择 *Manually select features*
• Check the features needed for your project - 选择上 *TypeScript* ，特别注意点空格是选择，点回车是下一步
• Choose a version of Vue.js that you want to start the project with - 选择 *3.x (Preview)*
  -然后一路回车就好了

2) 使用 vite 创建

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

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

3.Composition API

1. Composition API(常用部分)

composition-api 文档:(opens new window)

1) setup

• 新的 option, 所有的组合 API 函数都在此使用, 只在初始化时执行一次
• 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用

2) ref

• 作用: 定义一个数据的响应式
• 语法: const xxx = ref(initValue):
  • 创建一个包含响应式数据的引用(reference)对象
  • js 中操作数据: xxx.value
  • 模板中操作数据: 不需要.value
• 一般用来定义一个基本类型的响应式数据

<template>
  <h2>{
   {
    count }}</h2>
  <hr />
  <button @click="update">更新</button>
</template>

<script>
import {
    ref } from 'vue'
export default {
   
  /* 在Vue3中依然可以使用data和methods配置, 但建议使用其新语法实现 */
  // data () {
   
  //   return {