VUE3知识分享

简化文档–分析重点

基础部分

1. 应用实例会暴露一个 .config 对象允许我们配置一些应用级的选项，例如定义一个应用级的错误处理器，用来捕获所有子组件上的错误：

app.config.errorHandler = (err) => {
  /* 处理错误 */
}

2. reactive() 函数创建一个响应式对象或数组,注意:在setup()需要使用return返回;状态都是默认深层响应式的
   在 setup() 函数中手动暴露大量的状态和方法非常繁琐。当使用单文件组件（SFC）时，我们可以使用 < script setup> 来大幅度地简化代码。这样就可以使script中的变量和函数成为顶层变量,可以在模板中直接使用.

3. reactive() 的局限性:
   ①对象类型
   ②引用相同，不能替换

4. ref（） ref() 方法来允许我们创建可以使用任何值类型的响应式
   在函数中需要使用.value去获取值;作为顶层属性则不用解包,比如当在插值表达式中使用时
   注意:当在差值表达式中使用的时候,必须作为最终结果才能自动解包,否则手动
   当一个 ref 被嵌套在一个响应式对象中，作为属性被访问或更改时，它会自动解包
   响应式数组或像 Map 这种原生集合类型的元素被访问时，不会进行解包。

5. 在组件中 :class 时,会绑定在组件内部的根元素上

6. v-if 和 v-for的优先级,v-show和v-if

7. v-for 遍历数组,对象,范围值, item in items in可以用of替换
   遍历对象输出顺序取决于Object.keys()顺序
   :key=“<基础类型的值，例如字符串或 number 类型。不要用对象>”

8. 数组的变更方法

9. watch 用途:状态变化时执行一些更改 DOM，或是根据异步操作的结果去修改另一处的状态。
   侦听数据源类型3种
   直接给 watch() 传入一个响应式对象，会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发
   immediate,deep

10. watchEffect() 允许我们自动跟踪回调的响应式依赖且立即执行(immediate),不再需要明确传递源值。
    flush: ‘post’,watchPostEffect() DOM更新后
    停止侦听器

11. ref const input = ref(null),必需同名,需确保从 setup() 返回 ref;如果是循环 const itemRefs = ref([]),也需要同名

12. defineProps([‘title’]) 返回对象
    如果选项式,setup()第一个参数

13. defineEmits([‘enlarge-text’]) 抛出事件
    如果选项式,则作为setup()第二个参数

14. 单向数据流

15. prop默认值,事件校验

16. 异步组件

17. 组合式函数:利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。 mixin和react hook比较

18. teleport 改变dom结构,样式不受影响.父子嵌套关系不变 to属性=“css选择器”
    teleport可以绑定disabled属性进行禁用,并且可以绑定到同一个元素上,会逐个加载

19. Suspense 在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态
    可以等待的异步依赖有两种
    suspensible: false 表明不用 Suspense 控制，并让组件始终自己控制其加载状态。