Setup

组合式 setup

1. 可以配合曾经的vue2的options api 一起使用。

2. 其返回值 相当于 vue2 的 data()返回值，不同的是setup需要把 数据和方法 一同返回

组合式 API：setup() | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/api/composition-api-setup.html

script setup

1. 是一种setup的语法糖，用于简化 setup() 函数操作

2. 不需要写返回值，只需要加一个setup标签即可，但是不可以和src属性同时使用

<script setup> | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/api/sfc-script-setup.html

响应式数据

reactive

1. 用于对象类型数据的响应式改造，返回一个代理对象，但是基本上可以被 ref 替代，建议使用 ref 。

2. 默认 deep 为 true 所以如果不需要深层响应式，需要改为调用 shallowReactive()

3. 用 isReactive() 检查一个对象是否是由 reactive() 或 shallowReactive()创建的代理。

响应式 API：核心 | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/api/reactivity-core.html#reactive

1. 将reactive转换为ref
1. toRefs 对reactive对象进行结构，不会丢失其响应式，结构出来是一个ref对象
2. toRef 对单个属性进行ref转换

ref

响应式 API：核心 | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/api/reactivity-core.html#ref

1. 接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value 。

2. 可以传入一个基本数据类型会直接转为 ref 对象，如果是对象类型内部会通过 reactive() 进行处理。

3. 与reactive一样也是 deep 为 true的，如果要避免深层需要使用shallowRef()

4. 可以通过 unref 取出最后的数据 如果参数是 ref，则返回内部值，否则返回参数本身 是一个语法糖，可以方便的进行取值。

5. isRef()可以进行判断当前值是否是ref值

6. triggerRef() 可以强制把浅层的ref，改为深层

7. customRef() 自定义ref对象

readonly

响应式 API：核心 | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/api/reactivity-core.html#readonly

1. 可以输入一个响应式对象，可以是reactive或者ref，返回一个原值的只读代理值。

2. 要避免深层级的转换行为，请使用 shallowReadonly()作替代。

3. isReadonly() 判断是否为只读对象

computed

响应式 API：核心 | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/api/reactivity-core.html#computed

watch

1. 可以去侦听特定的值，可以是ref 或者 reactive。如果是reactive的话，会默认深度监听。

2. 可以通过返回值stop进行取消

3. 可以对并发请求进行取消

4. 是惰性的，第一次不会被使用，数据改变后才会调用

响应式 API：核心 | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/api/reactivity-core.html#watch

watchEffect

1. 在该函数中使用的数据，会自动进行监听。

2. 并不是惰性的，第一次就会调用，当前值可能是null

3. 返回值可以停止监听

4. 同样回调函数中，可以进行取消操作。在下一次执行完，会优先进行取消，在执行下一次

响应式 API：核心 | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/api/reactivity-core.html#watcheffect

生命周期钩子

组合式 API：生命周期钩子 | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/api/composition-api-lifecycle.html

provide inject

组合式 API：依赖注入 | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/api/composition-api-dependency-injection.html

vue hooks

自定义指令

自定义指令 | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/guide/reusability/custom-directives.html

teleport

Teleport | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/guide/built-ins/teleport.html#teleport

vue插件

插件 | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/guide/reusability/plugins.html#introduction