TypeScript基础篇一: HelloWorld TypeScript

TypeScript基础篇二: 使用TypeScript编写接口和类

TypeScript基础篇三: TypeScript的命名空间

TypeScript实战篇一：使用Vue-Cli脚手架创建Vue3项目

TypeScript实战篇二：动手创建一个TodoList组件

TypeScript实战篇三：学习Vue3组合式 API并动手实践

一、组合式 API

• Composition API又称为组合式 API，是Vue3非常重要的新特性；

• 使用传统的option配置方法写组件的时候问题，随着业务复杂度越来越高，代码量会不断的加大；由于相关业务的代码需要遵循option的配置写到特定的区域，导致后续维护非常的复杂，同时代码可复用性不高，而composition-api就是为了解决这个问题而生的

二、动手实践

• 以上描述如果一时之间没有理解也没关系，我们来举个具体的例子，让我们真正理解如何用Composition API来实现逻辑代码复用。

• 下面是一个经典的vue2的TodoList组件：我们可以看到相关业务的代码需要遵循option的配置写到特定的区域

<template>
  <div>
    <h3>已选{{ count }}项</h3>
    <ul>
      <li v-for="item in lists" :key="item.id">
        <input
          type="checkbox"
          @change="check()"
          :value="item.task"
          v-model="checkedValue"
        />
        <span>{{ item.task }}</span>
      </li>
    </ul>
    {{ checkedValue }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
      checkedValue: [],
      lists: [
        { id: 0, task: '读书' },
        { id: 1, task: '写字' },
        { id: 2, task: '洗澡' },
        { id: 3, task: '睡觉' }
      ]
    }
  },
  methods: {
    chceck() {
      this.count= this.checkedValue.length
    }
  }
}
</script>

• 接下来我们使用vue3的Composition API来改写TodoList组件:

1. 首先使用Composition提取出逻辑代码形成TodoList.ts文件

// TodoList.ts
import { ref } from 'vue'

export default function() {
  const count = ref(0)
  const checkedValue = ref([])

  const check = () => {
    count.value = checkedValue.value.length
  }

  return { count, checkedValue, check }

ref:导入了ref函数,表示该函数允许我们定义一个响应式变量,其作用与data变量几乎相同。

2. 引入setup函数：setup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。在beforeCreate之前调用setup，创建TodoList对象，对象中的属性可以在模板中进行使用

<!-- TodoList.vue -->
<template>
  <div>
    <h3>已选{{ count }}项</h3>
    <ul>
      <li v-for="item in lists" :key="item.id">
        <input
          type="checkbox"
          @change="check()"
          :value="item.task"
          v-model="checkedValue"
        />
        <span>{{ item.task }}</span>
      </li>
    </ul>
    {{ checkedValue }}
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import toDoList from './TodoList'

export default defineComponent({
  name: 'TodoList',
  props: {},
  setup() {
    // 创建对象，对象中的属性可在模板中使用
    const { count, checkedValue, check } = toDoList()
    return { count, checkedValue, check }
  },
  data() {
    return {
      lists: [
        { id: 0, task: '读书' },
        { id: 1, task: '写字' },
        { id: 2, task: '洗澡' },
        { id: 3, task: '睡觉' }
      ]
    }
  },
  methods: {}
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
li {
  list-style-type: none;
}
</style>

3. Vue3组合式 API的引入，很好地解决了逻辑代码分类管理及重用的问题，以后我们的组件可以这样写：

<template>
  ...
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import logical1 from './logical1'
import logical2 from './logical2'
import logical3 from './logical3'

export default defineComponent({
  setup() {
    // 创建对象，对象中的属性可在模板中使用
    const { l1 } = logical1 ()
    const { l2 } = logical2 ()
    const { l3 } = logical3 ()
    return { l1 , l2 , l3 }
  }
  ...
})
</script>