第6章 逻辑复用

第6章

逻辑复用6.1.1

组合式函数概念1无状态逻辑有状态逻辑接收输入后立即返回输出,不涉及内部状态管理示例:日期格式化函数formatDate(date)管理随时间变化的数据状态,涉及响应式状态和生命周期示例:跟踪鼠标位置useMouse()特点:需要响应式系统支持,可跨组件复用特点:纯函数,可测试性强组合式函数=基于组合式API封装有状态逻辑的函数,命名以use开头6.1.2

使用ref封装响应式状态步骤2步骤3步骤4步骤1定义状态:使用ref()创建响应式变量编写更新逻辑:绑定生命周期:暴露状态:返回普通对象x,y{x,y}x,y组件解构后仍保持响应性定义update(event)函数,通过event.pageX/pageY更新坐标onMounted中添加mousemove监听onUnmounted中移除监听X、y,初始值为0返回非响应式对象而非响应式对象,避免解构丢失响应性连接6.2.1

插件的概念插件vs组合式函数插件应用场景插件=应用级/组合式函数=组件级添加全局方法或属性注册全局组件或指令集成第三方服务提供应用级功能状态范围插件=一次性全局注册/组合式函数=按需在组件中使用复用粒度插件=全局共享功能/组合式函数=组件内响应式逻辑使用场景插件=包含install()方法的对象,或直接是一个安装函数6.2.2

定义插件注册全局组件注册全局指app.directive()注册自定义指令,如ponent()注册可在任意组件中直接使用的组件v-auto-greet依赖注入全局方法/属性app.config.globalPropertiesvide()注入状态和方法,组件通过inject()获取添加全局方法install(app,options)接收应用实例和可选配置选项6.2.3

注册插件注册插件调用app.use(plugin,options)安装插件第一个参数为插件对象,第二个参数为配置选项自动阻止多次注册相同插件示例:app.use(greetingPlugin,(gretings:()全局组件全局指令inject注入v-auto-greet:evening按钮点击问候,支持传参inject("greeting")获取状态和方法,灵活调用模板中直接使用,无需导入根据插件功能灵活选择一种或多种使用方式6.3.1

混入的概念混入定义混入对象可包含任意组件选项组件使用mixins:[myMixin]引入所有混入选项被混合到组件本身选项中数据对象同名属性时组件数据优先级更高钩子函数合并为数组,混入钩子先于组件执行方法/组件/指令对象合并,冲突时组件覆盖混入侦听器合并为数组,混入侦听器先执行Vue3仍支持混入,但推荐使用组合式函数替代6.3.2

混入的局限性命名冲突多个混入同名数据或方法时难以确定最终生效项两个混入定义同名count和increment,行为不确定隐式依赖混入逻辑依赖组件中的方法但未明确声明混入在mounted中调用fetchlUser0,组件必须自行实现可维护性差理解组件完整行为需在多个混入文件间穿梭,修改通用功能难以评估影响范围Vue3推荐组合式函数解决混入问题,维护Vue2项目时仍可使用6.4.1

DOM基础JavaScript操作DOMDOM树结构Document为根节点,包含HTML子节点;HTML包含head和body两个子节点;每个节点对应一个可编程的DOM对象;可创建、修改、删除节点或添加事件获取对象:getElementByld/querySelector/querySelectorAll添加对象:createElement+appendChild更改样式:SPA频繁操作DOM带来性能瓶颈,催生虚拟DOM方案element.style.fontSize/element.style.colorDeemalekcelemslosDocumen'styitheausearanidtroidepruenavoitsdleSize.InoustrouresnpoceddetpercontstyleSventalespeletoreatty,ofthecoment.coranonrgtS6.4.3

虚拟DOM与渲染函数h(函数虚拟DOM创建虚拟节点的核心函数由VNode实例组成的树形结构,代表真实DOM的抽象操作JavaScript对象比操作真实DOM更轻更新前先比较新旧虚拟DOM差异异步更新队列减少直接操作DOM的次数模板适合简单场景,渲染函数适合复杂动态逻辑6.4.4

JSX与函数式组件JSX函数式组件JavaScript的XML扩展,在JS中直接书写HTML结构,保留模板清晰性的同时获得渲染函数的灵活性需安装@vitejs/plugin-vue-jsx并配置无响应式状态、无组件实例的纯函数组件接收props和context参数适合简单展示性组件6.4