Vue3 入门到进阶：vite 搭建、响应式原理与新组件实战
Vue3 入门到进阶：vite 搭建、响应式原理与新组件实战
目录
- Vue3快速上手
- 1.Vue3简介
- 2.Vue3带来了什么
- 1.性能的提升
- 2.源码的升级
- 3.拥抱TypeScript
- 4.新的特性
- 一、创建Vue3.0工程
- 1.使用 vue-cli 创建
- 2.使用 vite 创建
- 二、常用 Composition API
- 1.拉开序幕的setup
- 2.ref函数
- 3.reactive函数
- 4.Vue3.0中的响应式原理
- vue2.x的响应式
- Vue3.0的响应式
- 5.reactive对比ref
- 6.setup的两个注意点
- 7.计算属性与监视
- 1.computed函数
- 2.watch函数
- 3.watchEffect函数
- 8.生命周期
- 9.自定义hook函数
- 10.toRef和toRefs
- 三、其它 Composition API
- 1.shallowReactive 与 shallowRef
- 2.readonly 与 shallowReadonly
- 3.toRaw 与 markRaw
- 4.customRef
- 5.provide 与 inject
- 6.响应式数据的判断
- 四、Composition API 的优势
- 1.Options API 存在的问题
- 2.Composition API 的优势
- 五、新的组件
- 1.Fragment
- 2.Teleport
- 3.Suspense
- 六、其他
- 1.全局API的转移
- 2.其他改变
- 3.Vue3.x 中eventBus – mitt用法
Vue3快速上手
1.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
2.Vue3带来了什么
1.性能的提升
- 打包大小减少41%
- 初次渲染快55%, 更新渲染快133%
- 内存减少54%
…
2.源码的升级
- 使用Proxy代替defineProperty实现响应式
- 重写虚拟DOM的实现和Tree-Shaking
…
3.拥抱TypeScript
- Vue3可以更好的支持TypeScript
4.新的特性
- Composition API（组合API）
- setup配置
- ref与reactive
- watch与watchEffect
- provide与inject
- …
- 新的内置组件
- Fragment
- Teleport
- Suspense
- 其他改变
- 新的生命周期钩子
- data 选项应始终被声明为一个函数
- 移除keyCode支持作为 v-on 的修饰符
- …
一、创建Vue3.0工程
1.使用 vue-cli 创建
官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上vue--version## 安装或者升级你的@vue/clinpminstall-g@vue/cli## 创建vue create vue_test## 启动cdvue_testnpmrun serve2.使用 vite 创建
官方文档：https://v3.cn.vuejs.org/guide/installation.html#vite
vite官网：https://vitejs.cn
- 什么是vite？—— 新一代前端构建工具。
- 优势如下：
- 开发环境中，无需打包操作，可快速的冷启动。
- 轻量快速的热重载（HMR）。
- 真正的按需编译，不再等待整个应用编译完成。
- 传统构建 与 vite构建对比图
## 创建工程npminit vite-app<project-name>## 进入工程目录cd<project-name>## 安装依赖npminstall## 运行npmrun dev二、常用 Composition API
官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html
1.拉开序幕的setup
- 理解：Vue3.0中一个新的配置项，值为一个函数。
- setup是所有<strong style=“color:#DD5145”>Composition API（组合API）</strong><i style=“color:gray;font-weight:bold”>“ 表演的舞台 ”</i>。
- 组件中所用到的：数据、方法等等，均要配置在setup中。
- setup函数的两种返回值：
- 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
- <span style=“color:#aad”>若返回一个渲染函数：则可以自定义渲染内容。（了解）</span>
- 注意点：
- 尽量不要与Vue2.x配置混用
- Vue2.x配置（data、methos、computed…）中<strong style=“color:#DD5145”>可以访问到</strong>setup中的属性、方法。
- 但在setup中<strong style=“color:#DD5145”>不能访问到</strong>Vue2.x配置（data、methos、computed…）。
- 如果有重名, setup优先。
- setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）
<template> <div> <h1>姓名{ {name}}</h1> <h1>年龄{ {age}}</h1> <h1 @click="toAlert">请点击我一下</h1> </div> </template> <script> export default { name: 'HelloWorld', props: { msg: String }, setup() { let name = '李明'; let num = 10; let age = 20 function toAlert(){ alert(334234) } return { num, name, age, toAlert }; // 和setup，嵌套的生命周期 // onMounted(() => { // console.log("onMounted", num); // }); }, } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h3 { margin: 40px 0 0; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
- 尽量不要与Vue2.x配置混用
2.ref函数
- 作用: 定义一个响应式的数据
- 语法:
const xxx = ref(initValue)- 创建一个包含响应式数据的<strong style=“color:#DD5145”>引用对象（reference对象，简称ref对象）</strong>。
- JS中操作数据：
xxx.value - 模板中读取数据: 不需要.value，直接：
<div>{ {xxx}}</div>
- 备注：
- 接收的数据可以是：基本类型、也可以是对象类型。
- 基本类型的数据：响应式依然是靠
Object.defineProperty()的get与set完成的。 - 对象类型的数据：内部 <i style=“color:gray;font-weight:bold”>“ 求助 ”</i> 了Vue3.0中的一个新函数——
reactive函数。<template> <div> <h1>姓名{ {name}}</h1> <h1>年龄{ {age}}</h1> <h2>性别{ {person.sex}}</h2> <h2>身高{ {person.height}}</h2> <h1 @click="toAlert">请点击我一下</h1> </div> </template> <script> import {ref} from 'vue' export default { name: 'HelloWorld', props: { msg: String }, setup() { let name = ref('李明'); let num = ref(10); let age = ref(20); let person = ref({ sex:'男', height:234 }) function toAlert(){ console.log(name) console.log(person) name.value = 'huangxing' age.value = 20 person.value.height = 143 person.value.sex = '女' alert('更改值') } return { num, name, age, person, toAlert }; // 和setup，嵌套的生命周期 // onMounted(() => { // console.log("onMounted", num); // }); }, } </script> <!-- Add "scoped" attribu