Vue3

简介

2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）
耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者
github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0

Vue3带来了什么

性能的提升

打包大小减少41%
初次渲染快55%, 更新渲染快133%
内存减少54%

……

源码的升级

使用Proxy代替defineProperty实现响应式
重写虚拟DOM的实现和Tree-Shaking（移除未用的代码，减少构建体积）

……

拥抱TypeScript

Vue3可以更好的支持TypeScript

新的特性

Composition API（组合API）
- setup配置
- ref与reactive
- watch与watchEffect
- provide与inject
- ……
新的内置组件
- Fragment
- Teleport
- Suspense
其他改变
- 新的生命周期钩子
- data 选项应始终被声明为一个函数
- 移除keyCode支持作为 v-on 的修饰符
- 移除了filter
- ……

Composition API 的优势

Options API 存在的问题

使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改。

Composition API 的优势

我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。

组件新增

Fragment

在Vue2中: 组件必须有一个根标签
在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
好处: 减少标签层级, 减小内存占用

Teleport

什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。

<teleport to="移动位置">
	<div v-if="isShow" class="mask">
		<div class="dialog">
			<h3>我是一个弹窗</h3>
			<button @click="isShow = false">关闭弹窗</button>
		</div>
	</div>
</teleport>

Suspense

等待异步组件时渲染一些额外内容，让应用有更好的用户体验

使用步骤：

异步引入组件

1 2	import {defineAsyncComponent} from 'vue' const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

使用Suspense包裹组件，并配置好default 与 fallback

<template>
	<div class="app">
		<h3>我是App组件</h3>
		<Suspense>
			<template v-slot:default>
				<Child/>
			</template>
			<template v-slot:fallback>
				<h3>加载中.....</h3>
			</template>
		</Suspense>
	</div>
</template>

创建Vue3.0工程

使用 vue-cli 创建

官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve

使用 vite 创建

官方文档：https://v3.cn.vuejs.org/guide/installation.html#vite

vite官网：https://vitejs.cn

什么是vite？—— 新一代前端构建工具。
优势如下：
- 开发环境中，无需打包操作，可快速的冷启动。
- 轻量快速的热重载（HMR）。
- 真正的按需编译，不再等待整个应用编译完成。
传统构建与 vite构建对比图

## 创建工程
# npm 6.x
npm create vite@latest my-vue-app --template vue
# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue
# yarn
yarn create vite my-vue-app --template vue
# pnpm
pnpm create vite my-vue-app --template vue

## 进入工程目录
cd my-vue-app
## 安装依赖
npm install
## 运行
npm run dev

App相关

Composition API

computed watch

<template>
  {{ hello }}
  <button @click="handler">click</button><br>
  {{ user }}
  <button @click="user.username='tom'">click</button><br>
  {{ number }}
  {{ count }}
  <button @click="count=10">click</button><br>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
let hello = ref('123123')
let user = reactive({
  username:'jack'
})
const handler = () => {
  console.log(hello)
  hello.value = '1008611'
}

// 计算属性
// 只有get
let number = computed(()=>{
  return 13
})
// 带get和set
let _count = ref(20)
let count = computed({
  get(){
    return _count
  },
  set(v){
    _count.value = v
  }
})

// watch
// 基础监听
watch(_count,(newValue,oldValue)=>{
  console.log('count变化了',newValue,oldValue)
})

watch(()=>user.username,(newValue,oldValue)=>{
  console.log('user.username变化了',newValue,oldValue)

})

生命周期

vue2生命周期	vue3生命周期
beforeCreate	setup
created	setup
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnMount
destroyed	onUnMounted

一个简单的hooks

export const handlerUpdate = ()=>{
    console.log('修改相关业务');
}

class User{
    constructor(name){
        this.name = name
    }
    sayhello(){
        console.log('hello')
    }
}

import {reactive} from 'vue'
export const newReactiveUser = (username)=>{
    let user = reactive(new User(username))
    return user
}