VUE|组合式API
1 setup语法糖
在vue项目中, 通常使用setup语法简化书写
setup的特点
- 在setup语法中定义变量, 可以直接在模板中使用
- 在setup语法中定义函数, 可以直接在模板中使用
- 导入的组件对象, 可以直接在模板中使用
常用的组合式API
- ref
- computed
- watch
- onMounted
2 ref
1) 基础语法
// 声明变量
const 变量 = ref(任意类型数据)
// 使用变量, 需要通过.value属性来访问
变量.value
2) 示例
实现一个计数器
<template>
<!-- 组件的模板部分 -->
计数器:{{ count }}
<button @click="handleClick">点击+1</button>
</template>
<script setup>
import { ref } from 'vue'
// 组件的逻辑部分
// 1. 在setup语法中定义变量, 可以直接在模板中使用
// 2. 在setup语法中定义函数, 可以直接在模板中使用
// 3. 导入的组件对象, 可以直接在模板中使用
const count = ref(0)
function handleClick() {
count.value++
}
</script>
<style>
/* 组件的样式 */
</style>
使用setup语法, 写切换显示/隐藏案例
示例
<template>
<button @click="handleClick">显示/隐藏</button>
<div v-show="flag">这是一个div</div>
</template>
<script setup>
import { ref } from 'vue'
// 声明变量
const flag = ref(true)
// 声明函数
function handleClick() {
flag.value = !flag.value
}
</script>
3 computed
1) 基础语法
const 变量 = computed(() => {
return 数据
})
2) 示例
计算全名
<template>
姓: <input type="text" v-model="firstname" /> <br />
名: <input type="text" v-model="lastname" /> <br />
全名: {{ fullname }}
</template>
<script setup>
import { computed, ref } from 'vue'
const firstname = ref('')
const lastname = ref('')
const fullname = computed(() => {
return firstname.value + lastname.value
})
</script>
4 watch
1) 基础语法
watch(数据源, 回调函数)
2) 示例
<template>
单价: 5 <br />
数量: <input type="text" v-model.number="num" /> <br />
总价: {{ total }}
</template>
<script setup>
import { ref, watch } from 'vue'
const num = ref(0)
const total = ref(0)
watch(num, () => {
total.value = num.value * 5
})
</script>
5 onMounted
onMounted是初始化数据的常用函数
<template>
<ul>
<li v-for="book in books" :key="book.id">{{ book.name }}</li>
</ul>
</template>
<script setup>
import { onMounted, ref } from 'vue'
const books = ref([])
onMounted(() => {
// 在onMounted中给books赋值
setTimeout(() => {
books.value = [
{ id: 1, name: 'vue' },
{ id: 2, name: 'gis' },
{ id: 3, name: 'js' },
]
}, 1000)
})
</script>