组合式API
介绍
介绍:什么是组合式API,组合式API的特点
Vue3提供两种组织代码逻辑的写法:
-
通过data、methods、watch 等配置选项组织代码逻辑是
选项式API
写法 -
所有逻辑在setup函数中,使用 ref、watch 等函数组织代码是
组合式API
写法 -
在setup中通过vue提供的函数组织代码实现功能,就是组合式API写法。
-
组合式API有什么好处?可复用,可维护
-
ref 是不是一个组合式API?是
setup函数
setup函数是组合式API的入口函数
setup
函数是Vue3
特有的选项,作为组合式API的起点- 从组件生命周期看,它在
beforeCreate
之前执行 - 函数中
this
不是组件实例,是undefined
- 如果数据或者函数在模板中使用,需要在
setup
返回
基本结构:
比较麻烦,写模板,然后用setup(),再继续再setup里面return数据才能调用
<!-- 不使用语法糖step -->
import { ref } from 'vue'
<template>
<button @click="toggle">显示隐藏图片</button>
</template>
<script>
export default {
setup() {
const show = ref(true);
};
return {
show
};
},
};
</script>
总结:
- 今后在vue3的项目中几乎用不到
this
, 所有的东西通过函数获取。
reactive函数
通常使用它定义 对象类型 响应式数据
- reactive主要是来定义复杂类型数据
- 比较少用
使用步骤:
- 从
vue
中导出reactive
函数 - 在
setup
函数中,使用reactive
函数,传入一个普通对象,返回一个响应式数据对象 - 最后
setup
函数返回一个对象,包含该响应式对象即可,模板中可使用
<template>
<p>
ref:name is {
{ person1.name }} age is {
{ person1.age }} <button
@click="changePerson1"
>
change person1
</button>
</p>
<p>
reactive:province is {
{ address.province }} city is {
{ address.city }}
<button @click="changeAddress">change address</button>
</p>
</template>
<script>
import { ref, reactive } from 'vue'
export default {
// vue3的几乎所有内容,都放在setup函数中
setup () {
const person1 = ref({ name: '张三', age: 30 })
console.log('---person1---', person1)
const changePerson1 = () => {
person1.value.name = '李四'
person1.value.age = 40
}
const address = reactive({ province: '江西省', city: '赣州' })
console.log('---address---', address)
const changeAddress = () => {
address.province = '广东'
address.city = '茂名'
}
return {
person1,
changePerson1,
address,
changeAddress
}
}
}
</script>
总结:
reactive
函数通常定义:复杂类型的响应式数据- 可以转换简单数据吗?不能
ref函数
通常使用它定义响应式数据,不限类型
使用步骤:
- 从
vue
中导出ref
函数 - 在
setup
函数中,使用ref
函数,传入普通数据(简单or复杂),返回一个响应式数据 - 最后
setup
函数返回一个对象,包含该响应式数据即可 - 注意:使用
ref
创建的数据,js
中需要.value
,template
中可省略
总结:
ref
可以把简单数据或者复杂数据转换成响应式数据,注意使用加上.value
,不过模板可省略。- 疑问:定义响应式数据使用
ref
还是reactive
呢?
reactive 与 ref 的选择
知道:在定义响应式数据的时候如何选择reactive和ref
开始分析:
-
reactive
可以转换对象成为响应式数据对象,但是不支持简单数据类型。 -
ref
可以转换简单数据类型为响应式数据对象,也支持复杂数据类型,但是操作的时候需要.value
。 -
它们各有特点,现在也没有最佳实践,没有明显的界限,所有大家可以自由选择。
- ref:既可以定义简单类型数据、也可以定义复杂类型数据,但是它在js中访问模型数据的时候,要加一个.value
- reactive:只能定义复杂类型数据,在js中访问模型数据的时候,不需要加.value(因为它没有)
* - ref这个用得很多,因为它不仅仅可以用于定义模型数据(简单、复杂)还可以操作dom,等等之类
推荐用法:
- 如果能确定数据是对象且字段名称也确定,可使用
reactive
转成响应式数据,其他一概使用ref
。这样就没有 心智负担 。
参考代码:
// 1. 明确表单对象有两个字段
const form = reactive({
username: '',
password: ''
})
// 2. 后台返回的数据对象
const data = ref(null)
const res = await axios.get('/user/100')
data.value = res.data
总结:
- 在定义响应式数据的函数选择上,遵循:尽量使用
ref
函数支持所有场景,确定字段的对象使用reactive
可以省去.value
。
setup语法糖
简化 setup 固定套路代码 ,让代码更简洁
经常使用
<script setup>
const say = () => console.log('hi')
</script>
案例:
<template>
<img v-show="show" src="../assets/vue.svg" />
<hr />
<button @click="toggle">显示隐藏图片</button>
</template>
<script setup>
import { ref } from 'vue'
const show = ref(true)
//方法
const toggle = () => {
show.value = !show.value
}
</script>
小结:
- 在
script setup
中的顶层变量都可以在模板使用,数据,函数,组件。
computed函数
掌握:使用 computed 函数定义计算属性
大致步骤:
- 从
vue
中导出computed
函数 - 在
setup
函数中,使用computed
函数,传入一个函数,函数返回计算好的数据 - 最后
setup
函数返回一个对象,包含该计算属性数据即可,然后模板内使用
落地代码:
<script setup>
import { ref, computed } from "vue"
const scoreList = ref([80, 100, 90, 70, 60])
// 计算属性
const betterList = computed(() => scoreList.value.filter((item) => item >= 90))
// 改变数据,计算属性改变
setTimeout(() => {
scoreList.value.push(92, 66)
}, 3000)
</script>
<template>
<div>
<p>分数:{
{ scoreList }}</p>
<p>优秀:{
{ betterList }}</p>
</div>
</template>
总结:
- 使用
computed
定义计算属性,场景:当需要依赖一个数据得到新的数据使用计算属性
watch函数
掌握:使用watch函数监听数据的变化
大致内容:
- 使用
watch
监听响应式对象数据中的一个属性(复杂),配置深度监听(常用) - 使用
watch
监听,配置默认执行(
落地代码:
- 使用
watch
监听响应式对象数据中的一个属性(复杂),配置深度监听
<template>
<div class="">
<p>count is {
{ count }} name is {
{ name }}</p>
</div>
</template>
<script setup>
import { ref, watch } from 'vue'
const count = ref(0)
const name = ref('zhangsan')
const person = ref({
age: 30,
sex: '男',
address: {
province: '江西省',
city: '九江市'
}
})
/*
* 深度监听1 & 立即执行【用得多】
* 注意:我们要监听 person.value
*/
watch(person.value, (val1, val2) => {
console.log(val1, val2)
})
/**
* 深度监听1 & 立即执行【用得多】
* 注意:我们只监听 person中的address属性的改变
*
* 参数1:要监听的对象中的对象属性
* 参数2:回调函数
* 参数3:立即监听&立即执行的对象
*/
watch(
() => person.value.address,
(val1, val2) => {
console.log(val1, val2)
},
{
deep: true, // 深度监听
immediate: true // 立即执行
}
)
</script>
<style scoped></style>
- 使用
watch
监听,配置默认执行
{
// 开启深度监听
deep: true,
// 默认执行一次
immediate: true
}
总结:
watch(需要监听的数据,数据改变执行函数,配置对象)
来进行数据的侦听- 数据:单个数据,多个数据,函数返回对象属性,属性复杂需要开启深度监听
- 配置对象:
deep
深度监听immediate
默认执行
生命周期函数
掌握:vue3的常用生命周期函数
使用步骤:
- 先从vue中导入以
on打头
的生命周期钩子函数 - 在setup函数中调用生命周期函数并传入回调函数
- 生命周期钩子函数可以调用多次