Vue模板语法与常用指令深度解析

Vue模板语法与常用指令深度解析

一、Vue模板语法基础

1.1 插值语法

• 文本插值：{{ }}
• 原始HTML：v-html
• 属性绑定：v-bind（简写:）

<div id="app">
  <p>{{ message }}</p>
  <div v-html="rawHtml"></div>
  <img :src="imageSrc">
</div>

1.2 JavaScript表达式

• 支持单一表达式
• 限制：不能使用语句和流程控制

<p>{{ number + 1 }}</p>
<p>{{ ok ? 'YES' : 'NO' }}</p>

二、核心指令深度解析

2.1 条件渲染：v-if 家族指令

2.1.1 基础用法与原理

v-if指令根据表达式的真假值条件性地渲染元素，通过直接操作DOM树实现：

<div v-if="isLoggedIn">欢迎回来！</div>
<div v-else>请先登录</div>

实现原理：

1. 编译阶段：将模板转换为渲染函数
2. 运行时：根据条件值创建/销毁虚拟DOM节点
3. 对比差异：通过patch算法更新真实DOM

2.1.2 v-if vs v-show 深度对比

2.1.3 高级用法模式

1. 复合条件判断：

<template v-if="userType === 'admin'">
  <AdminPanel />
  <AuditLog />
</template>

2. 多分支条件：

<div v-if="status === 'loading'">加载中...</div>
<div v-else-if="status === 'error'">错误提示</div>
<div v-else>正常内容</div>

3. 组件缓存策略：

<keep-alive>
  <component :is="currentComponent" v-if="showComponent"></component>
</keep-alive>

2.1.4 性能优化指南

1. 避免深层嵌套条件
2. 合理使用标签分组
3. 复杂条件使用计算属性：

computed: {
  shouldShow() {
    return this.user.role === 'admin' && 
           this.env === 'production' &&
           Date.now() > this.expireTime
  }
}

2.2 列表渲染：v-for 指令全解

2.2.1 基础语法演进

<!-- 数组迭代 -->
<li v-for="(item, index) in items" :key="item.id">
  {{ index }}: {{ item.text }}
</li>

<!-- 对象迭代 -->
<div v-for="(value, key, index) in obj">
  {{ index }}. {{ key }}: {{ value }}
</li>

<!-- 范围迭代 -->
<span v-for="n in 10">{{ n }}</span>

2.2.2 Key的重要性与原理

为什么需要key？

• 虚拟DOM Diff算法优化
• 维持组件状态稳定性
• 正确识别元素位置变化

错误示例分析：

<!-- 反模式：使用索引作为key -->
<li v-for="(item, index) in items" :key="index">

正确实践：

<li v-for="item in items" :key="item.id">

2.2.3 数组更新检测机制

响应式更新原理：

// Vue对数组方法的劫持
const arrayProto = Array.prototype
const arrayMethods = Object.create(arrayProto)

const methodsToPatch = [
  'push', 'pop', 'shift', 'unshift',
  'splice', 'sort', 'reverse'
]

methodsToPatch.forEach(method => {
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator(...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    ob.dep.notify()
    return result
  })
})

特殊情况处理：

// 直接设置索引值
Vue.set(vm.items, indexOfItem, newValue)
// 或
vm.items.splice(indexOfItem, 1, newValue)

// 修改数组长度
vm.items.splice(newLength)

2.2.4 性能优化策略

1. 虚拟滚动实现大数据列表：

<virtual-scroll :items="largeList" :item-size="50">
  <template v-slot="{ item }">
    <div class="item">{{ item.content }}</div>
  </template>
</virtual-scroll>

2. 避免不必要的重新渲染：

// 使用Object.freeze
export default {
  data() {
    return {
      bigList: Object.freeze(hugeArray)
    }
  }
}

3. 分页渲染策略：

computed: {
  paginatedData() {
    const start = (this.currentPage - 1) * this.pageSize
    return this.allData.slice(start, start + this.pageSize)
  }
}

2.2.5 多维数组处理

嵌套列表渲染示例：

<ul v-for="category in categories" :key="category.id">
  <li>{{ category.name }}</li>
  <ul>
    <li v-for="product in category.products" 
        :key="product.id">
      {{ product.name }} - \${{ product.price }}
    </li>
  </ul>
</ul>

2.2.6 与v-if的联合使用

正确做法：

<template v-for="item in items">
  <div v-if="item.isValid" :key="item.id">
    {{ item.content }}
  </div>
</template>

错误模式分析：

<!-- 反模式：v-for与v-if同元素 -->
<div v-for="item in items" v-if="item.valid"></div>

问题原因：v-for的优先级高于v-if，导致不必要的循环计算

2.3 属性绑定：v-bind 高级技巧

2.3.1 动态属性绑定模式

<!-- 动态属性名 -->
<div :[dynamicAttr]="value"></div>

<!-- 多属性绑定 -->
<div v-bind="{ id: containerId, 'data-type': type }"></div>

<!-- 继承属性 -->
<child-component v-bind="$props"></child-component>

2.3.2 样式绑定深度解析

对象语法：

<div :class="{ active: isActive, 'text-danger': hasError }"></div>

数组语法：

<div :class="[baseClass, isActive ? activeClass : '']"></div>

样式自动前缀处理：

<div :style="{ transform: rotateValue }"></div>
<!-- 编译后 -->
<div style="transform: rotate(45deg); -webkit-transform: rotate(45deg);"></div>

2.3.3 属性合并策略

原生属性与绑定属性合并示例：

<input class="base-class" :class="dynamicClass">
<!-- 合并结果 -->
<input class="base-class dynamic-class">

特殊属性处理：

<!-- 布尔属性 -->
<button :disabled="isDisabled">Submit</button>

<!-- 枚举属性 -->
<svg :viewBox.camel="viewBox"></svg>

2.3.4 高级应用场景

1. 动态组件属性传递：

<component :is="currentComponent" v-bind="componentProps"></component>

2. 图片资源动态加载：

computed: {
  imgSrc() {
    return require(`@/assets/${this.imgName}.png`)
  }
}

2.4 双向绑定：v-model 全解析

2.4.1 实现原理剖析

语法糖本质：

<input 
  :value="searchText"
  @input="searchText = $event.target.value"
>
<!-- 等价于 -->
<input v-model="searchText">

2.4.2 表单元素扩展

多选框：

<input type="checkbox" v-model="toggle" true-value="yes" false-value="no">

单选按钮组：

<input type="radio" v-model="picked" value="a">
<input type="radio" v-model="picked" value="b">

选择列表：

<select v-model="selected" multiple>
  <option v-for="option in options" :value="option.value">
    {{ option.text }}
  </option>
</select>

2.4.3 自定义组件v-model

Vue2实现：

// 子组件
export default {
  props: ['value'],
  methods: {
    updateValue(newVal) {
      this.$emit('input', newVal)
    }
  }
}

Vue3更新：

// 子组件
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  methods: {
    updateValue(newVal) {
      this.$emit('update:modelValue', newVal)
    }
  }
}

2.4.4 修饰符原理与应用

核心修饰符：

1. .lazy：将input事件改为change事件
2. .number：自动转换为Number类型
3. .trim：自动去除首尾空格

自定义修饰符：

// 自定义capitalize修饰符
app.directive('model', {
  inserted(el, binding, vnode) {
    el.addEventListener('input', e => {
      const modifiers = binding.modifiers
      let value = e.target.value
      if (modifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
      }
      vnode.context[binding.expression] = value
    })
  }
})

2.4.5 复杂数据绑定

对象结构绑定：

<user-form v-model:name="user.name" v-model:email="user.email"></user-form>

多v-model绑定（Vue3）：

<modal-box v-model:visible="showModal" v-model:size="modalSize"></modal-box>

2.4.6 性能优化建议

1. 对大表单使用.lazy修饰符
2. 对数值输入使用.number修饰符
3. 避免在v-model中使用复杂表达式
4. 使用防抖/节流处理高频输入：

<input v-model.debounce.500="searchQuery">

三、其他重要指令

3.1 事件处理：v-on

<button v-on:click="counter += 1">Add 1</button>
<button @click="greet">Greet</button>

3.2 插槽：v-slot

<template v-slot:header>
  <h1>标题内容</h1>
</template>

四、自定义指令开发

4.1 注册全局指令

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

4.2 指令钩子函数

• bind
• inserted
• update
• componentUpdated
• unbind

五、常见问题

避免v-if与v-for共用

<!-- 错误用法 -->
<li v-for="user in users" v-if="user.isActive">
  {{ user.name }}
</li>

<!-- 正确用法 -->
<template v-for="user in users">
  <li v-if="user.isActive">
    {{ user.name }}
  </li>
</template>

六、综合应用示例

<div id="app">
  <form @submit.prevent="addTodo">
    <input 
      v-model.trim="newTodo"
      placeholder="Add new todo"
    >
    <button type="submit">Add</button>
  </form>

  <ul v-if="todos.length">
    <li 
      v-for="(todo, index) in filteredTodos"
      :key="todo.id"
      :class="{ completed: todo.completed }"
    >
      <input 
        type="checkbox" 
        v-model="todo.completed"
      >
      {{ index + 1 }}. {{ todo.text }}
      <button @click="removeTodo(index)">×</button>
    </li>
  </ul>
  <p v-else>No todos found!</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: []
  },
  computed: {
    filteredTodos() {
      return this.todos.filter(todo => !todo.completed)
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo) {
        this.todos.push({
          id: Date.now(),
          text: this.newTodo,
          completed: false
        })
        this.newTodo = ''
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1)
    }
  }
})
</script>