Vue3 Composition API高级特性及自定义指令详解

Vue3中的高级特性补充主要围绕Composition API展开，这是一个重要的知识点，它提供了更加模块化和可复用的编程模式。Composition API的核心是`setup`函数，它是一个轻量级的选项，使得开发者能够更好地组织和管理组件内部的逻辑。 1. **Composition API的`setup`函数**: - `setup`函数是Vue3中新引入的，它替代了传统的`data`和`methods`，允许你在组件中设置初始状态和计算属性，并且这些状态是响应式的，无需手动声明`data`。 - 在`setup`函数中，数据的变化会自动触发视图更新，这得益于Vue的响应式系统。但需要注意的是，`setup`中禁止直接使用`this`，因为它不再是常规意义上的上下文，而是`ref`或`reactive`返回的对象。 2. **Reactive知识点**: - `reactive`是Vue提供的一种创建响应式对象的方式，它可以监控对象的变化并自动更新视图。在`setup`中，我们可以利用`reactive`来声明响应式数据，例如： ``` const state = reactive({ count: 0 }); ``` 3. **自定义指令**: - Vue允许开发者扩展其功能，通过自定义指令来实现特定的DOM操作，如动态绑定行为。自定义指令分为局部和全局两种： - 局部指令（`directives`选项）：仅在当前组件内生效，如`v-focus`示例，通过`directives`对象定义。 - 全局指令：通过`app.directive`方法定义，可以在所有组件中使用，如自定义聚焦指令。 实现方式包括： - 默认实现：通过修改DOM属性实现聚焦。 - 局部自定义指令：在组件选项中定义`directives`对象，执行聚焦操作。 - 全局自定义指令：定义一个带有生命周期钩子的函数，以便在组件挂载时执行特定操作。 4. **指令生命周期钩子**: - Vue为自定义指令提供了一系列生命周期函数，包括但不限于： - `created`: 绑定元素属性或事件监听器前调用。 - `beforeMount`: 组件初次绑定时调用，但在此之前未挂载到DOM。 - `mounted`: 组件挂载后调用，此时可以访问DOM元素。 - `beforeUpdate`: 更新组件之前调用。 - `updated`: 组件及子组件更新后调用。 - `beforeUnmount`: 组件卸载前调用。 - `unmounted`: 组件完全卸载后调用，仅执行一次。 5. **指令参数和修饰符**: - 如果指令需要接受参数或使用修饰符，可以在指令定义时指定，例如： ``` app.directive('v-focus', { created: function (el, binding, vnode) { if (binding.value.info === 'paramValue' && binding.modifiers.aaaBbb) { // 指令逻辑 } } }); ``` Vue3的Composition API和自定义指令是提升组件开发效率和代码复用的关键技术。理解并熟练运用它们，可以让你构建更高效、可维护的前端应用。