尚硅谷· vue3+ts 知识点学习整理 |14h的课程（持续更ing）

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. 若监视的对象的某个属性依然是 【对象类型】，可以直接写（属性），也可写成函数，建议写成函数！

★ 结论： 监听的要是对象里的属性，最好写函数式，注意点：若是对象监听的是地址值，要关注对象内部，需要手动开启深度监听。

★ 监听对象的某属性的最佳实践：【监听源 函数式】+【深度监听】

-        监听源，写 函数式（函数式，监听的是对象的地址值）----> 监听整个对象

-        加 深度监听-------------------------------------------------------------> 监听对象内部的属性

---

具体的： 

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后 就可以直接用了。