Web前端vue必做笔记之一:组合api的优势

Web前端vue必做笔记之一:组合api的优势

//counter.js
export default function(number){
           
    function increase(){
        number.value++
    }
    function decrease(){
       number.value--
    }

    return {
         increase,
         decrease
    }
}
//这个模块就是计算器加法和减法功能

<template>
     <h1>苹果 0.5元一斤</h1>
     <!-- 通过计数器来添加苹果的数量或减少苹果的数量 来计算苹果的总价-->
     <button @click="decrease">-</button>
      <spn>{{number}}</spn>
      <button @click="increase">+</button>
      <h2>总价：{{totalPrice}}</h2>
</template>
<script>
   import {ref,computed} from 'vue'
   import counter from "./components/counter"
export default {
    setup(){
         const number =ref(0)

        //  就可以进行调用加减法功能
        const {increase, decrease} = counter(number)

         const totalPrice = computed(() =>{
              return number.value * 0.5;
         })

         return {
             number,
             increase,
             decrease,
             totalPrice
         }
    }
}
</script>

这样写就可以把计算器的功能给抽离出来，当组件功能特别多的时候
就可以通过这种方式，把不同的功能抽离出来，进行传参，解构，拿到你需要的东西，这样就会发现代码清晰简洁