agent-skills/skills/vue-best-practices/reference/directive-function-shorthand.md

---
title: Use Function Shorthand for Simple Directives
impact: LOW
impactDescription: Function shorthand reduces boilerplate for directives with identical mounted/updated behavior
type: best-practice
tags: [vue3, directives, shorthand, code-style]
---

# Use Function Shorthand for Simple Directives

**Impact: LOW** - It's common for a custom directive to have the same behavior for `mounted` and `updated`, with no need for other hooks. In such cases, you can define the directive as a function instead of an object, reducing boilerplate and improving readability.

The function will be called for both `mounted` and `updated` lifecycle hooks.

## Task Checklist

- [ ] Use function shorthand when mounted and updated behavior is identical
- [ ] Use object syntax when you need beforeMount, beforeUpdate, or unmounted hooks
- [ ] Use object syntax when mounted and updated have different logic

**Verbose (when not needed):**
```javascript
// VERBOSE: Full object when behavior is identical
const vColor = {
  mounted(el, binding) {
    el.style.color = binding.value
  },
  updated(el, binding) {
    el.style.color = binding.value  // Same as mounted
  }
}

const vHighlight = {
  mounted(el, binding) {
    el.style.backgroundColor = binding.value || 'yellow'
  },
  updated(el, binding) {
    el.style.backgroundColor = binding.value || 'yellow'  // Duplicated
  }
}

// Global registration - verbose
app.directive('pin', {
  mounted(el, binding) {
    el.style.position = 'fixed'
    el.style.top = binding.value + 'px'
  },
  updated(el, binding) {
    el.style.position = 'fixed'
    el.style.top = binding.value + 'px'
  }
})
```

**Concise (function shorthand):**
```javascript
// CONCISE: Function shorthand
const vColor = (el, binding) => {
  el.style.color = binding.value
}

const vHighlight = (el, binding) => {
  el.style.backgroundColor = binding.value || 'yellow'
}

// Global registration - concise
app.directive('pin', (el, binding) => {
  el.style.position = 'fixed'
  el.style.top = binding.value + 'px'
})
```

## With script setup

```vue
<script setup>
// Function shorthand for local directives
const vFocus = (el) => {
  el.focus()
}

const vColor = (el, binding) => {
  el.style.color = binding.value
}

const vPin = (el, binding) => {
  el.style.position = binding.modifiers.absolute ? 'absolute' : 'fixed'
  const position = binding.arg || 'top'
  el.style[position] = binding.value + 'px'
}
</script>

<template>
  <input v-focus />
  <p v-color="'red'">Colored text</p>
  <div v-pin:left.absolute="100">Positioned element</div>
</template>
```

## When to Use Object Syntax

Use the full object syntax when:

### 1. You Need Cleanup (unmounted hook)
```javascript
// Need object syntax for cleanup
const vClickOutside = {
  mounted(el, binding) {
    el._handler = (e) => {
      if (!el.contains(e.target)) binding.value(e)
    }
    document.addEventListener('click', el._handler)
  },
  unmounted(el) {
    document.removeEventListener('click', el._handler)
  }
}
```

### 2. Different Logic for mounted vs updated
```javascript
// Need object syntax for different behavior
const vLazyLoad = {
  mounted(el, binding) {
    // Initial setup - create observer
    el._observer = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting) {
        el.src = binding.value
        el._observer.disconnect()
      }
    })
    el._observer.observe(el)
  },
  updated(el, binding, vnode, prevVnode) {
    // Only update if value actually changed
    if (binding.value !== binding.oldValue) {
      el.src = binding.value
    }
  },
  unmounted(el) {
    el._observer?.disconnect()
  }
}
```

### 3. You Need beforeMount or beforeUpdate
```javascript
// Need object syntax for early lifecycle hooks
const vAnimate = {
  beforeMount(el) {
    el.style.opacity = '0'
  },
  mounted(el) {
    requestAnimationFrame(() => {
      el.style.transition = 'opacity 0.3s'
      el.style.opacity = '1'
    })
  },
  beforeUpdate(el) {
    el.style.opacity = '0.5'
  },
  updated(el) {
    el.style.opacity = '1'
  }
}
```

## Object Literal Values with Function Shorthand

Function shorthand works well with object literal values:

```javascript
const vDemo = (el, binding) => {
  console.log(binding.value.color)  // => "white"
  console.log(binding.value.text)   // => "hello!"

  el.style.color = binding.value.color
  el.textContent = binding.value.text
}
```

```vue
<template>
  <div v-demo="{ color: 'white', text: 'hello!' }"></div>
</template>
```

## Reference
- [Vue.js Custom Directives - Function Shorthand](https://vuejs.org/guide/reusability/custom-directives#function-shorthand)