feat(vue): not update node when add/remove listener (#3520)

* feat(vue): not update node when add/remove listener * feat(vue): not update node when add/remove listener
Tencent · Sep 25, 2023 · 19b99ac · 19b99ac
1 parent 5ead86c
commit 19b99ac
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 12 deletions.
diff --git a/driver/js/packages/hippy-vue/src/renderer/element-node.js b/driver/js/packages/hippy-vue/src/renderer/element-node.js
@@ -36,7 +36,7 @@ import {
 } from '../util';
 import { EventMethod, EventHandlerType } from '../util/event';
 import Native from '../runtime/native';
-import { updateChild, updateWithChildren } from './native';
+import { updateChild, updateWithChildren, updateEvent } from './native';
 import { Event, EventDispatcher, EventEmitter } from './native/event';
 import { Text } from './native/components';
 import ViewNode from './view-node';
@@ -621,7 +621,7 @@ class ElementNode extends ViewNode {
         this.events[nativeEventName].type = EventHandlerType.ADD;
       }
     });
-    updateChild(this);
+    updateEvent(this);
   }
 
   removeEventListener(eventNames, callback, options) {
@@ -643,7 +643,7 @@ class ElementNode extends ViewNode {
         this.events[nativeEventName].type = EventHandlerType.REMOVE;
       }
     });
-    updateChild(this);
+    updateEvent(this);
     return observer;
   }
 

diff --git a/driver/js/packages/hippy-vue/src/renderer/native/index.js b/driver/js/packages/hippy-vue/src/renderer/native/index.js
@@ -67,6 +67,7 @@ const NODE_OPERATION_TYPES = {
   updateNode: Symbol('updateNode'),
   deleteNode: Symbol('deleteNode'),
   moveNode: Symbol('moveNode'),
+  updateEvent: Symbol('updateEvent'),
 };
 
 let batchIdle = true;
@@ -173,6 +174,9 @@ function endBatch(app) {
           printNodeOperation(chunk.printedNodes, 'moveNode');
           sceneBuilder.move(chunk.nodes);
           break;
+        case NODE_OPERATION_TYPES.updateEvent:
+          handleEventListeners(chunk.eventNodes, sceneBuilder);
+          break;
         default:
       }
     });
@@ -403,15 +407,6 @@ function getEventNode(targetNode) {
     Object.keys(eventsAttributes)
       .forEach((key) => {
         const { name, type, isCapture, listener } = eventsAttributes[key];
-        // if (!targetNode.isListenerHandled(key, type)) {
-        //   targetNode.setListenerHandledType(key, type);
-        //   eventList.push({
-        //     name,
-        //     type,
-        //     isCapture,
-        //     listener,
-        //   });
-        // }
         eventList.push({
           name,
           type,
@@ -628,6 +623,22 @@ function moveChild(parentNode, childNode, refInfo = {}) {
   endBatch(app);
 }
 
+function updateEvent(parentNode) {
+  if (!parentNode.isMounted) {
+    return;
+  }
+  const app = getApp();
+  const eventNode = getEventNode(parentNode);
+  batchNodes.push({
+    type: NODE_OPERATION_TYPES.updateEvent,
+    nodes: [],
+    eventNodes: [eventNode],
+    printedNodes: [],
+    updateEvent,
+  });
+  endBatch(app);
+}
+
 function updateChild(parentNode) {
   if (!parentNode.isMounted) {
     return;
@@ -669,6 +680,7 @@ export {
   insertChild,
   removeChild,
   updateChild,
+  updateEvent,
   moveChild,
   updateWithChildren,
   getElemCss,