vue3
主要内容
核心：ref、reactive、computed、watch、生命周期
常用：hooks、自定义ref、路由、pinia、miit
面试：组件通信、响应式相关api
----> 笔记：ts快速梳理；vue3快速上手.pdf
笔记及大纲 如下：
目录
vue3
主要内容
1. 基础（p01-）
vue3介绍
2. 创造vue3工程
目录：
编写 App 组件
删掉 src，手写 src 的步骤：
3. vue3的核心语法
3.1 OptionsAPI 与 CompositionAPI
3.2 setup语法糖
3.3 响应式数据 ref、reactive
ref ------>基本类型的响应式数据
reactive------>（只能定义）对象类型的响应式数据
ref---------->对象类型的响应式数据
总结：ref 对比 reactive（如何使用）
3.4 toRefs 与 toRef 解构赋值
3.5 computed 计算属性
3.6 watch 监视（重要）
情况一：监视【 ref 】定义的 【基本类型】
情况二： 监视 【ref 】定义的【对象类型】
情况三：监视【reactive】定义的【对象类型】
情况四：监视【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官方文档——快速上手）
①创建命令：
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" 中）
1. index.html 引入 main.ts文件
2. main.ts 中，创建前端应用，并把 app 传进去，将其挂载到 index.html 中的 id="app" 上
3. 确定 index.html 中，id="app"（摆了花盆） + 引入 main.ts文件
src中
- main.ts
- App.vue 组件（根）
- components 组件（树枝）
删掉 src，手写 src 的步骤：
1. 先写main.ts
2. 写 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
注：
- 使用 v-fo r中，key是每个节点的唯一标识，:key="xx.id" 中的冒号: 是将其用 js 表达式 来解析，其完整的指令是 v-bind:key="xx.id"
- 选中，直接按圆括号，直接包起来了。
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】定义的【对象类型】数据中的某个属性
- 若该属性 是 基本类型（不是对象类型），要写成函数形式（可以用箭头函数）
- 若监视的对象的某个属性依然是 【对象类型】，可以直接写（属性），也可写成函数，建议写成函数！
★ 结论： 监听的要是对象里的属性，最好写函数式，注意点：若是对象监听的是地址值，要关注对象内部，需要手动开启深度监听。
★ 监听对象的某属性的最佳实践：【监听源 函数式】+【深度监听】
- 监听源，写 函数式（函数式，监听的是对象的地址值）----> 监听整个对象
- 加 深度监听-------------------------------------------------------------> 监听对象内部的属性
具体的：
1. 若该属性 是 基本类型（不是对象类型），要写成函数形式（可以用箭头函数）
2. 若监视的对象的某个属性依然是 【对象类型】，可以直接写（属性），也可写成函数，建议写成函数！
① 监听源，直接写 属性
存在问题：
- 修改前两个，可以成功监听；
- 但是修改整个对象时，控制台没有输出，未能成功监听。（即使加上深度监听，也无济于事）
因为当监视整个对象时，监视的对象被重新赋值新的对象，被覆盖了，即 监视的对象被删了，此时，监视整个对象已不存在，监视失败。
深度监视
注： 一般，什么时候开启深度监视？
- 本来是 监视地址值；
- 当想要让其 监视内部细节（属性）时，开启深度监视。
② 监听源，写成函数式
- 监听源写成函数式（监听的是 对象的地址值）-----------> 整个对象可以监听
- 内部属性不被监听
监听源
无效监视源：非 getter函数、ref、reactive、以上组成的数组类型
（getter函数：能返回一个值的函数）
★监听的源 必须是： getter函数（返回一个值的）、ref、reactive、以上值 组成的数组类型。
情况五： 监视上述多个数据
- 监视源，写数组，可监视数组中多个数据。
- 例子，监视 某对象中的属性： ①属性为【基本类型】，要用 【函数式】；②属性为【对象类型】，可以用【直接写】，也可以用函数式。--->即，情况四
- 监视的是整个数组，新值、旧值也是整个数组
如，监视对象中的某个属性：
因为，① name和c1都是普通字符串，即 基本类型 ---------->所以，监视源要用 函数式
② 监视的属性是【对象类型】----> 可以 【直接写】
tips：watch特别重要，响应式数据、计算属性写得好，写功能基本没太大问题。有问题的话，有时候可能是时机不对，即 生命周期不对。
3.7 watchEffect
watch 与 watchEffect 的区别：
- watch 需要明确指出要监听的数据
- watchEffect 无需明确指出要监视的对象，它会自动分析（监听的对象 / 谁要监听）
3.8 标签的 ref 属性
作用：用于注册模板引用，即 给节点打标识。
两种情况：
- ① 用在【普通 DOM 标签】（即【 html标签】）上-----> 获取的是 DOM 节点
- ② 用在【组件标签】上 ------> 获取的是 【组件实例对象】，其数据是隐藏的-------> 要显示数据，将其暴露出去（做法：子组件中引入 de）
① ref 加在【html标签】上
标签的 ref 属性：创建一个xxx，用于存储 ref 标记的内容
② ref 加在【组件标签】上（即 【.vue文件】）
------> 返回值的数据隐藏，它返回的是一个实例对象
------> 解决：显示数据，在子组件中 引入 deExpose 并将要显示的数据 暴露出来（做法：引入 defineExpose，最后返回 defineExpose({ 数据1, 数据2, 数据2...})）
具体内容：
大部分都加在 html标签上，而不加在组件标签上
因为加在组件标签上，只显示组件的实例对象，不显示具体的数据内容，子组件内部的数据被隐藏了（这是种保护措施）
解决： 引入 defineExpose，最后返回 defineExpose({ 数据1, 数据2, 数据2...})
局部样式
css中有 scoped，则是局部样式。
vue2写法如何改vue3：
在 script 标签中，
- 加 setup
- 加 name="" （采用了插件组件别名简写）
在 script 标签内，
- 去掉整个 export default，以及内部的组件名和注册组件
注：为何不需要另外注册组件？因为 import 引入组件 时，会自动 return ，return后 就可以直接用了。
