vue3.0备忘录
1.app.provide
提供一个值，可以在应用中的所有后代组件中注入使用
2.app.config.compilerOptions.comments
注释，默认生产移除注释
3.app.config.globalProperties
一个用于注册能够被应用内所有组件实例访问到的全局属性的对象（谨慎使用）
4.defineComponent()
在定义 Vue 组件时提供类型推导的辅助函数
需要注意在webpack Treeshaking时，用此方法定义的一个组件从未被使用，也有可能不被 tree-shake
为了告诉 webpack 这个函数调用可以被安全地 tree-shake，我们可以在函数调用之前添加一个 /*#__PURE__*/ 形式的注释
5.defineAsyncComponent()
定义一个异步组件，它在运行时是懒加载的。参数可以是一个异步加载函数，或是对加载行为进行更具体定制的一个选项对象
6.setup()
自身并不含对组件实例的访问权，即在 setup() 中访问 this 会是 undefined
7.访问 Props
setup 函数的第一个参数是组件的 props，响应式
解构的 props 对象，解构出的变量将会丢失响应性。因此我们推荐通过 props.xxx 的形式来使用其中的 props
确实需要解构 props 对象，或者需要将某个 prop 传到一个外部函数中并保持响应性，那么你可以使用 toRefs() 和 toRef() 这两个工具函数
8.Setup 上下文
传入 setup 函数的第二个参数是一个 Setup 上下文对象，非响应式，可安全解构{ attrs, slots, emit, expose }
expose 函数用于控制该组件可暴露出的属性
9.ref()
接受一个内部值，返回一个响应式的、可更改的 ref 对象，传对象亦可
10.computed ()
接受一个 getter 函数，返回一个只读的响应式 ref 对象。
若想可写，可传入set，get方法
11.reactive()
返回一个对象的响应式代理
若要避免深层响应式转换，只想保留对这个对象顶层次访问的响应性，请使用 shallowReactive() 作替代
当访问到某个响应式数组或 Map 这样的原生集合类型中的 ref 元素时，不会执行 ref 的解包，也就是访问值需要加.value
12.watchEffect()
立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行
参数函数为清除函数
如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM，你需要指明 flush: 'post' 选项：
watch(source, callback, { flush: 'post' })
watchEffect(callback, { flush: 'post' })
后置刷新的 watchEffect() 有个更方便的别名 watchPostEffect()：
import { watchPostEffect } from 'vue'
watchPostEffect(() => { /* 在 Vue 更新后执行 */ })
侦听获取异步数据
// 需要异步请求得到的数据 const data = ref(null)
watchEffect(() => { if (data.value) { // 数据加载后执行某些操作... } })
13.watch()
侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。
14.isRef()
检查某个值是否为 ref。
15.toRef()
基于响应式对象上的一个属性，创建一个对应的 ref。创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。
16.toRefs()
将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。
17.triggerRef()
强制触发依赖于一个浅层 ref 的副作用，这通常在对浅引用的内部值进行深度变更后使用。
18.effectScope()
创建一个 effect 作用域，可以捕获其中所创建的响应式副作用 (即计算属性和侦听器)，这样捕获到的副作用可以一起处理。
19.生命周期
onMounted()
onUpdated()
onUnmounted()
onBeforeMount()
onBeforeUpdate()
onBeforeUnmount()
onErrorCaptured()
onRenderTracked()
onRenderTriggered()
onActivated()
onDeactivated()
onServerPrefetch()
20.依赖注入
provide（），inject（）
21.v-pre
跳过该元素及其所有子元素的编译,最常见的用例就是显示原始双大括号标签及内容。
22.v-once
仅渲染元素和组件一次，并跳过之后的更新。
23.v-memo
缓存一个模板的子树。为了实现缓存，该指令需要传入一个固定长度的依赖值数组进行比较。
v-memo 传入空依赖数组 (v-memo="[]") 将与 v-once 效果相同。
常见的情况可能是有助于渲染海量 v-for 列表;同级，v-memo 不能用在 v-for 内部。
24.<script setup> 中的代码会在每次组件实例被创建的时候执行。
25.深度选择器
处于 scoped 样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件，可以使用 :deep() 这个伪类
26.插槽选择器
使用 :slotted 伪类以明确地将插槽内容作为选择器的目标
插槽是一种内容分发（content distribution）的 API，也就是 createVNode 的最后一个参数。适合用在结果比较复杂，组件内容可以复用的地方，简单来说就是在组件中可以预留空间，从父级把内容给传进去。
27.组合式函数有些像react 的自定义hook，用use进行命名
28.<script setup> 中的顶层的导入、声明的变量和函数可在同一组件的模板中直接使用
29.reactive() API 有一些局限性
-
有限的值类型：它只能用于对象类型 (对象、数组和如
Map、Set这样的集合类型)。它不能持有如string、number或boolean这样的原始类型。 -
不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失：
- 对解构操作不友好：当我们将响应式对象的原始类型属性解构为本地变量时，或者将该属性传递给函数时，我们将丢失响应性连接
30.在标准的 JavaScript 中，检测普通变量的访问或修改是行不通的。然而，我们可以通过 getter 和 setter 方法来拦截对象属性的 get 和 set 操作，所以使用ref
注意：
1.setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性
2.setup执行的时机:在beforeCreate之前执行一次，this是undefined
3.reactive方法仅仅对，对象，数组、Map、Set类型生效，对于string、number、boolean类型是无效的。vue3引入了ref方法来帮助开发者创建任意类型的响应式对象。
4.ref通过Object.defineProperty()的get和set来实现响应式（数据劫持）
reactive通过Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据
5.Vue2中，可以通过this来获取当前组件实例；
Vue3中，在setup中无法通过this获取组件实例，console.log(this)打印出来的值是undefined。
在Vue3中，getCurrentInstance()可以用来获取当前组件实例
const { ctx } = getCurrentInstance(); // 方式一，这种方式只能在开发环境下使用，生产环境下//的ctx将访问不到
const { proxy } = getCurrentInstance(); // 方式二，此方法在开发环境以及生产环境下都能放到组件上下文对象（推荐）
6.getCurrentInstance只能在setup或生命周期钩子中使用。
7.在 script setup 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits ，它们具备完整的类型推断并且在 script setup 中是直接可用的
