Vue 学习笔记(下)

作者: ygqygq2 分类: 开发 发布时间: 2022-07-22 18:23

1. 混入 Mixin

基本用法:

  • 组件 data, methods 优先级高于 mixin data, methods 优先级
  • 生命周期函数先执行 mixin 里的,再执行组件里的
  • 组件中的自定义属性优先级高于 mixin 中的属性优先级
  • 默认 mixin 是局部的,需要声明注入,全局 mixin 直接定义在 app 中,不需要明确注入
  • app.config.optionMergesrategies.number 定义 mixin 属性优先级

2. 自定义指令 directives

其支持各种生命周期函数

使用数据控制 directive

3. 传送门 teleport

默认 html dom 是层层嵌套,teleport 可以把组件里的 dom 元素直接传送到其它位置进行展示。

4. render 函数

template -> render -> h -> 虚拟 DOM(JS对象)-> 真实 DOM -> 展示页面上

5. 插件 plugin

把通用性的功能封装起来

6. setup 函数

为了增加代码的可维护性,setup 可以将相关代码段聚集在一起。
setup 函数执行在 created 之前,即实例被完全初始化之前。

7. ref、reactive 响应式引用

原理:通过 proxy 对数据进行封装,当数据变化时, 触发模板等内容的更新

ref 只适合处理基本类型的数据

reactive 处理非基础类型的数据

readonly 使用

toRefs 会把 proxy({name: 'hello'}) 转换成 {name: proxy({value: 'hello'})}

8. toRef 以及 context

toRef 将属性转换成响应式引用

contextslots

contextemit

9. 计算属性 computed

使用 composition api 配合 computed

10. 侦听器 watch 和 watchEffect

watch 具备一定的惰性,参数可以拿到当前值和之前值

一个侦听多个数据的变化

watch 和 watchEffect 的区别:

  • watchEffect 没有惰性,立即执行,即代码一加载就执行;
  • 不需要传递要侦听的内容,自动会感知代码依赖,不需要传递很多参数,只要传递一个回调函数
  • 不能获取之前数据的值

11. 生命周期函数

mounted => onMounted
beforeUpdate => onBeforeUpdate
...

setup 执行在 beforeCreatecreated 之间,所以没有这 2 个函数对应的 composition api 生命周期函数。

onRenderTracked 渲染后收集响应式的依赖。
onRenderTriggered 每次重新渲染被触发的时候。

12. provide inject ref 用法

使用 readonly 处理单向数据流

获取真实的 DOM 元素节点



微信扫描下方的二维码阅读本文

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表回复

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据