深入探索Vue 3组合式API：提升组件逻辑复用与组织能力

引言

随着Vue 3的发布，其组合式API（Composition API）彻底改变了我们构建和组织Vue应用程序的方式。组合式API提供了更精细的逻辑控制和更好的代码复用性，从根本上增强了Vue组件的设计和开发体验。本文将带领您深入了解Vue 3组合式API的关键概念和技术要点。

一、setup函数

Vue 3 引入了 setup 函数作为其组合式 API 的一部分，这是一个在组件实例创建之前执行的函数，允许你集中定义组件的响应式状态和行为。setup 函数有两个可选参数：props 和 context。
下面是一个简单的 setup 函数示例代码：

<template>
  <div>
    <!-- 在模板中可以直接使用从 setup 返回的对象 -->
    Count: {{ count }}
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  props: {
    initialCount: Number
  },
  
  setup(props) {
    // 创建一个响应式引用（ref），初始值来自父组件传递的prop
    const count = ref(props.initialCount);

    // 定义一个方法，该方法不会绑定到组件实例this上
    function increment() {
      count.value++;
    }

    // 使用组合式API的生命周期钩子
    onMounted(() => {
      console.log('Component is mounted!');
    });

    // 返回用于模板渲染的数据和方法
    return {
      count,
      increment
    };
  }
};
</script>

详细讲解：

1. 响应式状态：使用 ref 或 reactive 创建响应式数据。例如，在上面的代码中，count 是一个响应式引用，它的值可以通过 .value 属性修改，而且在模板中可以直接通过 {{ count }} 访问，无需 .value。
2. 处理 Props：setup 函数接收一个 props 参数，这个参数是一个包含了所有父组件传递过来的 prop 对象。在这里，我们创建了一个名为 count 的 ref，并将其初始值设置为 props.initialCount。
3. 定义方法：在 setup 函数内定义的方法不需要放在 methods 对象中，它们不绑定到组件实例 this 上。这里定义了一个 increment 方法，用于递增 count 的值。
4. 生命周期钩子：组合式 API 提供了 onMounted 等生命周期钩子函数，它们可以直接在 setup 函数中调用。当组件挂载完成后，onMounted 中的回调函数会被执行。
5. 返回值：setup 函数必须返回一个对象，该对象包含要在模板中使用的属性和方法。在此例中，我们返回了 count 和 increment，这样它们就可以在模板中通过 {{ count }} 和 @click="increment" 使用。

二、响应式系统

Vue的响应式系统是其核心特性之一，允许我们在数据模型发生变化时自动更新视图。在Vue 2.x中，Vue利用Object.defineProperty实现数据响应式；而在Vue 3.x中，则改用了ES6 Proxy来实现更全面的代理机制。
以下是Vue 2.x中使用Object.defineProperty实现响应式的简要示例及讲解：

// Vue 2.x 中模拟响应式数据系统简化版
class Observer {
  constructor(value) {
    this.observe(value);
  }

  observe(value) {
    if (typeof value !== 'object' || value === null) {
      return;
    }
    Object.keys(value).forEach(key => {
      this.defineReactive(value, key, value[key]);
    });
  }

  defineReactive(obj, key, val) {
    let dep = new Dep(); // 依赖收集器Dep
    let childOb = observe(val); // 观察嵌套对象

    Object.defineProperty(obj, key, {
      get() {
        Dep.target && dep.addSub(Dep.target); // 收集依赖
        return val;
      },
      set(newVal) {
        if (newVal === val) return;
        val = newVal;
        observe(newVal); // 新值也需要变成响应式
        dep.notify(); // 通知所有订阅者（即Watcher）更新
      }
    });
  }
}

class Dep {
  constructor() {
    this.subs = [];
  }

  addSub(sub) {
    this.subs.push(sub);
  }

  notify() {
    this.subs.forEach(sub => sub.update());
  }
}

class Watcher {
  constructor(vm, key, cb) {
    this.vm = vm;
    this.key = key;
    this.cb = cb;
    Dep.target = this; // 在getter中收集依赖
    this.value = this.get();
    Dep.target = null;
  }

  get() {
    pushTarget(this);
    let value = this.vm[this.key];
    popTarget();
    return value;
  }

  update() {
    this.run();
  }

  run() {
    this.cb.call(this.vm, this.value);
  }
}

function observe(data) {
  return new Observer(data);
}

function Vue(options) {
  this.$data = options.data;
  observe(this.$data);
  // ... 其他初始化逻辑
}

在以上示例中：

1. Observer 类负责将对象的属性转换为 getter/setter，当属性被访问时收集依赖（即Watcher实例），当属性被修改时通知所有依赖。
2. Dep 类代表依赖收集器，用于储存多个订阅者（即Watcher实例），并在数据变化时通知它们。
3. Watcher 类代表观察者，用于在实例化时收集依赖，并在数据变化时执行更新视图的回调函数。
4. observe 函数接受一个数据对象并返回一个Observer实例，开始进行响应式转换。

在Vue 3.x中，响应式系统的实现更为简洁，主要依靠Proxy:

// Vue 3.x 中使用 Proxy 实现响应式数据系统简化版
import { reactive } from 'vue';

let state = reactive({ count: 0 });

// 假设这是我们的组件内部
function handleUpdate() {
  console.log(state.count);
}

// 当state.count变化时，handleUpdate会自动执行
watchEffect(() => {
  handleUpdate();
});

// 更改响应式数据
state.count++;

在Vue 3中，reactive函数会返回一个由Proxy代理后的对象，当尝试访问或修改这个对象的属性时，Vue会自动处理依赖收集和派发更新过程，无需手动定义getter和setter。Vue 3的响应式系统还包含ref用于创建响应式的基本类型值，watch和watchEffect等API用于监听数据变化并执行副作用。

Vue 3.x 中响应式的核心逻辑封装在内部，对外暴露的是易于使用的API接口，开发者无需关注底层复杂的响应式实现细节。

三、依赖注入与提供/注入

Vue.js 提供了一种依赖注入机制，通过 provide 和 inject 选项，允许在一个组件树的祖先组件向其所有子孙组件注入依赖，无论组件层次多么深，只要上下文关系存在，这些依赖就能被注入和使用。

以下是一个Vue 3中 provide 和 inject 的基本示例代码及其详细讲解：

// 父级或祖先组件提供依赖
import { provide, reactive } from 'vue';

export default {
  setup() {
    // 创建一个响应式的对象作为依赖
    const sharedData = reactive({
      message: 'Hello from ancestor',
      count: 0
    });

    // 提供这个依赖，键名可以是字符串或Symbol
    provide('sharedData', sharedData);

    // 或者也可以提供一个工厂函数，动态返回依赖
    provide('messageProvider', () => sharedData.message);

    return {};
  }
};

// 子孙组件注入依赖
import { inject } from 'vue';

export default {
  setup() {
    // 注入依赖
    const providedData = inject('sharedData');
    const message = inject('messageProvider');

    // 如果依赖存在，则可以使用
    if (providedData) {
      console.log(providedData.message); // 输出: Hello from ancestor
      providedData.count++; // 修改注入的响应式数据
    }

    if (message) {
      console.log(message); // 输出: Hello from ancestor
    }

    return {};
  }
};

详细讲解：

1. provide： 在祖先组件中，通过 provide 函数注册一个依赖，它可以接受两个参数：一个是键名，用于标识依赖；另一个是要提供的值，可以是任意类型的值，甚至是响应式对象或一个返回值的工厂函数。
2. inject： 在子孙组件中，通过 inject 函数注入对应的依赖。如果键名对应的依赖存在，则会返回那个值。如果依赖不存在或祖先组件未提供该依赖，inject 将返回 undefined。因此通常会先检查返回值是否存在再使用。
3. 响应式性： 注入的响应式对象（如使用 reactive 创建的对象）在注入后仍然保持响应式。这意味着如果祖先组件更改了提供的响应式数据，那么所有注入了该数据的子孙组件都会相应地更新。

四、副作用管理

在Vue中，副作用是指那些需要根据外部因素（如响应式数据的变化）触发的行为或动作，例如：监听数据变化以执行某些任务、更新DOM、发送网络请求等。Vue 3.x 的组合式API提供了watch和watchEffect两个核心API来进行副作用管理。

1. watch
watch用于监听特定响应式数据的变化，并在数据变化时执行回调函数。下面是一个使用watch的例子：

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
  // 执行一些副作用操作，例如发送API请求、更新其他状态等
});

// 改变count值会触发watch的回调
count.value++;

详细讲解：

• watch接收两个参数，第一个参数是要监听的响应式值或计算属性（可以是ref、reactive对象的属性或者是computed的结果），第二个参数是回调函数。
• 回调函数会在监听的值发生变化时被调用，它会接收到新的值和旧的值作为参数。
• 如果你需要深度监听对象或数组的变化，可以为watch添加第三个参数，配置对象，如 { deep: true }。

2. watchEffect
watchEffect则是立即执行并且持续监听其内部依赖变化的函数。每当其依赖的响应式值发生变化时，它都会重新执行。

import { ref, watchEffect } from 'vue';

const count = ref(0);
const message = ref('Initial Message');

watchEffect(() => {
  console.log(`Count is ${count.value}, and message is ${message.value}`);
  // 根据count和message的值执行一些副作用操作
});

// 改变count或message值都会触发watchEffect的再次执行
count.value++;
message.value = 'Updated Message';

详细讲解：

• watchEffect不需指定要监听的具体值，它会自动追踪其内部表达式所涉及的所有响应式依赖。
• 当调用watchEffect时，它会立刻执行一次，并记录下内部依赖的快照，此后每当依赖项变化时，它会再次执行。
• 若想停止监听，可以返回一个清理函数，例如在组件卸载时清理副作用。

五、生命周期钩子

在Vue.js中，生命周期钩子是一系列预定义的函数，它们会在Vue实例的生命周期的不同阶段被自动调用。在Vue 2.x版本中，生命周期钩子包括多个不同的阶段，而在Vue 3.x中，虽然仍保留了一些类似的钩子函数，但它们是通过组合式API的形式提供的。以下分别给出Vue 2.x和Vue 3.x的生命周期钩子示例代码及详细讲解：

Vue 2.x 生命周期钩子示例：

export default {
  data() {
    return {
      message: 'Hello Vue Lifecycle!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: 初始化之前，数据观测和事件配置尚未生效');
  },
  created() {
    console.log('created: 数据绑定已完成，但DOM还未生成，$el尚不可见');
  },
  beforeMount() {
    console.log('beforeMount: 模板编译/挂载之前，$el已插入文档，但还是旧的HTML');
  },
  mounted() {
    console.log('mounted: DOM渲染完成，$el可见并可操作');
  },
  beforeUpdate() {
    console.log('beforeUpdate: 数据更新时，虚拟DOM重新渲染之前');
  },
  updated() {
    console.log('updated: 数据更新完成，DOM已重新渲染');
  },
  beforeDestroy() {
    console.log('beforeDestroy: 实例销毁前，仍完全可用');
  },
  destroyed() {
    console.log('destroyed: 实例销毁后，所有绑定解除，DOM移除');
  }
};

Vue 3.x 组合式API中的生命周期钩子示例：

import { ref, onMounted, onBeforeUnmount, onUpdated } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue Lifecycle in Composition API!');

    // 相当于Vue 2.x的created钩子
    onMounted(() => {
      console.log('mounted: DOM已渲染完成，组件已挂载');
    });

    // 相当于Vue 2.x的beforeDestroy钩子
    onBeforeUnmount(() => {
      console.log('beforeUnmount: 组件即将销毁，资源清理工作');
    });

    // 相当于Vue 2.x的updated钩子
    onUpdated(() => {
      console.log('updated: 数据更新完成，DOM已重新渲染');
    });

    return {
      message
    };
  }
};

详细讲解：

• beforeCreate：在实例初始化之后，数据观测和事件配置之前调用。此时数据和方法都没有初始化。
• created：在实例创建完成后调用。此时，所有的数据观测、属性和方法都已绑定，但DOM还未生成，$el属性还不可用。
• beforeMount：在挂载开始之前调用，此时模板已被编译成虚拟DOM，但尚未挂载到真正的DOM元素上。
• mounted：在挂载完成后调用，此时实例已经挂载到DOM中，所有数据绑定和指令都已经生效，可以访问到DOM元素。
• beforeUpdate：在数据发生变化时，虚拟DOM重新渲染之前调用。
• updated：在数据变化引起虚拟DOM重新渲染和打补丁之后调用。
• beforeUnmount：在实例销毁之前调用，此时实例还在内存中，可以做一些清理工作，比如取消计时器、清除事件监听器等。
• destroyed：在实例销毁完成后调用，所有绑定解除，所有子组件也都已经被销毁。

在Vue 3.x的组合式API中，生命周期钩子通过单独的函数调用，而不是作为组件选项的一部分，这使得逻辑更容易解耦和复用。同时，Vue 3还提供了更多的生命周期钩子，如onRenderTracked和onRenderTriggered用于调试和优化响应式性能。

六、只读代理

在Vue 3中，为了保护响应式数据不被意外修改，你可以使用readonly函数来创建一个只读的响应式代理。这个代理对象的属性只能读取，不能直接修改。

以下是一个Vue 3中使用readonly函数创建只读响应式对象的示例代码及其详细讲解：

import { reactive, readonly } from 'vue';

// 创建一个普通的响应式对象
const originalState = reactive({
  message: 'Hello, world!',
  count: 0
});

// 创建一个基于originalState的只读代理
const readOnlyState = readonly(originalState);

// 尝试修改只读代理的属性值
try {
  readOnlyState.message = 'Modified message'; // 这里将会抛出错误，因为readOnlyState是只读的
} catch (error) {
  console.error(error);
}

console.log(readOnlyState.message); // 输出："Hello, world!"

详细讲解：

1. 首先，我们导入了reactive和readonly这两个Vue 3的响应式API函数。reactive用于创建一个响应式对象，而readonly则用于创建一个基于原响应式对象的只读代理。
2. 我们创建了一个名为originalState的响应式对象，其中包含两个属性：message和count。
3. 接下来，我们使用readonly函数创建一个基于originalState的新对象readOnlyState。这个新的代理对象拥有与原对象相同的属性和值，但是其属性是只读的，无法直接赋值。
4. 当尝试修改readOnlyState的属性时，由于它是只读的，所以会抛出错误。在严格模式下，这会导致运行时错误，而在非严格模式下，Vue可能会选择忽略无效的写操作，但仍推荐避免对只读对象进行写入。
5. 最后，我们仍然可以正常读取readOnlyState的属性值，只是不能对其进行修改。

七、其他辅助工具

Vue.js 提供了一系列辅助工具来帮助开发者更好地构建应用程序。这里列举几个常见的辅助工具，并给出示例代码和详细讲解：

1. v-bind（简写：:）和 v-on（简写：@）

• v-bind 用于动态绑定一个或多个属性到元素上，简写形式是 :。

<!-- 绑定一个属性 -->
<a v-bind:href="url">Link</a>

<!-- 简写形式 -->
<a :href="url">Link</a>

<!-- 绑定一个对象 -->
<div v-bind="{ id: someId, 'data-name': someName }"></div>

• v-on 用于监听并处理DOM事件，简写形式是 @。

<!-- 监听点击事件 -->
<button v-on:click="handleClick">Click me</button>

<!-- 简写形式 -->
<button @click="handleClick">Click me</button>

2. v-if 和 v-show
 

v-if 和 v-show 都是用来条件性地渲染元素的，区别在于：

• v-if 是“真正”的条件渲染，因为它会确保在条件为 false 的时候不渲染任何元素，条件切换过程中会有销毁和重建的过程。
• v-show 则始终渲染元素，仅改变CSS的display属性来控制元素是否可见。

<!-- v-if 示例 -->
<p v-if="isVisible">This paragraph will be shown when isVisible is truthy.</p>

<!-- v-show 示例 -->
<p v-show="isVisible" style="display:none;">This paragraph will have its display toggled based on isVisible.</p>

3. v-for

v-for 用于循环遍历数组或对象来渲染列表。

<!-- 遍历数组 -->
<ul>
  <li v-for="(item, index) in items" :key="item.id">
    {{ item.name }} - Index: {{ index }}
  </li>
</ul>

<!-- 遍历对象 -->
<ul>
  <li v-for="(value, key) in object" :key="key">
    Key: {{ key }} - Value: {{ value }}
  </li>
</ul>

4. v-model

v-model 是双向数据绑定指令，用于表单输入控件和Vue实例数据之间的同步。

<input type="text" v-model="inputValue">

<!-- 输入框的值会实时反映到 inputValue 变量上 -->
<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>

5. computed

computed 是Vue提供的计算属性，它能基于其依赖的响应式属性计算并返回一个新的值。

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName: function() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
}

在模板中可以像普通数据一样使用计算属性：

<p>Full Name: {{ fullName }}</p>

6. mixins

mixins 是Vue的一个特性，用于在多个组件之间复用一组相关的选项（如 methods、data、生命周期钩子等）。

// mixins.js 文件
export default {
  methods: {
    logInfo() {
      console.log('Logging info from mixin');
    }
  }
}

// MyComponent.vue 文件
import Mixin from './mixins.js';

export default {
  mixins: [Mixin],
  mounted() {
    this.logInfo(); // 这个方法来自于mixin
  }
}

总结

Vue 3的组合式API让我们能够在组件内部或者跨组件之间更高效地组织和复用逻辑，使得大型项目能保持良好的架构和易于维护。通过熟练掌握这一系列新特性，开发者能够充分发挥Vue 3的优势，编写出更具扩展性与灵活性的现代Web应用程序。