优化大师网站,做网站前需要做什么准备,购物平台网站建设框架,营销型建设网站公司前言 这是最近的碰到的那个 和响应式相关的问题 特定的操作之后响应式对象不“响应“了 引起的一系列的文章
主要记录的是 vue 的相关实现机制
呵呵 理解本文需要 vue 的使用基础, js 的使用基础 测试用例
用例如下, 我们这里核心关注 事件的处理流程 问题的调试
整个… 前言 这是最近的碰到的那个 和响应式相关的问题 特定的操作之后响应式对象不“响应“了 引起的一系列的文章
主要记录的是 vue 的相关实现机制
呵呵 理解本文需要 vue 的使用基础, js 的使用基础 测试用例
用例如下, 我们这里核心关注 事件的处理流程 问题的调试
整个事件的处理是 dom - ElButton - VueComponent.emit - HelloWorld.handleClick
从面向对象的角度上面来看, ElButton.handleClick 是一个模板方法, 一部分固定的组件本身的业务处理, 一部分留给使用实例的地方来进行处理
ElButton 接管的是点击之后的所有业务, 他会做一些 ElButton 点击之后的自己需要处理的一部分业务, 然后还会 emit 一个 click 事件, 这个事件的处理是 留给具体的组件实例来关注的 [比如 HelloWorld 中的 el-button 就是一个组件实例]
我们这里从 dom基层 往上看 真实的再 dom 上面绑定事件 是在这里绑定, 这里封装了一层 function
这里面调用的传入的 handler, 传入的 handler 为一个 invoker, invoker 里面对应的是 el-button 的 handler 绑定的事件
这里就是上面的 dom - ElButton 的这步转换 传入的函数为, 这里就是上面的 ElButton - VueComponent.emit 的这步转换 绑定 dom 事件这里, 是在创建 dom 元素的时候, 有一系列创建的时候调用的钩子
这里 updateDOMListeners 中根据当前 VNode 来更新所有的 dom 的事件处理函数
这一这里有一层 createFnInvoker 的包装处理, 因此 回调函数是 invoker, 然后 invoker 再去调用的 handleClick 然后 VueComponent 的 事件处理器 到 VNode 的事件处理器 的转换是在组件对应的 render 函数 这部分就是 Vue 本身的事件处理相关
从注册的 事件处理表 中获取 click 对应的回调列表, 然后 依次调用
这里的 vm._events[‘click’] 对应的函数是 封装了一层 invoker 之后的 HelloWorld.handleClick
这里就是上面的 VueComponent.emit - HelloWorld.handleClick 的这步转换 然后这个 ElButton 对应的 VueComponent 实例初始化的地方如下, initEvents 的地方会注册相关事件
初始化 Vue 组件的时候 注册 listener
这个可以再 VueComponent 的对象的 _events 上面查看, 这里注册的是 VueComponent 的事件管理 完
