vue3 composition api入门教程

我们使用vue自定义组件的时候，为了可以复用重复的功能代码时，提高代码的灵活性和可维护性，我们会把组件的逻辑抽离出来。虽然这样已经可以实现组件的复用，但是随着应用的复杂度组件增大，会对某一些方法进行功能迭代，这样对于那些新人，需要阅读旧的代码逻辑，对于开发不太友好。

vue composition api解决了什么问题？

1. 随着应用功能的持续迭代，复杂组件的代码变得越来越难以推理。这种情况通常发生在新来的开发人员阅读自己未编写的代码时。根本原因是Vue的现有API通过选项强制执行代码组织，但在某些情况下，通过逻辑考虑来组织代码更有意义。
2. 提供组件之间逻辑提取和重用的新机制，提供了更好的灵活性和可维护性。

api设计

vue之前在组件编写的时候，使用的是选项式API，例如下面的代码

export default {
  name: 'Button',
  data() {
    return {
      count: 0
    } 
  },
  method: {
    add() {
      this.count++
    }
  }
}

使用组合式API重写后，代码编写的风格就会变成如下

import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    const add = () => count.value++;
    return {
      count,
      add
    }
  }
}

可以看出，使用composition api，状态和方法的声明都在setup函数实现。

setup函数是什么？

setup 函数是一个组件式API的入口，在组件创建之前执行，可以在 setup 函数中定义组件的状态和方法。

setup 函数接收两个参数，一个是 props，一个是 context， props 是响应式的，所以不能使用解构，可以用 toRefs 函数来完成此操作，context 则可以

setup 返回的对象会暴露给组件的（计算属性，方法，生命周期钩子等）以及组件的模板

setup 只能是同步的，不能是异步

例如

import { toRefs } from 'vue'
export default {
  setup(props, context) {
    // const { name } = props; // 错误的写法
    const { name } = toRefs(props); // 正确的写法
    const { attrs } = context; // 正确的写法
    return {};
  }
}

setup函数注册生命周期钩子

组合式 API 上的生命周期钩子与选项式 API 的名称相同，但前缀为 on：即 mounted 看起来会像 onMounted

这些函数接受一个回调，当钩子被组件调用时，该回调将被执行

例如

import { ref, onMounted } from 'vue';
export default {
  setup(props) {
    const list = ref([]);

    const getList = async () => {
      list.value = await fetchList({ id: props.id });
    }

    onMounted(getList);

    return {
      list,
      getList,
    }
  }
}

ref函数是什么？

通过 ref 可以使变量具备响应式特性，一个简单的例子

import { ref } from 'vue'

const counter = ref(0)

console.log(counter) // { value: 0 }
console.log(counter.value) // 0

counter.value++
console.log(counter.value) // 1

watch函数

上面实现了通过props来获取调用 fetchList 列表获取数据，如果要监听 id ，当 id 变化时响应式获取数据，可以使用 watch 函数，我们为上面函数加入 watch 函数

import { ref, onMounted, watch，toRefs } from 'vue';
export default {
  setup(props) {
    
    // 使用 toRefs 解构
    const { id } = toRefs(props);

    const list = ref([]);

    const getList = async () => {
      list.value = await fetchList({ id });
    }

    onMounted(getList);

    // 监听 id 变化，重新获取数据
    watch(id, getList);

    return {
      list,
      getList,
    }
  }
}

独立的computed属性

上面已经完成了组件的 data ，method， watch 功能，接下来实现 computed 功能

import { ref, onMounted, watch，toRefs, computed } from 'vue';
export default {
  setup(props) {
    
    // 使用 toRefs 解构
    const { id } = toRefs(props);

    const list = ref([]);

    const getList = async () => {
      list.value = await fetchList({ id });
    }

    onMounted(getList);

    // 监听 id 变化，重新获取数据
    watch(id, getList);

    // 查询匹配的列表ist表
    const matchList = computed(() => {
      return list.value.filter(item => item.name.includes('interview.kelen.cc'))
    })

    return {
      list,
      getList,
    }
  }
}

其他问题

1. composition api 统一路径 src/composables, 文件名统一用 use 开头，例如 src/composables/useUserSearch.js
2. setup 函数是处于生命周期函数 beforeCreate 和 created 两个钩子函数之前的函数，是最先执行的函数
3. setup 函数不能使用this，在 setup 函数中使用 this 是 undefined，因为此时组件还没实例化
4. 从 setup 中返回的对象上的属性返回并可以在模板中被访问时，它将自动展开为内部值。不需要在模板中追加 .value