Combined API and optional API

Combined API and optional API

Optional API

• Focus: one option at a time (configuration items)
• Features: Dispersed
• For example, the focus of optional APIs such as data, methods, computed, and watch is not on functions, and there is no concept of independent functions.

<template>

</template>

<script>
  export default {
      
      
    data() {
      
      
      return {
      
      
        // 功能1的data
        // 功能2的data
        // 功能3的data
      }
    },
    methods: {
      
      
      // 功能1的methods
      // 功能2的methods
      // 功能3的methods
    },
    computed: {
      
      
      // 功能1的computed
      // 功能2的computed
      // 功能3的computed
    },
    watch: {
      
      
      // 功能1的watch
      // 功能2的watch
      // 功能3的watch
    }
  }
</script>

It can be seen that the code to implement the function is very scattered, the maintenance cost is high, and it is relatively messy.

Composable API

Combined API + hooks focus on functionality

• hook1.js：

// 一个钩子就是一个独立的功能
// 这一次的关注点在功能上。
export default function() {
    
    
  // 功能1的data
  // 功能1的methods
  // 功能1的watch
  // 功能1的computed
  // ....
}

<template>

</template>

<script>
  import hook1 from "./hook1";
  import hook2 from "./hook2";
  export default {
      
      
    setup() {
      
      
      hook1() // 需要使用功能1，就调用hook1的钩子
      hook2() // 需要使用功能2，就调用hook2的钩子
    }
  }
</script>

Involving content

VUE3, combined API, optional API, hooks