Vue3 指令系统详解

发布时间: 2025-03-22 12:09

↑

# Vue3 指令系统详解

本文将详细介绍Vue3中的指令系统，包括内置指令和自定义指令的使用方法。

## 内置指令

### 1. v-bind

用于动态绑定属性：

```vue
<template>
  <div>
    
    <img v-bind:src="imageUrl" />
    
    <img :src="imageUrl" />
    
    
    <button :[buttonAttr]="buttonValue">Click me</button>
    
    
    <div v-bind="objectOfAttrs"></div>
  </div>
</template>

const imageUrl = ref('/images/logo.png')
const buttonAttr = ref('disabled')
const buttonValue = ref(true)
const objectOfAttrs = ref({
  id: 'container',
  class: 'wrapper'
})
</script>
```

### 2. v-on

用于事件处理：

```vue
<template>
  <div>
    
    <button v-on:click="handleClick">Click</button>
    
    <button @click="handleClick">Click</button>
    
    
    <button @click="count++">Add 1</button>
    
    
    <form @submit.prevent="handleSubmit">
      <button>Submit</button>
    </form>
    
    
    <input @keyup.enter="handleEnter" />
  </div>
</template>

const count = ref(0)

const handleClick = () => {
  console.log('Button clicked')
}

const handleSubmit = () => {
  console.log('Form submitted')
}

const handleEnter = () => {
  console.log('Enter pressed')
}
</script>
```

### 3. v-model

用于表单双向绑定：

```vue
<template>
  <div>
    
    <input v-model="text" />
    <p>Text: {{ text }}</p>
    
    
    <input type="checkbox" v-model="checked" />
    <p>Checked: {{ checked }}</p>
    
    
    <input type="radio" v-model="picked" value="one" />
    <input type="radio" v-model="picked" value="two" />
    <p>Picked: {{ picked }}</p>
    
    
    <select v-model="selected">
      <option value="">Please select</option>
      <option value="a">A</option>
      <option value="b">B</option>
    </select>
    <p>Selected: {{ selected }}</p>
  </div>
</template>

const text = ref('')
const checked = ref(false)
const picked = ref('')
const selected = ref('')
</script>
```

### 4. v-if/v-else/v-else-if

用于条件渲染：

```vue
<template>
  <div>
    <h2 v-if="type === 'A'">Type A</h2>
    <h2 v-else-if="type === 'B'">Type B</h2>
    <h2 v-else>Other Type</h2>
    
    
    <template v-if="showGroup">
      <h2>Title</h2>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </template>
  </div>
</template>

const type = ref('A')
const showGroup = ref(true)
</script>
```

### 5. v-show

用于切换元素的显示状态：

```vue
<template>
  <div>
    <h2 v-show="visible">This may be visible or hidden</h2>
  </div>
</template>

const visible = ref(true)
</script>
```

### 6. v-for

用于列表渲染：

```vue
<template>
  <div>
    
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.text }}
      </li>
    </ul>
    
    
    <ul>
      <li v-for="(item, index) in items" :key="item.id">
        {{ index }}. {{ item.text }}
      </li>
    </ul>
    
    
    <ul>
      <li v-for="(value, key) in object" :key="key">
        {{ key }}: {{ value }}
      </li>
    </ul>
  </div>
</template>

const items = ref([
  { id: 1, text: 'Item 1' },
  { id: 2, text: 'Item 2' },
  { id: 3, text: 'Item 3' }
])

const object = ref({
  name: 'John',
  age: 30,
  city: 'New York'
})
</script>
```

## 自定义指令

### 1. 基础用法

```vue
<template>
  <div>
    <input v-focus />
  </div>
</template>

### 2. 全局注册

```javascript
// main.js
const app = createApp(App)

app.directive('focus', {
  mounted: (el) => el.focus()
})
```

### 3. 指令钩子函数

```javascript
app.directive('example', {
  // 在绑定元素的 attribute 前调用
  created(el, binding, vnode, prevVnode) {
    // 做些初始化工作
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {
    // 设置初始状态
  },
  // 在绑定元素的父组件被挂载后调用
  mounted(el, binding, vnode, prevVnode) {
    // 添加事件监听器等
  },
  // 在更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {
    // 处理更新前的清理工作
  },
  // 在更新后调用
  updated(el, binding, vnode, prevVnode) {
    // 处理更新后的操作
  },
  // 在卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {
    // 清理工作，比如移除事件监听器
  },
  // 在卸载后调用
  unmounted(el, binding, vnode, prevVnode) {
    // 最终的清理工作
  }
})
```

### 4. 实用示例

#### 点击外部关闭指令

```javascript
app.directive('click-outside', {
  mounted(el, binding) {
    el._clickOutside = (event) => {
      if (!(el === event.target || el.contains(event.target))) {
        binding.value(event)
      }
    }
    document.addEventListener('click', el._clickOutside)
  },
  unmounted(el) {
    document.removeEventListener('click', el._clickOutside)
  }
})
```

使用示例：

```vue
<template>
  <div v-click-outside="closeDropdown" class="dropdown">
    
  </div>
</template>

#### 延迟加载指令

```javascript
app.directive('lazy', {
  mounted(el, binding) {
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          el.src = binding.value
          observer.unobserve(el)
        }
      })
    })
    observer.observe(el)
  }
})
```

使用示例：

```vue
<template>
  <img v-lazy="imageUrl" />
</template>

## 最佳实践

### 1. 指令命名

```javascript
// 推荐的命名方式
app.directive('my-directive', {
  /* ... */
})

// 在模板中使用
<div v-my-directive></div>
```

### 2. 参数传递

```vue
<template>
  <div>
    
    <div v-tooltip="{
      text: 'Tooltip text',
      position: 'top',
      delay: 200
    }">Hover me</div>
  </div>
</template>
```

### 3. 动态指令参数

```vue
<template>
  <div>
    <button v-[direction]="handler">Click me</button>
  </div>
</template>

const direction = ref('click')
const handler = () => {
  console.log('Button clicked')
}
</script>
```

## 总结

本文详细介绍了Vue3指令系统的使用方法：

1. 内置指令
   - v-bind：属性绑定
   - v-on：事件处理
   - v-model：双向绑定
   - v-if/v-else/v-else-if：条件渲染
   - v-show：显示切换
   - v-for：列表渲染

2. 自定义指令
   - 基础用法
   - 全局注册
   - 钩子函数
   - 实用示例

3. 最佳实践
   - 指令命名规范
   - 参数传递方式
   - 动态指令使用

通过合理使用Vue3的指令系统，可以大大提高开发效率和代码可维护性。建议在实际开发中根据具体需求选择合适的指令，并遵循最佳实践来编写高质量的代码。

元素码农