Vue模版语法@click - MouseEvent的防御
前言应用1 Web中的弹窗实现方式Vue 框架中的事件处理扩展应用2: 实现拖拽实现方式1: HTML5原生拖拽API —— Drag API适用场景跨出浏览器的拖拽实现方式2mouse事件适用场景精确控制元素位置一、概要处理 MouseEvent 时防御技术主要指浏览器默认行为对交互的干扰、拖拽中会产生冲突、事件流中存在阻碍。1.1 阻止事件冒泡干扰DOM结构中子元素的点击事件可能会意外触发父元素的逻辑例如点击弹窗内的按钮导致弹窗关闭防御手段在需要隔离的事件处理函数中调用 e.stopPropagation()将事件限制在当前目标范围内1.2 阻止拖拽冲突当时用 mousedown mousemove 实现拖拽时浏览器会尝试触发原生的 HTML5 Drag行为导致拖拽卡顿和异常防御手段再 mousedown 事件中调用 e.preventDefault二、运作流程2.1 Vue的模版语法click的应用buttonclickhandleClick()A/buttonbuttonclickfnB/buttonB按钮 click“fn” 不带括号Vue底层自动把原生对象 MouseEvent 传给方法。A按钮 clickhandleClick()带括号原生事件对象被丢弃防御逻辑断裂无法阻止冒泡事件。2.1.1 出现隐式传参数问题 ✅可能在不会触发语法报错的情况下传递脏数据给API—— “隐蔽串接口事故”。因为JS中任何对象都是truelymethod:{fn(openType){// 其他处理逻辑this.NormalOpenedGata(openType)}}防御接收参数白名单校验method:{fn(openType){if(openType!A||openType!B)openType// 其他处理逻辑this.NormalOpenedGata(openType)}}2.2 流程通过这个流程理解Vue 为什么可以“自动注入”事件对象—— Vue在编译器通过静态分析模版代码click自动生成不同的渲染函数。【静态分析模版代码定义编译器遍历 AST 并标记 static/staticRoot 属性的逻辑过程。】divp静态/pspan{{msg}}/span/div2.2.1 编译期Vue编译器遇到模版代码click检查绑定的表达形式handleClick()/fn —— 渲染函数生成。过程parser - Optimizer(双指针/最长递归子序列) - Codegen ❌过程parser - OptimizerDFSstatic:true- Codegen关于click编译结果// 无括号表达式形式识别到一个方法引用编译器将其包装在一个函数中on:{click:function($event){fn($event)}}//有括号表达式形式识别到一个函数调用表达式function($event){handleClick()}编译过程// 解析模版exportfunctionparse(template:string,options:CompilerOptions):ASTElement|void{}/* { tag:button, events:{ click:{ value: fn, modifiers: undefined } } } */// 优化AST标记静态节点exportfunctionoptimize(root:ASTElement,options:CompilerOptions){}// 拼接字符串(遍历AST树) events.js事件处理文件exportfunctiongenHandlers(events:ASTElementHandles,isNative:boolean){}// index.js 总入口文件/* params astAST树 params options构建工具控制编译器的相关配置 */exportfunctiongenerate(ast:ASTelement|void,options:CompilerOptions):CodegenResult{// 相关上下文信息conststatenewCodegenState(options)// 总调度器遍历ast- genHandlers(ast.events)constcodeast?genElement(ast,state):_c(div)return{render:with(this){return${code}}staticRenderFns:state.staticRenderFns}}2.2.2 绑定DOM与事件监听所处阶段渲染函数的“执行阶段”运行期vue生命周期Mount组件初始化或 update数据更新时—— Patch过程流程Render【vm._render()】Patch 【createElm】addEventListener2.2.2.1 原生DOM核心动作PatchVue执行Diff算法对比新旧VNode根据对比结果执行真实DOM创建/更新核心动作Diff将虚拟DOM映射为真实DOM更新浏览器页面❌原理事件绑定不是一个独立的动作是 Patch 过程具体是 createElm 或 patchVnode中的一个“钩子Hook” —— 架构的耦合原理事件绑定 ❌调用 createElm方法 创建真实DOM节点再调用 invokeCreateHooks(vnode, insertedVnodeQueue)遍历创建阶段的模块钩子最终触发 updateDOMListenersupdateDOMListeners函数接收编译好的事件对象vnode.data.on将其传入 updateListeners 进行新旧事件的对比与绑定//Codegen 中的 codewith(this){return_c(button,{on:{click:function($event){fn($event)}},})}updateListeners 函数Vue 对需要新增的事件调用 add 方法—— 真正与浏览器原生 API 对接的地方2.2.2.2 Vue自定义组件区别原生 DOM 事件是 ‘浏览器’ 管理自定义组件事件是 ‘Vue’ 管理步骤绑定阶段父组件订阅事件$on触发阶段子组件发布事件$emit父组件订阅子组件待定vue 的声明式What1. 语法 事件名处理函数 v-on:事件名处理函数 示例: MyButton clickfn / 3. 不会调用 target.addEventListener 4. Patch阶段 创建自定义组件调用createComponent方法 事件绑定在Vue实例的内存属性上编译期// Codegen 阶段 生成的render_c(MyButton,{on:{click:fn},// 自定义事件nativeOn:{click:fn}// 原生DOM事件})运行期functioncreateComponent(vnode,data,...){constlistenersdata.on/* 核心动作自定义组件事件替换掉父组件绑定的原生事件 路线一❕子组件初始化时Vue遍历 listenersoptions.on,自动调用 this.$on() 完成订阅等待内部触发。 路线二 .native普通 DOM 节点的事件绑定函数updateDOMListeners只认 data.on替换后传给子组件 */data.ondata.nativeOn// 为了子组件内部的“根 DOM 节点”vnodenewVNode({...})// createComponent.listeners}扩展为什么 Vue 3 彻底移除了 .native 修饰符提示vue2的自定义组件中需要监听原生点击必须添加.native否则无效而vue3自定义组件默认是原生 DOM 事件Vue3语法显式声明click自定义事件——defineEmits[‘click’]。目的拦截阻止透传。JS 的编程式How关系具体的执行步骤和控制流templateMyButton refmyBtn//templatescriptmounted(){this.$ref.myBtn.$on(click,(data){console.log(手动订阅子组件的click事件获取数据data})}/script三、技术细节Vue 中原生JavaScript 的 e.stopPropagation() 被封装为模版语法 —— 事件修饰服 .stop3.1 防止事件干扰3.1.1 使用 .stop点击按钮时只会触发按钮的逻辑不会冒泡触发父级弹窗的关闭事件divclickcloseDialogbuttonclick.stopconfirmData/button/divVue特有机制.stop 修饰符仅对原生 DOM 事件有效。如果是 Vue 的自定义组件事件通过 $emit 手动触发Vue 的组件事件没有冒泡机制的。3.1.2 在事件处理函数中手动调用当需要在阻止事件冒泡之前执行额外的判断逻辑时可以显式地将原生事件对象$event传入方法然后在函数内部手动调用event.stopPropagation()。buttonclickhandleClick($event)确定/buttonmethods:{handleClick(event){// 前置逻辑例如权限校验、数据验证等event.stopPropagation();this.confirmData();// 业务逻辑}}这种方式提供了更大的灵活性允许在调用stopPropagation()之前执行自定义的业务判断。