持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

前言

在前面章节的文章中，我们了解了vue里面基础语法、生命周期、指令的使用、动画效果、高级语法等内容。本章节开始，就一起学习vue3里面新增的一个特性compositionAPI系列内容。

了解compositionAPI

在学习compositionAPI之前，我们需要了解下面两个问题，所以在看完本篇文章之前，要带着这两个疑问去看。

❓ 什么是compositionAPI

❓ 为什么我们要用compositionAPI

<script>
  const app = Vue.createApp({
    data(){
      return {
        name: 'JueJin',
        age: 18,
        job: '前端开发'
      }
    },
    methods: {
      setName(){},
      setAge(){},
      getList(){},
      searchOption(){},
    },
    template: `
      <div>
        {{name}}-{{age}}-{{job}}
      </div>
    `
  });

  const vm = app.mount('#root');
</script>

在前端开发过程中，我们经常会这样去做，data里面定义数据值，methods里面定义页面上触发的事件，template里面则是页面模板。如果页面上有几百行代码，当我们需要去回顾某个值的方法时，可能需要一直滑动滚动条才能找到。比如下图这样的：

比如紫色模块，上面定义了data数据值，中间有一个获取的方法，下面某个地方又有一个定义的方法。
每块的逻辑和数据值都不在一个地方，导致维护起来比较困难。

所以这时候我们就需要用到compositionAPI，它可以很好的帮我们解决上面这种代码维护性的问题，也让我们的代码更加容易的聚合到一起。

setup函数

学习compositionAPI的时候，必须要学习它里面的第一个函数setup。

setup是在created生命周期函数之后执行的，也是在实例被完全初始化之前执行的。

const app = Vue.createApp({
    template: `
      <div>
        {{name}}
      </div>
    `,
    setup(props, context){
      return{
        name: 'JueJin'
      }
    }
});

props是外部传递过来的一些内容。
context指的是上下文。

这两个属性值后面会详细讲解，本篇文章主要是带大家认识compositionAPI和setup函数的使用~

我们在代码中没有使用data函数定义属性值，而是使用steup函数返回的数据值，页面上也会渲染出name。
在setup函数中，最后一定要用return返回数据，和之前写的data函数一样。

const app = Vue.createApp({
    template: `
      <div @click="handleClick">
        {{name}}
      </div>
    `,
    setup(props, context){
      return{
        name: 'JueJin',
        handleClick: () => {
          console.log(11)
        }
      }
    }
});

Kapture 2022-05-25 at 21.46.54.gif

当我们在模板上调用一个点击事件的时候，setup函数里面的事件方法也是会被触发的。
我们会发现setup函数return出来的内容都会暴露到外部。

❓ 由于setup函数是在实例被完全初始化之前执行的，那么在setup函数中直接调用外部方法会成功嘛？比如我们去调用methods中的方法。

methods: {
  handleTest(){
    console.log('test')
  }
},
setup(props, context){
  this.handleTest()
  return{
    name: 'JueJin',
    handleClick: () => {
      console.log(11)
    }
  }
}

这时候会发现在浏览器控制台中报错了，提示我们handleTest不是一个方法。
那是因为在实例被初始化之前，methods还没有绑定到vue实例中，所以找不到这个方法的。

📢 用了setup函数之后，就不要在这个函数里面使用this了，因为实例都还没被创建出来。

总结

本篇文章主要学习了compositionAPI的理解和compositionAPI中一个重要的函数setup。在后面的文章中，我们还会对compostionAPI进行更加深入的理解，大家加油💪🏻💪🏻

【Vue3从零开始-第六章】6-1 compositionAPI初识及setup函数的使用

前言

了解compositionAPI

setup函数

总结