Vue3学习笔记

框架基本

推荐基于vite创建，直接准备好，之后按需加载

创建app

创建一个App组件ing挂载到id="app"的容器中

OptionsAPI与CompositionAPI

vue2使用的选项式API的弊端，数据、方法、计算属性等分散在data、method、computed中，如果想要新增或者修改，那么就需要分别修改分散的配置项，不利于维护和复用。

 自定义hooks

模块化封装

核心语法

setup

vue2中的data、method是可以访问到vue3的setup。

setup语法糖就是本来需要set(){}再return的，现在直接在script标签中添加setup，就不要return

ref与reactive

ref：基本类型、对象类型的响应式数据

模板中不需要.value，js/ts代码中需要

ref定义基本类型

ref定义对象类型，底层使用的reactive

reactive：只能定义对象类型的响应式数据

ref与reactive对比

reactive局限性：重新分配对象的时候会失去响应式，而ref不会

ref可以直接ref.value进行修改对象

使用建议

1、基本类型，只能ref

2.、对象类型层级不深，ref/reactive都可以

3、对象类型层级很深，推荐reactive

toRefs

直接解构赋值，修改新的name并不会引起person.name的变化

 使用toRefs，将reactive的每一个对象属性变成响应式对象

使用toRef，就需要指定属性，let n1 = toRef(person,'age')

computed计算属性

v-model数据双向绑定：输入框修改后，firstName也修改，修改后的值反映到{{firstName}}上

方法和计算属性的对比

方法是没有缓存的，每次都是重新调用，而计算属性有缓存，他发现依赖的值并没有发生变化，就直接读取之前计算好的值。

computed只读与可读可写

computed是一个ref对象，但是只读，不可以直接ref.value

watch：监视数据变化

watch返回的是一个接触监视的函数，watch(监视的对象，操作(newVal,oldVal)=>{},{配置})

监视以下四种数据

1、ref定义的数据：ref()

2、reactive定义的数据：reactive()

3、函数返回的一个值（getter函数）

4、一个包含上述内容的数组

场景一：监视ref定义的基本类型数据和对象类型数据

场景二：reactive定义的对象类型数据

默认开启深度监视，newVal、oldVal是同一个对象，值相同，都是新值

场景三：ref或reactive的对象类型的某个属性

1、属性是基本类型，函数式返回该值

2、属性是对象类型，可以直接获取，也可以函数式，推荐函数式

因为监视的是对象，默认开启深度监视，改变整个对象不触发

函数式返回的是地址值，所以就是整个对象，添加deep:true开启深度监视，整个对象和对象属性的改变都能监视。

使用建议：

监视对象里的属性值，最好写函数式，如果想要关注更细节的属性变化，添加deep:true

场景四：监视上述多个数据

watchEffect

watch要明确指出需要监视的对象，若有很多个对象，那所有对象都要罗列出来

watchEffect感觉更智能一点，无需明确指出，函数用到谁就监视谁

官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新追踪其函数

ref属性

用在普通DOM标签上，获取的DOM节点；

用在组件标签上，获取的是组件实例对象；

TS

props

生命周期

创建、挂载、更新、销毁，先子后父

路由

基本使用

导航区、展示区、路由、路由规则

路由组件（路由渲染出的）一般放在views/pages文件夹下，一般组件（亲手写出来的）放在components

通过点击导航，消失的路由组件默认是被卸载掉的，需要的时候再挂载

路由器工作模式

1、history

2、hash

to两种写法

字符串写法、对象写法（name/path）,后者使用的更多

嵌套路由

路由传参

useRoute

1、query参数

2、params参数 路由占位，只能用name

路由规则的props配置

不适用写法复杂，从useRoute身上获取，并进行响应式的解构赋值获取

props：true添加之后相当与帮我们传递了属性

两种写法：

replace属性

浏览器的历史记录有两种：push追加、replace替换

不能后退也不能前进，默认是push可以前进回退

编程式路由导航

应用场景：用户信息正确、时间设置

routerLink本身其实就是a标签

重定向

redirect

pinia

符合直觉的集中式状态管理（共享数据）

搭建pinia环境

存储、读取数据

修改数据

storeToRefs

将store中的数据转化为ref对象，方便使用

getters和$subscribe

当state中的数据，需要经过处理后再使用时，可以使用getters配置

subscribe可以监听数据的变化

组合式写法

组件通信

props

父传子传递值，子传父传递函数

自定义事件

defineEmits emit()

v-model

插槽

默认插槽

具名插槽

作用域插槽

其他API

shallowRef和shallowReactive

属性很多，只关心对象整体是否发生改变，效率高，不然每个属性发生变化ref都会响应

readonly和shallowReadonly

将一个响应式对象设置为只读 readOnly(ref对象/reactive对象)，但是不能readOnly(999)

readOnly用于创建一个对象的深只读副本，所有层次都是只读；

shallowReadonly只作用于顶层属性，浅层只读，深层次的属性可以修改。

应用场景：保护重要的对象或属性值不被修改

toRaw与markRaw

获取一个对象的响应式对象，toRaw返回的对象不是响应式的，不会触发视图更新

markRaw：标记一个对象，使其永远不会成为响应式的对象

应用场景：

customRef