只记忆部分重点知识：

p8

结果界面直接渲染成了

所以

p9

setup函数 可以和 选项式 api 的data、method 一起使用！ 但是不建议

选项式 api 可以用 this.xxx 访问setup里面的数据或者方法，但是setup不能反过来访问！

p10

setup函数 和 setup 语法糖有区别，暴露的东西不一样！

setup语法糖更加严格，阻止你打破单向数据流！（defineExpose）

参考：网页链接​

可以帮 setup 语法糖使用name属性的插件：vite-plugin-vue-setup-extend

script 不能同时使用 ts 和 js

报错！

p14

区别第二条视频：

014.ref对比reactive P14 - 06:21

reactive定义的对象不能整体修改！

区别第二条参考：

网页链接​ 的p8

p16

computed 可读可写写法：

016.computed计算属性 P16 - 18:31

p17

情况一

使用：

注意：

这里插件没有补.value，所以watch监听ref数据不用加value！ 见第一条

如何解除监听？watch其实有返回值，可以直接接收！

直接调用返回值就行（x()）：

017.watch监视_情况一 P17 - 10:44

情况二

未开启深度监视：

开启：

解释新旧值相同：

018.watch监视_情况二 P18 - 08:54

代码解释：

网页链接​ 的p12

其实可以理解为，引用类型和基本类型！引用类型的新旧值一样，基本类型肯定不一样！

情况三

默认开启的深度监听不能通过deep:false关闭！

情况四

基本类型：

函数：能返回一个值的函数！

可以简写为： () => xxxx

对象类型：

直接写（对象类型，打印出来就是proxy对象，所以可以直接写），就会监听里面的变化。

函数，就会监听大的变化（地址）

020.watch监视_情况四 P20 - 16:20

推荐：

使用函数+深度监听！！！

情况五

p22

如果数据很多，则太多了，这个时候就要watchEffect

注意：

1、watchEffect 一开始就会执行一次

2、可以自动分析数据，自己监听

p23

ref 拿到了组件实例，但是不能获取到组件里面定义的东西！

023.标签的ref属性 P23 - 12:03

其实解释过，见该文章 p10

p25

ts写法 (官网有)：

js写法：

注意：

definexxxx的函数（编译宏）在vue3里面不用引入，因为编译的时候根本不是这个函数，只是做个对应！

p28

vue 先挂载子，后挂载父，所以App.vue永远是最后挂载的！

p29

hooks：让一个功能的数据和方法在一起！避免变成vue2了，有点像mixins

命名规范是 usexxx.js ，一定要 return 一些东西！

p32

路由和一般组件区分：

p33

nginx 处理路径就靠这个：

后端管理系统什么的用hash模式就行！

p35

to 不带参数，跳转的3种形式！

1、字符串跳转

2、对象跳转

2.1 名字跳转

2.2 path跳转

p36

子级路由没有 /

p37

路由使用 query 三种传参方式！

第二种也可以替换成name

接收：

p38

动态路由（params参数），两种传参方式

注意：

传的不能是对象或者数组！！！

动态路由后面加？表示可以传也可以不传！！！

接收：

p39

第一种：将路由收到的所有params参数作为props传给路由组件！

所以子路由组件要这样接收：

第二种：函数写法，可以自己决定将什么作为props给路由组件！

第三种：对象写法，可以自己决定将什么作为props给路由组件！ 基本不用，因为写死了

p40

p46

p59

注意：

打印c不用 .value ! 可以看出，如果是自己直接定义的 ref 必须要 .value ，但如果是响应式对象里面的，会自动拆包！

pinia 里面的数据有两种拿取方式：

注意：

如果浏览器的 vue插件的 pinia 里面没有数据，可能是你并没有在界面中使用导致，光定义了并不会显示出来！

p47

完整的store

方式一 直接修改

pinia的数据可以直接修改，且工具还能监听到！！！

047.修改数据(三种方式) P47 - 01:53

方式二 批量修改

发生了三次 mutation

047.修改数据(三种方式) P47 - 06:19

只发生一次 $patch ，且会自动替换对应的！

方式三 借助actions

这里就要修改store文件，添加上actions

this是当前的store对象！

action的意义 --》 限制：

047.修改数据(三种方式) P47 - 12:56

p48

storeToRefs 只会把 store 中的数据变成响应式，如果是 toRefs 就会把 store 里面的不需要变成响应式的都变成响应式！！！

p49

getters 接收 state 为参数，也可以直接用 this

p50

$subscribe 相当于 pinia 的 watch ！

p51

组合式写store

记得return ！！！

写组合式还是选项式看复杂度，return太多就选项式！！！

p52 父传子 常用

props 父传子（推荐），也可以子传父（不推荐）

子传父，要父传一个函数，子调用函数，并将值传给父！

p53 子传父 常用

defineEmits --》 自定义事件

推荐接收名用 xxx-xxx

p55

v-model 在组件上使用，一般个人开发很少使用，但是组件库大部分都是v-model 实现的！

v-model 在 html 标签上：

v-model 在组件标签上：

055.组件通信_方式4_v-model P55 - 14:04

$event：

v-model原理见：

网页链接​ 的p35

p56

修改传递名称！

056.组件通信_v-model的细节 P56 - 01:58

可以修改，自然就可以多个v-model ！

p57 祖孙传值 不常用

会打扰中间人！

注意一

如果父传给子好几个值，子只接收一个，其他的并没有丢失！可以通过开发者工具看到attrs，接收的就在开发者工具里面的props！

界面上使用 {{ $attrs }} 就可以看到未接收的参数！

注意二

注意三

这里$attrs就相当于v-bind一个对象！

成功传递！如果是想子传给爷，直接和props一样，用函数！ 不常用

p58 父子传值 不常用

ref 获取子组件，想要访问到组件数据（子、父都是），要使用defineExpose！ 但是最好不这样搞

也可以在 html 中直接使用 $refs，包含全部子组件！

html中 $parent 就是该组件的父组件！

p60 祖孙传值 常用

provide(数据名，{数据值/函数})

注意：传数据值时不要 .value，不然孙那边就不是响应式了，祖还是响应式！

xxx = inject(数据名，默认值)

孙传祖也行，不推荐，也是和props一样，使用函数接收参数！

slot 参考：https://blog.csdn.net/langwang_100/article/details/119841015

p61

1、如果多个slot，但是只传了一个元素，那么会全部替换！

2、有多个元素 (超过了插槽)，一起作为替换元素放入替换

注意：

其实默认插槽也有名字，叫：default，但是一般不写！

p62

1、具名插槽，传入一个没有带slot="name" 的，那么都不替换，因为不知道替换哪一个！

2、多个具名插槽，传入多个且同slot="name" ，那么只会替代该name，并且是重复添加不是替换！

现在slot="name" 变成了：

v-slot:xxx，且要放 template 或者 组件上，而不是替换的元素上！

语法糖：

v-slot:xxx => #xxx

p63

数据在子，但是结构由父定，所以产生作用域插槽

然后 slot 将值传递给插槽的使用者，及 ul，但使用要用template

如果既是具名又是作用域插槽就变成了这样：

v-slot:xxx = "xxx/{}" ==> {}是解构

另外写法：

#xxx = "xxx/{}"

p64

传值总结：

p64

p65

复制一份只读的响应式数据（保护数据！）

let xxx = readonly(响应式数据)

改原来的数据，readonly里面的响应式数据也会一起改变！但是不能直接改 xxx

p66

let xxx = toRow(响应式数据)

不保留持久引用的意思是：最好是当成参数传给函数啥的！（及别人需要用并改某个数据，但是不影响界面！）

p67

为什么不使用ref：

customRef：

set 可以接收 value，但是就一个尴尬的事情，get 写死了，set不知道设置谁的值，所以引入一个变量！

不管怎么写，html 里面用的都是 ref，所以是msg！

难点：

到上面，发现根本不能响应式，所以要接收参数！

get 要在最先调用 track() --》告诉vue数据msg很重要，需要对msg持续关注，一旦msg变化就去更新！

set 要在最后调用 trigger() --》 通知vue，数据msg变化了！

一般 customRef 都会写成 hooks，那就可以不引入变量去存，而是当参数，见下方链接！

更多可见：

网页链接​ p7 5

p69

顶层await

069.Suspense P69 - 04:09

p70

p71

https://v3-migration.vuejs.org/zh/breaking-changes/