Vue3.0新特性: 组合式 API(Composition API)

前言: 在 Vue2.x 中使用 (data、computed、methods、watch) 组件选项来组织逻辑通常都很有效。然而，当组件的一个功能开始变得复杂, 逻辑代码就会越来越长(如下图), 后期维护修改一个逻辑, 需要同时修改几个地方, 不利于维护. 故提出 composition API, 组合式API是将同一个逻辑关注点相关代码收集在一起的 API.

Vue2.x 大型组件的示例

Vue3.x会在组件中创建一个 setup 选项, 该 setup 选项的调用发生在 data property、computed property 或 methods 被解析之前, 所以在 setup 中不可以使用this

例1: 计数器

<template>
<button @click="addCount">
  +
</button>
<div>
  count: {{ state.count }}
</div>
<button @click="delCount">
-
</button>
</template>

<script setup>
import { reactive } from 'vue'

const state = reactive({ 
  count: 9
})

const addCount = () => state.count++
const delCount = () => state.count--
</script>
复制代码

例2: 博客列表增删改查

<template>
  <div class="blog">
    <div class="blog-add--input">
      <textarea v-model="content" rows="5" />
    </div>
    <div class="blog-add--btn" @click="addBlog">添加</div>
    <div class="blog-item" v-for="(item, index) in blogs" :key="item.id">
      <span class="blog-item--name">{{ item.name }}</span>
      <span class="blog-item--value">{{ item.value }}</span>
      <span class="blog-item--time">{{ item.time }}</span>
      <span class="blog-item--delete" @click="delBlog(index)">删除</span>
    </div>
  </div>
</template>

<script setup>
  import { reactive, ref } from 'vue'

  let blogs = reactive([
    { id: 1, name: 'sera', value: '这是一条博客', time: '2021.09.02' },
    { id: 2, name: 'taro', value: '锄禾日当午', time: '2021.09.06' },
    { id: 3, name: 'ngl', value: '汗滴禾下土', time: '2021.09.09' },
    { id: 4, name: 'piluta', value: '谁知盘中餐', time: '2021.09.11' },
    { id: 5, name: 'jilu', value: '粒粒皆辛苦', time: '2021.09.13' }
  ])

  let content = ref(' ')

  const delBlog = (index) => { blogs.splice(index, 1) }

  const addBlog = () => {
    blogs.unshift({
      id: blogs.length + 1, name: 'ceshi', value: content.value, time: new Date().getTime()
    })
    content.value = ''
  }
</script>

<style scoped>
.blog {
  width: 80%;
  margin: 30px 10%;
}

.blog-item {
  border-bottom: 1px solid rgba(0, 0, 0, .15);
  height: 40px;
  line-height: 40px;
  box-sizing: border-box;
  padding: 0 20px;
  display: flex;
  justify-content: space-around;
}

.blog-add--input textarea{
  width: calc(100% - 6px);
  height: 50px;
}

.blog-add--btn{
  display: flex;
  justify-content: flex-end;
  border-bottom: 1px solid rgba(0, 0, 0, .15);
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
}
</style>
复制代码