Vue 核心语法与原理实战指南

1. Vue 简介与 MVVM 架构

Vue 的核心设计理念是数据驱动视图。通过单向或双向数据绑定，当页面数据发生变化时，视图会自动重新渲染，开发者无需手动操作 DOM。

1.1 数据绑定模式

单向数据绑定：数据流向是从 Model 到 View。当数据变化时，页面自动更新。
双向数据绑定：在表单交互中，用户输入的内容会自动同步到数据源，反之亦然。

1.2 MVVM 分层思想

MVVM 将应用分为三个部分：

Model（模型）：数据层。
View（视图）：UI 层。
ViewModel（视图模型）：连接 Model 和 View 的桥梁。

VM 负责处理脏活累活。当 Model 改变时，VM 自动更新 View；当 View 改动时，VM 自动更新 Model。这极大地提高了开发效率，减少了冗余的 DOM 操作代码。

<!-- 准备容器 -->
<div id="app">
  姓名：<input type="text" v-model="name">
</div>

<script>
  const vm = new Vue({
    el: '#app',
    data: {
      name: 'zhangsan'
    }
  })
</script>

2. 第一个 Vue 程序

引入 Vue.js 后，它会被注册为全局变量。首先需要 new 一个 Vue 实例。

2.1 实例配置项 (options)

Vue 实例接收一个配置对象，其中包含各种选项。例如 template、data、el 等。

const myVue = new Vue({
  template: '<h1>Hello World!</h1>'
})
myVue.$mount('#app') // 手动挂载实例

2.2 模板挂载

$mount() 方法：将编译后的 HTML 渲染到指定位置。注意：指定位置的元素会被替换。
el 配置项：直接指定 Vue 实例关联的容器 ID 或选择器，效果等同于 $mount()。

2.3 数据来源：data

data 选项提供模板语句的数据支持。它可以是对象或函数。如果是对象，必须是纯粹的对象（Key/Value 对）。数据通过插值语法 {{ }} 插入模板。

new Vue({
  template: `<h1>{{ name }} 开始学 Vue!! {{ lead.age }} 岁的 {{ lead.name }} 也在学习!!</h1>`,
  data: {
    name: '张三',
    releaseTime: '2025 年 8 月 2 日',
    lead: { name: '高齐强', age: 40 },
    classmates: [
      { name: '李四', age: 18 },
      { name: '王五', age: 80 }
    ]
  }
}).$mount('#app')

注意：只要 data 中的数据发生变化，模板语句一定会重新编译并渲染。建议将多行模板代码写在反引号 ` 中，避免使用字符串拼接。

3. Vue 核心语法

3.1 插值表达式

在 {{ }} 中可以写合法的 JavaScript 表达式，包括变量、常量、三元运算符等。但表达式被放在沙盒中运行，只能访问全局变量的白名单（如 Math, Date 等）。

<h1>{{ msg }}</h1>
<h1>{{ sayHello() }}</h1>
<h1>{{ gender ? '男' : '女' }}</h1>
<h1>{{ Date.now() }}</h1>

3.2 指令系统

指令以 v- 开头，用于响应式地作用于 DOM。它们通常作为 HTML 属性存在。

3.2.1 条件渲染

v-if：动态创建或移除 DOM 元素。适合不频繁切换的场景。
v-show：通过 CSS display 控制显示隐藏。适合频繁切换的场景。
v-else / v-else-if：配合 v-if 使用，中间不能断开。

<div v-if="a <= b">测试通过</div>
<div v-show="false">你可以看到我吗？</div>
<span v-if="temp <= 10">寒冷</span>
<span v-else-if="temp <= 25">凉爽</span>
<span v-else>炎热</span>

3.2.2 属性绑定：v-bind

用于动态设置 HTML 属性。简写形式为冒号 :。

<img :src="imgPath">
<input :value="username">
<a :href="url">链接</a>

提示：标签体内的内容动态用插值 {{ }}，标签属性的动态用指令 :。

3.2.3 双向绑定：v-model

主要用于表单元素（input, select, textarea），实现数据的双向绑定。

<!-- 简写 -->
<input type="text" v-model="name">
<!-- 等价于 -->
<input type="text" :value="name" @input="name = $event.target.value">

3.2.4 列表渲染：v-for

遍历数组、对象或字符串。建议使用唯一标识（如 id）作为 key，而非索引 index，以避免更新时的性能问题和状态错乱。

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

3.2.5 其他指令

v-text：更新元素的文本内容，覆盖原有内容。
v-html：解析并渲染 HTML 内容（注意 XSS 风险）。
v-cloak：防止闪烁，加载完成后移除。
v-pre：跳过编译，提高性能。
自定义指令：可通过 directives 选项定义局部或全局指令。

4. 事件处理

使用 v-on 或 @ 绑定事件回调。回调函数需定义在 methods 选项中。

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

methods: {
  sayHi(event, name) {
    console.log(name, event)
  }
}

4.1 事件修饰符

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

4.2 按键修饰符

支持 .enter, .tab, .delete, .esc 等常用键名，也可自定义键码映射。

5. 计算属性与侦听器

5.1 计算属性 (computed)

计算属性本质是属性，具有缓存机制。只有依赖的数据变化时才会重新计算。

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

5.2 侦听器 (watch)

适用于监听数据变化并执行异步操作或开销较大的操作。支持深度监听 (deep) 和立即执行 (immediate)。

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

6. 样式绑定

6.1 Class 绑定

字符串：<div :class="c1"></div>
数组：<div :class="[c1, c2]"></div>
对象：<div :class="{active: isActive}"></div>

6.2 Style 绑定

支持对象形式（驼峰命名）和数组形式。

<div :style="{ backgroundColor: 'gray' }"></div>
<div :style="styleArray"></div>

7. 表单数据收集

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

<form @submit.prevent="send">
  <input v-model.trim="user.username">
  <input type="number" v-model.number="user.age">
  <select v-model="user.grade">
    <option value="zk">专科</option>
    <option value="bk">本科</option>
  </select>
  <textarea v-model.lazy="user.introduce"></textarea>
  <button>提交</button>
</form>

8. 响应式原理与数据劫持

Vue 2 使用 Object.defineProperty 实现数据劫持。通过 getter 和 setter 拦截属性的读取和修改，从而触发视图更新。

8.1 数据代理

Vue 实例通过代理机制，使得 vm.msg 实际上访问的是 vm._data.msg。以 _ 或 $ 开头的属性不会被代理，以避免与框架内部属性冲突。

8.2 数组响应式

直接修改数组下标不会触发更新。应使用 Vue 提供的变异方法（push, pop, splice 等）或 Vue.set / this.$set。

// 正确
vm.users.push('newUser')
Vue.set(vm.vips, 0, 'modified')

// 错误
vm.users[0] = 'newName'

9. Vue 生命周期

了解生命周期钩子有助于在合适的时机执行逻辑。

beforeCreate / created：实例创建阶段。created 中可访问数据，常用于 API 请求。
beforeMount / mounted：挂载阶段。mounted 中可操作 DOM，常用于集成第三方库。
beforeUpdate / updated：更新阶段。数据变更导致虚拟 DOM 重新渲染。
beforeDestroy / destroyed：销毁阶段。用于清理定时器、取消订阅等。

export default {
  created() {
    console.log('实例已创建，数据可用')
  },
  mounted() {
    console.log('DOM 已挂载')
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}

10. 总结

Vue 通过简洁的语法和强大的功能简化了前端开发。掌握其核心语法、指令系统及底层原理，能够帮助开发者构建高效、可维护的单页应用。在实际项目中，合理运用计算属性、侦听器和生命周期钩子，能显著提升用户体验和代码质量。