Composition API

mixin:可实现方法和变量共享

image.png

• 如果出现同名的情况：
• 合并规则： 1. data对象返回值对象发生冲突会保留自身对象的属性值
  2. 生命周期钩子函数都会被调用

3. methods、components、directives冲突了,都会保留本组件内部的方法

全局mixin

image.png

setup函数的参数

image.png image.png

reactive函数（只能传入对象或者数组类型）

• 响应式显示数据，原理是再次使用时会进行依赖收集

  
  image.png

ref API

image.png

readyonly

在readonly的使用过程中，有如下规则：

• readonly返回的对象都是不允许修改的；
• 但是经过readonly处理的原来的对象是允许被修改的；
• 比如 const info = readonly(obj)，info对象是不允许被修改的；
• 当obj被修改时，readonly返回的info对象也会被修改；
• 但是我们不能去修改readonly返回的对象info；
• 其实本质上就是readonly返回的对象的setter方法被劫持了而已；
  image.png

toRefs

• 作用：如果对reactive进行解构的时候，单个元素并不能响应式展示，so：toRefs会将所有的reactive的所有数据转换成ref，建立链接

  
  image.png

toRef

• toRef会将其中一个reactive的数据转换成ref，建立链接

  
  image.png

customRef自定义Ref

image.png

computed

image.png

监听

• watchEffect

  
  image.png
  

  停止监听

  
  

• watch:默认不会执行，watch需要手动指定侦听的数据源，pre：是在挂载、更新之前执行；

• 调整watchEffect,众所周知，watchEffect会默认执行一次，为防止默认第一次执行

  
  image.png

watch的用法（监听单个数据源）

image.png

watch的用法（监听多个数据源）

• 对象中的扩展运算符 ... 用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中
  image.png

watch深度监听

image.png

provide和inject

image.png

localStorage保存值和取值

image.png

导入文件

image.png

h函数

• h() 函数是一个用于创建 vnode 的一个函数

• h函数的使用

  
  image.png

jsx

image.png

nextTick(延迟之后再执行)

• 将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它
• 原理：事件循环，默认是同步任务做完再做微任务
• 使用方法

import { nextTick } from "vue";

setup(){
const addMessageContent = () => {
        message.value += "哈哈哈哈哈哈哈哈哈哈"

        // 更新DOM
        nextTick(() => {
          console.log(titleRef.value.offsetHeight)
        })
      }
}