亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

第 001 期 聚集零散業務代碼的解決方案 - Vue 3 Composition API

標簽:
Vue.js

用 Vue 时,常出现相关业务逻辑代码散在 data, methods, watch, computed 和 mounted 等地方。这样的代码可维护性差。查找或更改这块逻辑时,都要找多个地方。

解决方案

Vue 3 新出的 Composition API 可以优雅的聚集零散业务代码。 Composition API 通过 ref,reactive,watch,computed, onMounted 等这些可调用的函数,来聚集代码。

我们来看个 Demo。实现一个计数器,支持按加,减按钮来改数字,改数字时,要将新的值传给服务器端。

常规写法:

<template>
  <div>
    <button @click="decrease"> -1 </button>
    {{count}}
    <button @click="increase"> +1 </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1
    }
  },
  watch: {
    count(newValue) {
      this.report(newValue)
    }
  },
  methods: {
    increase() {
      this.count++
    },
    decrease() {
      this.count--
    },
    report(count) {
      console.log(`report num: ${count}`)
    }
  }
}
</script>

业务逻辑代码散在 data,watch 和 methods 里。

用 Composition API 写,可以将业务代码聚集在一处。Composition API 和 常规写法的 DOM 结构没有变化,只有 js 有变化。如下:

<script setup>
import {ref, watch} from 'vue'
const count = ref(1)

const setCount = (value) => {
  count.value = value
}

const increase = () => setCount(count.value + 1)
const decrease = () => setCount(count.value - 1)
const report = count => console.log(`report num: ${count}`)

watch(count, newValue => report(newValue))
</script>

为了方便计数器逻辑的复用,可以抽象成一个函数:

import {ref, watch} from 'vue'

export default function useCount(initValue = 1, onChange) {
const count = ref(initValue)

const setCount = (value) => {
  count.value = value
}

watch(count, newValue => onChange(newValue))

const increase = () => setCount(count.value + 1)
const decrease = () => setCount(count.value - 1)

return {
  count,
  increase,
  decrease
}

使用:

<script setup>
import useCount from './use-count'
const report = count => console.log(`report num: ${count}`)
const {count, increase, decrease} = useCount(1, report)
</script>

代码是不是变得很内聚,用 Composition API 来重构零散的代码吧~

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
115
獲贊與收藏
6940

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消