vue3 Composition API

Composition API

1.ref获取元素

1. 利用ref函数获取组件中的标签元素
2. 功能需求: 让输入框自动获取焦点

<template>
  <h2>App</h2>
  <input type="text">---
  <input type="text" ref="inputRef">
</template>

<script lang="ts">
import { onMounted, ref } from 'vue'
/* 
ref获取元素: 利用ref函数获取组件中的标签元素
功能需求: 让输入框自动获取焦点
*/
export default {
  setup() {
    const inputRef = ref<HTMLElement|null>(null)

    onMounted(() => {
      inputRef.value && inputRef.value.focus()
    })

    return {
      inputRef
    }
  },
}
</script>

2.toRefs

1. 用于将响应式对象转换为普通的浅层响应式，以便以解构方式访问响应式对象的属性。
2. 问题: reactive 对象取出的所有属性值都是非响应式的
3. 解决: 利用 toRefs 可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性

3.自定义hook函数

● 将可复用的功能代码进行封装，类似于vue2混入（mixin）
● 使用Vue3的组合API封装的可复用的功能函数
● 自定义hook的作用类似于vue2中的mixin技术
● 自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂

4.生命周期

与 2.x 版本生命周期相对应的组合式 API

● beforeCreate -> 使用 setup()
● created -> 使用 setup()
● beforeMount -> onBeforeMount
● mounted -> onMounted
● beforeUpdate -> onBeforeUpdate
● updated -> onUpdated
● beforeDestroy -> onBeforeUnmount
● destroyed -> onUnmounted
● errorCaptured -> onErrorCaptured