Vue 3基础入门 课件 第6章 逻辑复用.pptxVIP

第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.directi