Vue 框架核心语法与原理实战

2.3 Template 配置项

template 只能有一个根元素。编译后会替换挂载位置的元素。el 配置项也可以用来指定关联容器，效果与 $mount() 相同。

new Vue({
  template: `
    <div>
      <h1>{{msg}}</h1>
      <h2>{{name}}</h2>
    </div>
  `,
  data: { msg: "hello world!", name: "明天不学了!" },
  el: '#app'
})

3. Vue 核心语法

3.1 插值 {{ }} 语法

在 data 中声明的变量、函数、常量以及合法的 JavaScript 表达式都可以使用。模板表达式运行在沙盒中，只能访问全局变量的白名单（如 Math, Date 等）。

new Vue({
  el: '#app',
  data: {
    number: 1,
    gender: true,
    sayHello: function () { console.log('hello vue!'); }
  }
})

3.2 Vue 指令

指令以 v- 开头，以 HTML 属性形式存在。当表达式值改变时，响应式地作用于 DOM。

3.2.1 v-once 指令

只渲染元素一次，随后的重新渲染会跳过该元素及其子节点。

3.2.2 条件渲染指令

• v-if：动态创建或移除 DOM 元素。适合频繁切换的场景开销较大。
• v-show：动态添加或移除 CSS 样式控制显示隐藏。适合频繁显示隐藏的场景。

<div v-if="a <= b">测试内容</div>
<div v-show="false">隐藏内容</div>

3.2.3 v-bind 属性绑定指令

用于让 HTML 标签的属性产生动态效果。简写方式为 :。

<img :src="imgPath">
<input :value="username">

注意：属性内部插值语法已被移除，请使用 v-bind 或冒号速记。

3.2.4 v-model 指令

实现双向数据绑定，主要用于表单类元素（input, select, textarea）。本质上是 v-bind:value 和 v-on:input 的语法糖。

<!-- 单向 -->
<input type="text" :value="name1">
<!-- 双向 -->
<input type="text" v-model="name2">

3.2.5 事件绑定指令 v-on

用于绑定事件回调。回调函数需在 methods 中定义。简写方式为 @。

<button @click="sayHi($event)">点击</button>

事件修饰符：

• .stop：停止事件冒泡。
• .prevent：阻止默认行为。
• .capture：使用事件捕获模式。
• .self：仅当事件在该元素自身触发时执行。
• .once：事件只触发一次。

按键修饰符： 支持 .enter, .tab, .delete, .esc, .space 等常用键修饰。

3.2.6 v-for 列表渲染指令

用于遍历数组、对象或字符串。建议始终使用 :key 属性来唯一标识节点，避免使用 index 作为 key，以提高虚拟 DOM 的 diff 算法效率。

<ul>
  <li v-for="(vip,index) of vips" :key="vip.id">
    {{ vip.name }}, {{ vip.age }}
  </li>
</ul>

3.2.7 其他指令

• v-text：更新元素的 textContent，不会解析 HTML。
• v-html：更新元素的 innerHTML，会解析 HTML 代码。
• v-cloak：防止未编译的插值表达式闪烁。
• v-pre：跳过编译，直接输出原始内容。

4. 过滤器

过滤器常用于文本格式化，可链式调用。Vue 3 已废弃此功能，但在 Vue 2 中仍广泛使用。

filters: {
  filterA(val) {
    return val === null ? '-' : val
  }
}

5. 计算属性 computed

计算属性是基于它们的依赖进行缓存的。只有当依赖发生变化时才会重新求值。适用于复杂的逻辑运算，比 methods 性能更好。

computed: {
  reversedInfo() {
    return this.info.split('').reverse().join('')
  }
}

6. 监视属性 watch

watch 用于监听数据变化并执行副作用操作。可以深度监听对象属性（需设置 deep: true）。

watch: {
  number(newValue, oldValue) {
    console.log('number changed')
  },
  a: {
    deep: true,
    handler(newValue, oldValue) {}
  }
}

7. 数据代理与响应式原理

Vue 通过 Object.defineProperty 实现数据劫持。Vue 实例上的属性实际上是代理了 data 对象中的属性。以 _ 或 $ 开头的属性不会被代理，以避免与框架内部属性冲突。

// 伪代码示例
Object.defineProperty(this, propertyName, {
  get() { return options.data[propertyName] },
  set(val) { options.data[propertyName] = val }
})

8. 生命周期钩子

Vue 实例在其生命周期中会调用一系列钩子函数：

• beforeCreate / created：实例创建阶段，created 时可访问 data 和 methods。
• beforeMount / mounted：挂载阶段，mounted 后可操作 DOM。
• beforeUpdate / updated：更新阶段，updated 后 DOM 已更新。
• beforeDestroy / destroyed：销毁阶段，清理定时器和事件监听。

9. 数据绑定进阶

9.1 Class 绑定

支持字符串、数组、对象三种形式，灵活控制样式类名。

<div :class="['active', { 'text-danger': isDanger }]">内容</div>

9.2 Style 绑定

支持字符串、对象、数组形式绑定内联样式。

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">内容</div>

9.3 表单数据收集

结合 v-model 和修饰符（.trim, .number, .lazy）高效收集表单数据。

<input type="text" v-model.trim="user.username">
<input type="number" v-model.number="user.age">

10. 总结

Vue 通过简洁的语法和强大的响应式系统，让前端开发更加高效。掌握其核心语法、指令系统及底层原理，是构建高质量单页应用的基础。在实际项目中，合理使用计算属性、侦听器及生命周期钩子，能显著提升应用性能和用户体验。