前言：vue2中复杂组件的代码变得越来越难以维护，缺少一种在多个组件之间提取和复用逻辑的机制，现在的重用机制又存在一些弊端，所以vue3中隆重推出了Composition API。
关于Composition API：
一、ref和reactive
1.ref:
作用：用于定义基本类型数据，例如：String，Number，Boolean等，将其转换为一个带有响应式特性的数据类型
语法：const x = ref(100)
访问：在setup中使用.value访问，在模板中读取时，不需要使用.value
<script lang="ts" setup>
import { ref} from 'vue'
const count = ref(9)
const increase = () => {
count.value++
}
const decrease = () => {
count.value--
}
</script>
<template>
<div>
<h1> count is a number {{ count }}</h1>
<div>
<button @click="increase">count +1</button>
<button @click="decrease">count -1</button>
</div>
</div>
</template>
2.reactive
作用：用于定义引用数据类型，例如：数组，对象等，将其转换为一个带有响应式特性的数据类型
语法：const info = reactive( { count: 0 } )
注意：响应式转换是深层的，它会影响所有嵌套的属性；若要避免深层响应式的转换，只想保留对这个对象顶层次访问的响应性，请使用ShallowReactive()
<script lang="ts" setup>
import { reactive} from 'vue'
const data = reactive({
count: 5
})
const increase = () => {
data.count++
}
const decrease = () => {
data.count--
}
</script>
<template>
<div class="about">
<h1> count is a number {{ data.count }}</h1>
<div>
<button @click="increase">count +1</button>
<button @click="decrease">count -1</button>
</div>
</div>
</template>
上述示例中，如果将reactive对象中的属性解构后单独拿出来使用，则会失去响应性，比如：
const {count} = data
官方推荐我们使用toRefs()来解构reactive对象，使其展开的每个属性都是响应式的；
const {count} = toRefs(data)
二、computed和watch
1.computed
作用：描述依赖响应式状态的复杂逻辑；会自动追踪响应式依赖。
用法：computed()方法接收一个getter函数作为参数，返回值为一个计算属性ref，即可以通过.value访问计算结果，在模板表达式中无需添加.value
<script lang="ts" setup>
import { reactive, computed, toRefs } from 'vue'
const data = reactive({
count: 5
})
const { count } = toRefs(data)
const doubleCount = computed(() => {
return count.value * 2
})
const increase = () => {
count.value++
console.log(doubleCount.value)
}
const decrease = () => {
count.value--
console.log(doubleCount.value)
}
</script>
<template>
<div class="about">
<h1>count is a number {{ count }}</h1>
<div>
<button @click="increase">count +1</button>
<button @click="decrease">count -1</button>
</div>
<h1>this is doubleCount{{ doubleCount }}</h1>
</div>
</template>
计算属性vs方法：
不同点：
计算属性值会基于其响应式依赖被缓存，即一个计算属性仅会在其响应式依赖更新时才重新计算；而方法调用总是会在重新渲染发生时再次执行函数。
2.watch
作用：用于监听响应式变量的变化
语法：watch(x,(new, old) => {})
watch的第一个参数可以是：一个ref(包括计算属性)、一个响应式对象、一个getter函数、或多个数据源组成的数组
const { count } = ref(3)
const doubleCount = computed(() => {
return count.value * 2
})
watch(doubleCount, (newValue, oldValue) => {
console.log('new', newValue)
console.log('old', oldValue)
})
注意：不能直接侦听响应式对象的属性值！！
而是 需要返回该属性的getter函数:
const data = reactive({
count: 5
})
// 提供一个getter函数
watch(
() => data.count,
(count) => {
console.log('count is', count)
}
)
三、新的生命周期函数
1.选项式的beforeCreate、created，被setup替代了，setup表示组件被创建之前，props被解析之后执行，它是组合式API的入口
2.选项式的beforeDestroy、destroyed被更名为beforeUnmount、unmounted
| vue 2.x | vue 3.x |
|---|---|
| beforeCreate | setup |
| created | setup |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
四、自定义函数-Hooks函数
新建hooks/useXXX.ts文件，将逻辑代码都放在函数里：
hooks/useMousePosition.ts
import {ref,onMounted,onUnmounted} from 'vue'
function useMousePosition () {
const x = ref(0)
const y = ref(0)
const updateMouse = (event:MouseEvent) => {
x.value = event.pageX
y.value = event.pageY
}
onMounted(() => {
document.addEventListener('click', updateMouse)
})
onUnmounted(() => {
document.removeEventListener('click', updateMouse)
})
return {
x,
y
}
}
export default useMousePosition
xxx.vue
<script setup lang="ts">
import useMousePosition from './hooks/useMousePosition'
const { x, y } = useMousePosition()
</script>
优点：
- 清楚x,y变量来源
- 可以给x,y设置别名，这样的话可以避免命名冲突的风险
- 逻辑可以脱离组件存在，和组件本身的实现没有任何关系，不需要添加任何组件实现的功能，完美实现了逻辑重用
五、其他新增特性：
•Teleport-瞬移组件的位置，"传送"
作用：把指定的元素或组件渲染到任意父级作用域的其它DOM节点上
应用场景：常用于封装Modal弹框组件
语法：<Teleport>接收一个to prop来制定传送的目标。to 的值可以是一个 CSS 选择器（如：to=".box"、to="#box"），也可以是一个 DOM 元素对象（如：to="body"）
Modal.vue
<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
visible: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['cancel'])
const closeModal = () => {
emit('cancel')
}
</script>
<template>
<!-- 当Modal弹窗显示时，将其插入到<body>标签中去 -->
<teleport to="body">
<div class="modal-layer" v-if="visible">
<div class="modal">
<header @click="closeModal" class="close">X</header>
<main>
<slot></slot>
</main>
<footer></footer>
</div>
</div>
</teleport>
</template>
defineProps 用于接收父组件传递过来的自定义属性
defineEmits 用于声明父组件传递过来的自定义事件；子组件通过 defineEmits 获取 emit 对象（因为没有 this）
Page.vue
<script lang="ts" setup>
import { ref } from 'vue'
import Modal from '../components/Modal.vue'
const isShow = ref(false)
const openModal = () => {
isShow.value = true
}
const closeModal = () => {
isShow.value = false
}
</script>
<template>
<div class="page">
<Modal :visible="isShow" @cancel="closeModal">
<div>弹框主体内容</div>
</Modal>
<button @click="openModal" class="btn">打开弹窗</button>
</div>
</template>
• Suspense-异步加载组件
作用：常用于给异步组件加载时，显示loading
xxx.vue
<script lang="ts" setup>
// import AsyncCom from '../components/AsyncCom.vue'
import { defineAsyncComponent } from 'vue'
const AsyncCom = defineAsyncComponent(() => import('../components/AsyncCom.vue'))
</script>
<template>
<div class="my">
<Suspense>
<!-- 具有深层异步依赖的组件 -->
<AsyncCom></AsyncCom>
<!-- 在fallback插槽中显示'正在加载中' -->
<template #fallback> Loading... </template>
</Suspense>
</div>
</template>
AsyncCom.vue
<script lang="ts" setup>
import { ref } from 'vue'
const data = ref(null)
function delay(ms, value) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(value)
}, ms)
})
}
data.value = await delay(1000, 3)
</script>
<template>
<div class="child">
<h1>child page{{ data }}</h1>
</div>
</template>
监控Suspense出现的错误：使用onErrorCaptured() 生命周期钩子函数，返回一个boolean值
const error = ref(null)
onErrorCaptured((e) => {
error.value = e
// return true 表示错误是否向上传递
return true
)
• 全局API的修改和优化
全局配置Vue.config → app.config
全局注册类API：Vue.component → app.component
全局指令：Vue.directive → app.directive
行为扩展类API：Vue.mixin → app.mixin
安装全局插件 Vue.use→ app.use
nextTick()、observable() ...
• 直接使用script添加一个setup属性就可以直接使用Composition API
网友评论