VUE|组合式API

VUE|组合式API

1 setup语法糖

在vue项目中, 通常使用setup语法简化书写

setup的特点

1. 在setup语法中定义变量, 可以直接在模板中使用
2. 在setup语法中定义函数, 可以直接在模板中使用
3. 导入的组件对象, 可以直接在模板中使用

常用的组合式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>