前端学习笔记（7）-Vue组合式api的理解及使用

吃花椒的恩酱

已于 2022-11-22 10:10:23 修改

阅读量779

点赞数 1

分类专栏：前端文章标签： vue.js 学习前端

于 2022-11-21 17:32:44 首次发布

本文链接：https://blog.csdn.net/JiangZhengyang7/article/details/127968766

版权

前端专栏收录该内容

17 篇文章 2 订阅

订阅专栏

1.选项式api（Options API）

组合式api这个概念是在Vue3.0引出的，为了更好的理解，我们需要先了解Vue3.0前我们使用的选项式api。

其在vue2.x项目中使用的就是选项API写法
代码风格：data选项写数据，methods选项写函数...，一个功能逻辑的代码分散
优点：易于学习和使用，写代码的位置已经约定好

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <title>姓名案例，watch实现</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <style>
    * {
      margin: top 20px;
    }
  </style>
  <!-- v-model页面上的输入影响数据的输入 -->
  <body>
    <div id="root">
      姓：<input type="text" v-model:value="firstname" /><br />
      名：<input type="text" v-model="lastname" /><br />

      全名：<span>{{fullName}}</span><br />
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;

    const vm = new Vue({
      el: "#root",
      data: {
        firstname: "张",
        lastname: "三",
        // 存在vm自身_data
        fullName: "张-三",
      },

      watch: {
        firstname(newValue) {
          // 他不是Vue管理的函数
          setTimeout(() => {
            this.fullName = newValue + "-" + this.lastname;
          }, 1000);
        },
        // 计算属性vs监听属性
        // 监听非常容易开启异步任务
        //(不被vue所管理的，定时器回调函数，ajax回调函数，promise回调函数)最好写成箭头函数，这样this的指向才是vm或组件实例对象

        lastname(newValue) {
          setTimeout(() => {
            this.fullName = this.firstname + "-" + newValue;
          }, 1000);  
        },
      },
    });
  </script>
</html>

对于某个功能的实现，咱们就需要分别在各个部分分别进行操作，一般都是data中定义一些初始化数据，method里在写一些方法，在watch监听一下数据变化。那这样的话是不是说我们的业务是不是分散到各个option这个选项中了。当功能少的时候还好，但功能一多业务一多就会发现，日后你想修改代码或者添加某个逻辑的功能时候，由于零散的原因就找起来代码来就特别的累。

缺点：代码组织性差，相似的逻辑代码不便于复用，逻辑复杂代码多了不好阅读
补充：虽然提供mixins用来封装逻辑，但是出现数据函数覆盖的概率很大，不好维护

由此引出了另一种代码风格

2.组合式api（Compositon API）

咱们在vue3.0项目中将会使用组合API写法

代码风格：一个功能逻辑的代码组织在一起（包含数据，函数...）
优点：功能逻辑复杂繁多情况下，各个功能逻辑代码组织再一起，便于阅读和维护

setup(){
    const testName = reactive({
          firstName: '江',
          lastName: '正阳',
        })
        // 通过计算属性
        const fullName = computed(() => {
          return testName.firstName + '-' + testName.lastName
        })
    
        watchEffect(() => {
          const names = input4.value.split('-')
          testName.firstName = names[0]
          testName.lastName = names[1]
        })
}

组合式API通过setup(){}选项暴露，该选项函数返回值可以在模板和实例中被访问
组合式API可以理解为关注点抽离的入口，我们可以把之前分散在各个选项data，computed，watch，methods，mouted的功能代码抽离到setup里面，然后暴露出来
组合式API可以抽离代码，意味着setup就不把data，computed，watch，methods，mouted这些功能作为选项了，但是如何实现与这些选项相匹配的功能呢？vue3为此暴露了与之匹配的ref，reactive，computed，watch，watchEffect等方法以及onMounted等生命周期
利用ref，reactive，computed等接口可以把之前分散在各个选项的逻辑功能块组合到一起，也就是，我们把之前分散的关注点抽离到一个代码块了，实现了关注点抽离