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,一个是 contextprops 是响应式的,所以不能使用解构,可以用 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属性

上面已经完成了组件的 datamethodwatch 功能,接下来实现 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 函数是处于生命周期函数 beforeCreatecreated 两个钩子函数之前的函数,是最先执行的函数
  3. setup 函数不能使用this,在 setup 函数中使用 thisundefined,因为此时组件还没实例化
  4. setup 中返回的对象上的属性返回并可以在模板中被访问时,它将自动展开为内部值。不需要在模板中追加 .value

你可能感兴趣的:(vue3 composition api入门教程)