Vue 指令和响应式系统

一、指令

1. 什么是指令？

指令是特殊的属性，用于在模板中对 DOM 进行操作。指令的前缀是 v-，后面跟随具体的指令名称。Vue 内置了一些常用的指令，如 v-if、v-for、v-bind、v-on 等。

2. 常用指令

• v-if：条件渲染，只有条件为真时才渲染该元素。

  <p v-if="isVisible">我是可见的</p>
  

• v-else 和 v-else-if：与 v-if 配合使用，构成条件分支。

  <p v-if="isVisible">可见</p>
  <p v-else>不可见</p>
  

• v-for：循环渲染列表。

  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
  

• v-bind：动态绑定属性，可以简写为 :。

  <img v-bind:src="imageUrl" />
  

• v-on：监听事件，可以简写为 @。

  <button v-on:click="handleClick">点击我</button>
  

• v-model：用于表单元素的双向数据绑定。

  <input v-model="inputValue" />
  

二、响应式系统

1. 什么是响应式？

响应式是 Vue 的核心特性之一，意味着当数据发生变化时，视图会自动更新。Vue 使用了一种基于观察者模式的响应式系统来实现这一点。

2. 响应式的实现

在 Vue 中，响应式数据通常定义在组件的 data 函数中。Vue 会通过 Object.defineProperty 或 Proxy（在 Vue 3 中）来劫持数据的 getter 和 setter 方法。

• 数据劫持：当数据被读取时，Vue 会在内部记录依赖，当数据被修改时，Vue 会通知这些依赖进行更新。

3. 深度响应式

Vue 可以响应式地处理嵌套对象和数组。对于数组的变更，Vue 提供了变更数组的方法（如 push、pop、splice 等）来确保这些变更是响应式的。

4. 计算属性与侦听器

• 计算属性：可以基于响应式数据计算派生状态。计算属性是基于依赖的缓存，只有在依赖变化时才会重新计算。

  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
  

• 侦听器：用于观察数据变化并执行副作用。侦听器在数据变化时触发，可以接收新值和旧值。

  watch: {
    message(newValue, oldValue) {
      console.log(`Message changed from ${oldValue} to ${newValue}`);
    }
  }
  

总结

指令用于操作 DOM，而响应式系统用于管理数据的变化与更新。它们共同构成了 Vue 的核心特性，使得开发者可以轻松地创建动态和交互性强的应用。