1. 组合API-setup函数
使用细节:
setup
是一个新的组件选项,作为组件中使用组合API的起点。- 从组件生命周期来看,它的执行在组件实例创建之前
vue2.x的beforeCreate
执行。 - 这就意味着在
setup
函数中this
还不是组件实例,this
此时是undefined
- 在模版中需要使用的数据和函数,需要在
setup
返回(return)。
2. 生命周期
2.1 回顾vue2.x生命周期钩子函数
- beforeCreate
- created——实例创建,能获取data, 不能获取真实DOM,一般用于发起Ajax请求
- beforeMount
- mounted——可以获取真实DOM
- beforeUpdate
- updated——当数据发生变化并更新页面后执行,获取更新后的DOM
- beforeDestroy
- destroyed——手动消除计时器/定时器/全局事件
2.2 认识vue3.0生命周期钩子函数
setup
创建实例前onBeforeMount
挂载DOM前onMounted
挂载DOM后onBeforeUpdate
更新组件前onUpdated
更新组件后onBeforeUnmount
卸载销毁前onUnmounted
卸载销毁后
总结: 组合API的生命周期钩子有7个,可以多次使用同一个钩子,执行顺序和书写顺序相同。
3. ref() 函数
- 作用:接收简单类型或者对象类型的数据传入并返回一个响应式的对象
定义响应式数据:
- ref函数,常用于简单数据类型定义为响应式数据
- 再修改值,获取值的时候,需要.value
- 在模板中使用ref申明的响应式数据,可以省略.value
语法:
从 vue 包中导入 ref 函数 import { ref } from 'vue'
在 setup 中执行 ref 函数并传入初始值,使用变量接收 ref 函数的返回值
使用场景:
- 当你明确知道需要的是一个响应式数据 对象 那么就使用 reactive 即可
- 其他情况使用ref
4. reactive() 函数
- 作用:接受对象类型数据的参数传入并返回一个响应式的对象
定义响应式数据:
- reactive是一个函数,它可以定义一个复杂数据类型,成为响应式数据。
- 通常是用来定义响应式对象数据
语法:
从 vue 包中导入 ref 函数 import { reactive } from 'vue'
在 setup 中执行 reactive 函数并传入初始值,使用变量接收 reactive 函数的返回值
5. toRef() 函数
- 作用:toRef 是函数,转换响应式对象中某个属性为单独响应式数据,并且值是关联的。
语法:
从 vue 包中导入 toRef 函数 import { toRef } from 'vue'
toRef (响应式对象, 响应式对象中的某个属性)
使用场景:有一个响应式对象数据,但是模版中只需要使用其中一项数据。
6. toRefs() 函数
- 作用:toRefs() 是函数,转换响应式对象中所有属性为单独响应式数据,并且值是关联的。
- 语法:
- 从 vue 包中导入 toRefs 函数 import { toRefs } from 'vue'
- toRefs (响应式对象)
7. 案例
基本步骤:
- 记录鼠标坐标
- 定义一个响应式数据对象,包含x和y属性。
- 在组件渲染完毕后,监听document的鼠标移动事件
- 指定move函数为事件对应方法,在函数中修改坐标
- 在setup返回数据,模版中使用
- 累加1功能
- 定义一个简单数据类型的响应式数据
- 定义一个修改数字的方法
- 在setup返回数据和函数,模板中使用
<template>
<div>
<div>鼠标的坐标为:</div>
<p>x:{{ x }}</p>
<p>y:{{ y }}</p>
<hr>
<div>{{ count }}</div>
<button @click="add">+ 1</button>
</div>
</template>
<script>
import { onMounted, reactive, onUnmounted, toRefs, ref } from 'vue'
// 功能1:记录鼠标坐标
// 定义一个响应式数据对象,包含x和y属性。
// 在组件渲染完毕后,监听document的鼠标移动事件
// 指定move函数为事件对应方法,在函数中修改坐标
// 在setup返回数据,模版中使用
export default {
setup () {
// 1. 定义一个响应式数据对象,包含x和y属性。
const mouse = reactive({
x: 0,
y: 0
})
// 3. 指定move函数为事件对应方法,在函数中修改坐标
const move = (e) => {
mouse.x = e.pageX
mouse.y = e.pageY
}
// 2. 在组件渲染完毕后,监听document的鼠标移动事件
onMounted(() => {
document.addEventListener('mousemove',move)
})
// 4. 组件销毁时,移除事件
onUnmounted(() => {
document.removeEventListener('mousemove',move)
})
// 功能2:数字加 1
const count = ref(0)
const add = () => {
count.value += 1
}
return {
...toRefs(mouse),
count,
add
}
}
}
</script>
<style>
</style>