The Computed Inlining Refactoring Pattern in Vue

TLDR

Improve your Vue component performance and readability by applying the Computed Inlining pattern - a technique inspired by Martin Fowler’s Inline Function pattern. By consolidating helper functions directly into computed properties, you can reduce unnecessary abstractions and function calls, making your code more straightforward and efficient.

Introduction

Vue 3’s reactivity system is powered by computed properties that efficiently update only when their dependencies change. But sometimes we overcomplicate our components by creating too many small helper functions that only serve a single computed property. This creates unnecessary indirection and can make code harder to follow.

The Computed Inlining pattern addresses this problem by consolidating these helper functions directly into the computed properties that use them. This pattern is the inverse of Martin Fowler’s Extract Function pattern and is particularly powerful in the context of Vue’s reactive system.

Understanding Inline Function

This pattern comes from Martin Fowler’s Refactoring catalog, where he describes it as a way to simplify code by removing unnecessary function calls when the function body is just as clear as its name. You can see his original pattern here: refactoring.com/catalog/inlineFunction.html

Here’s his example:

function getRating(driver) {
  return moreThanFiveLateDeliveries(driver) ? 2 : 1;
}

function moreThanFiveLateDeliveries(driver) {
  return driver.numberOfLateDeliveries > 5;
}

After applying the Inline Function pattern:

function getRating(driver) {
  return (driver.numberOfLateDeliveries > 5) ? 2 : 1;
}

The code becomes more direct and eliminates an unnecessary function call, while maintaining readability.

Bringing Inline Function to Vue Computed Properties

In Vue components, we often create helper functions that are only used once inside a computed property. While these can improve readability in complex cases, they can also add unnecessary layers of abstraction when the logic is simple.

Let’s look at how this pattern applies specifically to computed properties in Vue.

Before Refactoring

Here’s how a Vue component might look before applying Computed Inlining:

// src/components/OrderSummary.vue
<script setup lang="ts">
import { 
const computed: {
    <T>(getter: ComputedGetter<T>, debugOptions?: DebuggerOptions): ComputedRef<T>;
    <T, S = T>(options: WritableComputedOptions<T, S>, debugOptions?: DebuggerOptions): WritableComputedRef<T, S>;
}computed, function ref<T>(value: T): [T] extends [Ref] ? IfAny<T, Ref<T>, T> : Ref<UnwrapRef<T>, UnwrapRef<T> | T> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref, function watch<T, Immediate extends Readonly<boolean> = false>(source: WatchSource<T>, cb: WatchCallback<T, MaybeUndefined<T, Immediate>>, options?: WatchOptions<Immediate>): WatchHandle (+3 overloads)watch } from 'vue'

interface OrderItem {
  OrderItem.id: numberid: number
  OrderItem.quantity: numberquantity: number
  OrderItem.unitPrice: numberunitPrice: number
  OrderItem.isDiscounted: booleanisDiscounted: boolean
}

const 
const orderItems: Ref<{
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}[], OrderItem[] | {
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}[]>orderItems = 
ref<OrderItem[]>(value: OrderItem[]): Ref<{
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}[], OrderItem[] | {
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}[]> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref<OrderItem[]>([
  { OrderItem.id: numberid: 1, OrderItem.quantity: numberquantity: 2, OrderItem.unitPrice: numberunitPrice: 100, OrderItem.isDiscounted: booleanisDiscounted: true },
  { OrderItem.id: numberid: 2, OrderItem.quantity: numberquantity: 1, OrderItem.unitPrice: numberunitPrice: 50, OrderItem.isDiscounted: booleanisDiscounted: false }
])

const const taxRate: Ref<number, number>taxRate = ref<number>(value: number): Ref<number, number> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref(0.1)
const const discountRate: Ref<number, number>discountRate = ref<number>(value: number): Ref<number, number> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref(0.15)
const const shippingCost: Ref<number, number>shippingCost = ref<number>(value: number): Ref<number, number> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref(15)
const const freeShippingThreshold: Ref<number, number>freeShippingThreshold = ref<number>(value: number): Ref<number, number> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref(200)

// Helper function to calculate item total
function function calculateItemTotal(item: OrderItem): numbercalculateItemTotal(item: OrderItemitem: OrderItem): number {
  if (item: OrderItemitem.OrderItem.isDiscounted: booleanisDiscounted) {
    return item: OrderItemitem.OrderItem.quantity: numberquantity * item: OrderItemitem.OrderItem.unitPrice: numberunitPrice * (1 - const discountRate: Ref<number, number>discountRate.Ref<number, number>.value: numbervalue)
  }
  return item: OrderItemitem.OrderItem.quantity: numberquantity * item: OrderItemitem.OrderItem.unitPrice: numberunitPrice
}

// Helper function to sum all items
function function calculateSubtotal(): numbercalculateSubtotal(): number {
  return 
const orderItems: Ref<{
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}[], OrderItem[] | {
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}[]>orderItems.
Ref<{ id: number; quantity: number; unitPrice: number; isDiscounted: boolean; }[], OrderItem[] | { id: number; quantity: number; unitPrice: number; isDiscounted: boolean; }[]>.value: {
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}[]value.
Array<{ id: number; quantity: number; unitPrice: number; isDiscounted: boolean; }>.reduce<number>(callbackfn: (previousValue: number, currentValue: {
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}, currentIndex: number, array: {
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}[]) => number, initialValue: number): number (+2 overloads)
Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
@paramcallbackfn A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array.@paraminitialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.reduce((sum: numbersum, 
item: {
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}item) => {
    return sum: numbersum + function calculateItemTotal(item: OrderItem): numbercalculateItemTotal(
item: {
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}item)
  }, 0)
}

// Helper function to determine shipping
function function getShippingCost(subtotal: number): numbergetShippingCost(subtotal: numbersubtotal: number): number {
  return subtotal: numbersubtotal > const freeShippingThreshold: Ref<number, number>freeShippingThreshold.Ref<number, number>.value: numbervalue ? 0 : const shippingCost: Ref<number, number>shippingCost.Ref<number, number>.value: numbervalue
}

// Computed property for subtotal
const const subtotal: ComputedRef<number>subtotal = computed<number>(getter: ComputedGetter<number>, debugOptions?: DebuggerOptions): ComputedRef<number> (+1 overload)
Takes a getter function and returns a readonly reactive ref object for the
returned value from the getter. It can also take an object with get and set
functions to create a writable ref object.
@example```js
// Creating a readonly computed ref:
const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2
plusOne.value++ // error
```

```js
// Creating a writable computed ref:
const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  }
})

plusOne.value = 1
console.log(count.value) // 0
```@paramgetter - Function that produces the next value.@paramdebugOptions - For debugging. See {@link https://vuejs.org/guide/extras/reactivity-in-depth.html#computed-debugging}.@see{@link https://vuejs.org/api/reactivity-core.html#computed}computed(() => {
  return function calculateSubtotal(): numbercalculateSubtotal()
})

// Computed property for tax
const const tax: ComputedRef<number>tax = computed<number>(getter: ComputedGetter<number>, debugOptions?: DebuggerOptions): ComputedRef<number> (+1 overload)
Takes a getter function and returns a readonly reactive ref object for the
returned value from the getter. It can also take an object with get and set
functions to create a writable ref object.
@example```js
// Creating a readonly computed ref:
const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2
plusOne.value++ // error
```

```js
// Creating a writable computed ref:
const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  }
})

plusOne.value = 1
console.log(count.value) // 0
```@paramgetter - Function that produces the next value.@paramdebugOptions - For debugging. See {@link https://vuejs.org/guide/extras/reactivity-in-depth.html#computed-debugging}.@see{@link https://vuejs.org/api/reactivity-core.html#computed}computed(() => {
  return const subtotal: ComputedRef<number>subtotal.ComputedRef<number>.value: numbervalue * const taxRate: Ref<number, number>taxRate.Ref<number, number>.value: numbervalue
})

// Watch for changes to update final total
const const finalTotal: Ref<number, number>finalTotal = ref<number>(value: number): Ref<number, number> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref(0)
watch<[ComputedRef<number>, ComputedRef<number>], true>(sources: [ComputedRef<number>, ComputedRef<number>] | readonly [ComputedRef<number>, ComputedRef<...>], cb: WatchCallback<...>, options?: WatchOptions<...> | undefined): WatchHandle (+3 overloads)watch(
  [const subtotal: ComputedRef<number>subtotal, const tax: ComputedRef<number>tax],
  ([newSubtotal: numbernewSubtotal, newTax: numbernewTax]) => {
    const const shipping: numbershipping = function getShippingCost(subtotal: number): numbergetShippingCost(newSubtotal: numbernewSubtotal)
    const finalTotal: Ref<number, number>finalTotal.Ref<number, number>.value: numbervalue = newSubtotal: numbernewSubtotal + newTax: numbernewTax + const shipping: numbershipping
  },
  { WatchOptions<true>.immediate?: true | undefinedimmediate: true }
)
</script>

The component works but has several issues:

• Uses a watch when a computed would be more appropriate
• Has multiple helper functions that are only used once
• Splits related logic across different properties and functions
• Creates unnecessary intermediate values

After Refactoring with Computed Inlining

Now let’s apply Computed Inlining to simplify the code:

// src/components/OrderSummary.vue
<script setup lang="ts">
import { 
const computed: {
    <T>(getter: ComputedGetter<T>, debugOptions?: DebuggerOptions): ComputedRef<T>;
    <T, S = T>(options: WritableComputedOptions<T, S>, debugOptions?: DebuggerOptions): WritableComputedRef<T, S>;
}computed, function ref<T>(value: T): [T] extends [Ref] ? IfAny<T, Ref<T>, T> : Ref<UnwrapRef<T>, UnwrapRef<T> | T> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref } from 'vue'

interface OrderItem {
  OrderItem.id: numberid: number
  OrderItem.quantity: numberquantity: number
  OrderItem.unitPrice: numberunitPrice: number
  OrderItem.isDiscounted: booleanisDiscounted: boolean
}

const 
const orderItems: Ref<{
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}[], OrderItem[] | {
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}[]>orderItems = 
ref<OrderItem[]>(value: OrderItem[]): Ref<{
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}[], OrderItem[] | {
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}[]> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref<OrderItem[]>([
  { OrderItem.id: numberid: 1, OrderItem.quantity: numberquantity: 2, OrderItem.unitPrice: numberunitPrice: 100, OrderItem.isDiscounted: booleanisDiscounted: true },
  { OrderItem.id: numberid: 2, OrderItem.quantity: numberquantity: 1, OrderItem.unitPrice: numberunitPrice: 50, OrderItem.isDiscounted: booleanisDiscounted: false }
])

const const taxRate: Ref<number, number>taxRate = ref<number>(value: number): Ref<number, number> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref(0.1)
const const discountRate: Ref<number, number>discountRate = ref<number>(value: number): Ref<number, number> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref(0.15)
const const shippingCost: Ref<number, number>shippingCost = ref<number>(value: number): Ref<number, number> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref(15)
const const freeShippingThreshold: Ref<number, number>freeShippingThreshold = ref<number>(value: number): Ref<number, number> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref(200)

const const orderTotal: ComputedRef<number>orderTotal = computed<number>(getter: ComputedGetter<number>, debugOptions?: DebuggerOptions): ComputedRef<number> (+1 overload)
Takes a getter function and returns a readonly reactive ref object for the
returned value from the getter. It can also take an object with get and set
functions to create a writable ref object.
@example```js
// Creating a readonly computed ref:
const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2
plusOne.value++ // error
```

```js
// Creating a writable computed ref:
const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  }
})

plusOne.value = 1
console.log(count.value) // 0
```@paramgetter - Function that produces the next value.@paramdebugOptions - For debugging. See {@link https://vuejs.org/guide/extras/reactivity-in-depth.html#computed-debugging}.@see{@link https://vuejs.org/api/reactivity-core.html#computed}computed(() => {
  // Calculate subtotal with inline discount logic
  const const subtotal: numbersubtotal = 
const orderItems: Ref<{
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}[], OrderItem[] | {
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}[]>orderItems.
Ref<{ id: number; quantity: number; unitPrice: number; isDiscounted: boolean; }[], OrderItem[] | { id: number; quantity: number; unitPrice: number; isDiscounted: boolean; }[]>.value: {
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}[]value.
Array<{ id: number; quantity: number; unitPrice: number; isDiscounted: boolean; }>.reduce<number>(callbackfn: (previousValue: number, currentValue: {
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}, currentIndex: number, array: {
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}[]) => number, initialValue: number): number (+2 overloads)
Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
@paramcallbackfn A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array.@paraminitialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.reduce((sum: numbersum, 
item: {
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}item) => {
    const const itemTotal: numberitemTotal = 
item: {
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}item.isDiscounted: booleanisDiscounted
      ? 
item: {
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}item.quantity: numberquantity * 
item: {
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}item.unitPrice: numberunitPrice * (1 - const discountRate: Ref<number, number>discountRate.Ref<number, number>.value: numbervalue)
      : 
item: {
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}item.quantity: numberquantity * 
item: {
    id: number;
    quantity: number;
    unitPrice: number;
    isDiscounted: boolean;
}item.unitPrice: numberunitPrice
    return sum: numbersum + const itemTotal: numberitemTotal
  }, 0)

  // Calculate tax
  const const tax: numbertax = const subtotal: numbersubtotal * const taxRate: Ref<number, number>taxRate.Ref<number, number>.value: numbervalue

  // Determine shipping cost inline
  const const shipping: numbershipping = const subtotal: numbersubtotal > const freeShippingThreshold: Ref<number, number>freeShippingThreshold.Ref<number, number>.value: numbervalue ? 0 : const shippingCost: Ref<number, number>shippingCost.Ref<number, number>.value: numbervalue

  return const subtotal: numbersubtotal + const tax: numbertax + const shipping: numbershipping
})
</script>

The refactored version:

• Consolidates all pricing logic into a single computed property
• Eliminates the need for a watch by using Vue’s reactive system properly
• Removes unnecessary helper functions and intermediate values
• Makes the data flow more clear and direct
• Reduces the number of reactive dependencies being tracked

Best Practices

• Apply Computed Inlining when the helper function is only used once
• Use this pattern when the logic is simple enough to be understood inline
• Add comments to clarify steps if the inline logic is non-trivial
• Keep computed properties focused on a single responsibility, even after inlining
• Consider keeping functions separate if they’re reused or complex

When to Use Computed Inlining

• When the helper functions are only used by a single computed property
• When performance is critical (eliminates function call overhead)
• When the helper functions don’t significantly improve readability
• When you want to reduce the cognitive load of jumping between functions
• When debugging and following the execution flow is important

When to Avoid Computed Inlining

• When the helper function is used in multiple places
• When the logic is complex and the function name significantly improves clarity
• When the function might need to be reused in the future
• When testing the helper function independently is important

Conclusion

The Computed Inlining pattern in Vue is a practical application of Martin Fowler’s Inline Function refactoring technique. It helps streamline your reactive code by:

• Reducing unnecessary abstractions
• Eliminating function call overhead
• Making execution flow more direct and easier to follow
• Keeping related logic together in one place

While not appropriate for every situation, Computed Inlining is a valuable tool in your Vue refactoring toolkit, especially when optimizing components with many small helper functions.

Try applying Computed Inlining in your next Vue component refactoring, and see how it can make your code both simpler and more efficient.

References

• Martin Fowler’s Inline Function Pattern
• Vue Documentation on Computed Properties