Vue 基础语法与响应式原理笔记

2.3 template 和 el

template 里只能有一个根元素，编译后会替换挂载点。el 的作用和 $mount() 很接近，都是把实例挂到某个容器上。

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

3. 常用语法和指令

3.1 插值语法 {{ }}

插值里可以放 data 中声明的变量，也可以放合法的 JavaScript 表达式。Vue 会在模板上下文里执行这些表达式，常见的全局对象比如 Math、Date 也能用。

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

3.2 v- 开头的指令

指令本质上就是给 HTML 属性加一层 Vue 的行为。表达式变了，DOM 也会跟着变。

3.2.1 v-once

只渲染一次。后面即使数据变了，这块内容也不会再更新。

3.2.2 条件渲染

• v-if：控制元素是否真正创建或销毁，切换不频繁时更合适。
• v-show：只切换 display，元素始终在 DOM 里，频繁显示隐藏时更省事。

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

3.2.3 v-bind

用来绑定属性，简写是 :。很多动态属性都靠它。

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

属性里不能再直接写插值了，这个点容易忘，改成 v-bind 或 : 就行。

3.2.4 v-model

v-model 主要给表单用，做的是双向绑定。它可以看成 v-bind:value 和 v-on:input 的组合。

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

3.2.5 v-on

v-on 用来绑定事件，简写是 @。回调函数通常放在 methods 里。

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

常用事件修饰符有这些：

• .stop：阻止冒泡。
• .prevent：阻止默认行为。
• .capture：使用捕获阶段。
• .self：只在事件源是当前元素时触发。
• .once：只执行一次。

按键修饰符里，.enter、.tab、.delete、.esc、.space 都挺常见。

3.2.6 v-for

v-for 用来遍历数组、对象或字符串。实际项目里我一般都会给它配 :key，别偷懒用 index，尤其是列表会增删重排的时候，后面调试会舒服很多。

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

3.2.7 其他常见指令

• v-text：更新文本内容，不解析 HTML。
• v-html：把内容当 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 2 里，响应式主要靠 Object.defineProperty。实例上的属性并不是凭空出现的，它们其实是代理到了 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：销毁阶段，适合清理定时器和事件监听。

这些钩子不需要背得特别死，但开发时最好知道数据、DOM、组件实例分别在哪个阶段可用，不然很容易把逻辑塞错地方。

9. 绑定的进阶写法

9.1 Class 绑定

class 支持字符串、数组、对象三种写法，够灵活，也够绕。实际开发里我更常用数组加对象，状态切换会清楚一点。

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

9.2 Style 绑定

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 的价值不在语法花样多，而在于它把数据、模板和交互这三件事串得很顺。先把指令、计算属性、监听属性和生命周期这些基础吃透，再去看响应式原理，很多设计选择会一下子变得合理。要是真上手做项目，computed 和 watch 的边界、v-if 和 v-show 的取舍、v-for 的 key 怎么选，往往比记语法更影响代码质量。