vue3
主要内容
核心：ref、reactive、computed、watch、生命周期
常用：hooks、自定义ref、路由、pinia、miit
面试：组件通信、响应式相关api
----> 笔记：ts快速梳理；vue3快速上手.pdf
笔记及大纲 如下：
目录
[1. 基础（p01-）](#1. 基础（p01-）)
[2. 创造vue3工程](#2. 创造vue3工程)
[编写 App 组件](#编写 App 组件)
[删掉 src，手写 src 的步骤：](#删掉 src，手写 src 的步骤：)
[3. vue3的核心语法](#3. vue3的核心语法)
[3.1 OptionsAPI 与 CompositionAPI](#3.1 OptionsAPI 与 CompositionAPI)
[3.2 setup语法糖](#3.2 setup语法糖)
[3.3 响应式数据 ref、reactive](#3.3 响应式数据 ref、reactive)
[ref ------>基本类型的响应式数据](#ref ------>基本类型的响应式数据)
reactive------>（只能定义）对象类型的响应式数据
[总结：ref 对比 reactive（如何使用）](#总结：ref 对比 reactive（如何使用）)
[3.4 toRefs 与 toRef 解构赋值](#3.4 toRefs 与 toRef 解构赋值)
[3.5 computed 计算属性](#3.5 computed 计算属性)
[3.6 watch 监视（重要）](#3.6 watch 监视（重要）)
[情况一：监视【 ref 】定义的 【基本类型】](#情况一：监视【 ref 】定义的 【基本类型】)
[情况二： 监视 【ref 】定义的【对象类型】](#情况二： 监视 【ref 】定义的【对象类型】)
情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性
[情况五： 监视上述多个数据](#情况五： 监视上述多个数据)
1. 基础（p01-）
vue3介绍
2020.9.18 vue3发布
本文按照，2023.10发布的公开版本 3.3.4 来讲解
特点：
性能提升 ：打包体积减少、初次渲染更快、更新更快、内存减少
源码升级 ：用 Proxy 代替defineProperty实现响应式；重写虚拟DOM的实现和Tree-Shaking
vue3 支持TypeScript
新特性：
Composition API（组合式API）：setup、ref 与 reactive、computed 与 watch
内置组件：Fragment、Teleport、Suspense...
其他改变：新的生命周期钩子、data 选项应始终被声明为一个函数；移除 keyCode 支持作为 v-on 的修饰符
2. 创造vue3工程
方法一：vue-cli 创建；方法二：vite 创建 （推荐）
vite是新一代前端构建工具，优势：
轻量快速的热重载（HMR），极速服务启动。
vite的构建速度，比 webpack快
真正的按需编译（见下图），不再等待整个应用编译完成。
对TypeScript、JSX、CSS等支持开箱即用
webpack构建 与 vite构建对比图如下：
webpack：从entry入口进去，分析route路由，分析模块module，处理Bundle，工程启动Server ready。（分析路由和模块耗时）
vite：server ready 项目启动，入口entry进去，看哪个路由和模块 则立刻处理，不看 则不处理。----> 构建快。
方法二：vite 构建 的具体操作（参考 vue3官方文档------快速上手）
①创建命令：
bash
npm create vue@latest②配置项目：名称、ts支持、jsx支持、router路由环境、pinia状态管理、vitest单元测试、end-to-end 端到端测试、eslint 语法检查、prettier 代码格式化
注：创建前，确保有后端 node环境 ，去官方下载（如果没有node 则没有npm)
如何判断：命令行，输入node，输出为版本号 则有；输出为不是内部命令 则无，去官网下载node安装，安装后重启电脑。
软件推荐：vscode
目录：
-
.vscode/extensions.json 配置插件的文件夹（打开时，会推荐安装 配置的扩展文件，更便捷。可删）
-
public/favicon.ico 页签图标
-
src 工作成果（.js、.css、.vue的文件）
-
env.d.ts （飘红是因为没有安装依赖，执行 npm i 安装所有依赖 即可解决。ts 不认识 txt 文件等，env.d.ts 把所有可能用的文件都做了声明）
-index.html 入口文件 （只是把这个文件呈现到页面中）（前端启动项目，查看 package.json包，运行 npm run dev）
-
package.json 和 package-lock.json 包管理文件/依赖声明文件
-
README.md 简单的对工程进行分介绍
-
tsconfig.json 和 tsconfig.app.json 和 tsconfig.node.json ts的配置文件
-
vite.config.ts 整个工程的配置文件 （用途：安装插件、配置代理）
-
src/main.ts
编写 App 组件
注：功能，添加这两插件（若已在 .vscode中 配置好插件，打开vscode后 将提示安装）
步骤：（创建前端应用，把app传进去，并挂载到 index.html 中的 id=" app" 中）
index.html 引入 main.ts文件
main.ts 中，创建前端应用，并把 app 传进去，将其挂载到 index.html 中的 id="app" 上
确定 index.html 中，id="app"（摆了花盆） + 引入 main.ts文件
src中
main.ts
App.vue 组件（根）
components 组件（树枝）
删掉 src，手写 src 的步骤**：**
先写main.ts
写 App.vue（三个东西必须有）
问题：删掉src，ts 配置文件报错，找不到 src文件
解决：重新打开vscode应用；如果未能解决，可以等代码写完，自然就好了。
3. vue3的核心语法
3.1 OptionsAPI 与 CompositionAPI
3.2 setup语法糖
vue2中
-
不可以有多个根标签
-
通过 data(){..} 存放数据，methods: {} 方法
setup中
-
setup函数中的this 是 undefined
-
vue2中的选项式的语法，可以与vue3的setup语法共存
-
旧写法可以读取setup的数据，setup语法不能读取旧写法（data、methods）的数据
-
vue2的setup函数中，数据和方法要 return{} 交出去
-
执行周期：先 setup，再 beforeCreate 建立。
-
直接写在 setup中的数据，不是响应式的。
-
setup 返回值，可以直接指定渲染内容（return ()=>'哈哈'）
两个 script（一个配置名，一个配置组合式api），要为同一种语言，如 lang="ts"
<script setup>语法糖
配置名可以通过插件完成
①终端中：npm i vite-plugin-vue-setup-extend -D
② vite.config.ts 中，添加
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
plugins: [
VueSetupExtend(),
]
})
③修改完重新运行开发服务器（ctrl+c 终止，npm run dev 重新运行）
④这时候，可以在 <script setup name ="Person1233"> 直接写 name
3.3 响应式数据 ref、reactive
vue2中，data中的即是响应式数据（里头做了，数据代理 和 数据劫持）
vue3中，两种方式可以做响应式数据：ref 和 reactive
ref ------>基本类型的响应式数据
想让哪个数据为响应式，则拿 **ref('xxx')**包一下
特点：ref 是函数；传递一个初始化数据；是会发生变动的数据。
返回值：是 RefImpl的实例对象 ，其 不带_ 是给我们用的。
使用时：模板中使用时不需要.value（它自动添加了）；js中使用时要添加 .value
reactive------>（只能定义）对象类型的响应式数据
用 reactive({ 对象 }) 包裹
reactive 返回值是Proxy代理对象，（返回结果是响应式的），其 Target为 数据内容。
reactive是深层次的，reactive包裹对象，如a.b.c
注：
ref---------->对象类型的响应式数据
ref 也可以定义对象类型的数据，ref 定义对象 底层还是通过 reactive 实现
数组对象，要先 .value，再 [ ]
总结：ref 对比 reactive（如何使用）
ref，必须使用.value（可以用 插件Volar，自动添加.value）
reactive的局限性，重新分配对象，则失去响应式。
解决：（法一：可以使用 **Object.assign(obj1,obj2,obj3)**分配，将obj1后面添加obj2，在添加obj3；法二：可以用ref，但要加 .value，因为.value必然是响应式的）
使用原则：
-
基本类型--------------------------> 必用 ref
-
对象类型，层级不深-----------> ref、reactive都可
-
对象类型，且层级较深--------> reactive
3.4 toRefs 与 toRef 解构赋值
原先，解构传来的，不是响应式的数据。要添加 let { 数据1，数据2 } = toRefs(对象)
toRefs、toRef，把一个响应式对象的东西，解构 拿出来，且同时具备响应式 能力。
解构出来的返回值是 ObjectRefImpl （ref 定义的响应式数据）
3.5 computed 计算属性
应用场景：实现输出双向绑定-------》要求首字符大写（大量使用模板插值，模板不简单了/模板太复杂了，在模板里计算，未做到结构和交互分离）------------》使用计算属性。
模板太复杂了，这时可以使用计算属性 computed。
计算属性的特点：
－ ①computed 依赖的数据只要发生变化，它就会重新计算。
－ ②计算属性有缓存 ，方法没有缓存。
-
③计算属性的 返回值 是 ComputedRefml（ref 的响应式数据）
-
④计算属性，是只读的。可读可写要加 get、set
① computed 依赖的数据发生变化，计算属性会重新计算
④计算属性中，写 get、set 函数，才可以可读可写
3.6 watch 监视（重要）
作用：监视数据的变化（vue2和vue3的作用一样）
watch 的特点：
-
watch中 不需要添加 .value.(可以一用Volar插件,自动带.value)
-
watch 调用有返回值，是一个函数。（停止监视）
watch的参数：
-
第一个参数是：被监视的数据
-
第二个参数是：监视的回调
-
第三个参数是： 配置对象（deep、immediate等等）
四种变化：
- ① ref 定义的数据
★情况一：监视【 ref 】定义的 【基本类型】
watch(对象，回调函数)
情况二： 监视 【ref 】定义的【对象类型】
监视 ref 定义的 【对象类型】数据，监视的是对象的地址值。
若想监视对象内部属性 的变化，需要开启深度监视。（watch的第三个参数，配置deep:true）
watch第三个参数：配置对象（如 深度监视 deep 、立即执行 immediate 等等）
①（原先）只监视整个对象发生变动
② 加上**{ deep: true }** ，可以监视对象内部的属性变化
③ 新值和旧值
如果只是改对象的 属性，新旧值是同一个；
如果把整个对象****换了 ，新旧值是不同的值。
- 如果只写一个， 就是新值 ，一般不管旧值
情况三：监视【reactive】定义的【对象类型】
【reactive】 定义的【对象类型】数据， 且默认开启了深度监视 （深度监视不可关闭的，隐式的开启了深度监听。）
------》对 对象内部的属性 也进行了监视。
reactive 定义的 对象，不可整体对对象修改 ，要用 Object.assign(对象，{...}) ，替换内容（属性名相同，值覆盖了）（ Object.assign(对象，{...}) 未创建新对象）。
★情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性
- 若该属性 是 基本类型 （不是对象类型），要写成****函数形式 （可以用箭头函数）
- 若监视的对象的某个属性 依然是 【对象类型 】，可以直接写 （属性），也可写成函数 ，建议写成函数！
★ 结论： 监听的要是对象里的属性 ，最好写函数式，注意点：若是对象监听的是地址值 ，要关注对象内部 ，需要手动开启深度监听。
★ 监听对象的某属性的最佳实践：【监听源 函数式】+【深度监听】
-
监听源，写 函数式（函数式，监听的是对象的地址值）----> 监听整个对象
-
加 深度监听-------------------------------------------------------------> 监听对象内部的属性
具体的：
- 若该属性 是 基本类型 （不是对象类型），要写成****函数形式 （可以用箭头函数）
- 若监视的对象的某个属性 依然是 【对象类型 】，可以直接写 （属性），也可写成函数 ，建议写成函数！
① 监听源，直接写 属性
存在问题：
修改前两个，可以成功监听；
但是修改整个对象时，控制台没有输出，未能成功监听。（即使加上深度监听，也无济于事）
因为当监视整个对象时，监视的对象被重新赋值新的对象，被覆盖了，即 监视的对象被删了，此时，监视整个对象已不存在，监视失败。
深度监视
注： 一般，什么时候开启深度监视？
本来是 监视地址值；
当想要让其 监视内部细节（属性 ）时，开启深度监视。
② 监听源，写成函数式
监听源写成函数式 （监听的是 对象的地址值 ）-----------> 整个对象可以监听
内部属性不被监听
监听源
无效监视源：非 getter函数、ref、reactive、以上组成的数组类型
（getter函数：能返回一个值的函数）
★监听的源 必须是： getter函数（返回一个值的）、ref、reactive、以上值 组成的数组类型。
情况五： 监视上述多个数据
-
监视源，写数组，可监视数组中多个数据。
-
例子，监视 某对象中的属性： ①属性为【基本类型】，要用 【函数式】；②属性为【对象类型】，可以用【直接写】，也可以用函数式。--->即，情况四
- 监视 的是整个数组 ，新值、旧值也是整个数组
如，监视对象中的某个属性：
因为，① name和c1都是普通字符串，即基本类型 ---------->所以，监视源要用 函数式
② 监视的属性是【对象类型】----> 可以 【直接写】
tips：watch特别重要，响应式数据、计算属性写得好，写功能基本没太大问题。有问题的话，有时候可能是时机不对，即 生命周期不对。
3.7 watchEffect
结果、影响、副作用