优化 slots 实现方式

yoxjs · Mar 31, 2022 · f00da5b · f00da5b
1 parent e35473a
commit f00da5b
Showing 1 changed file with 36 additions and 28 deletions.
diff --git a/src/Yox.ts b/src/Yox.ts
@@ -15,6 +15,7 @@ import {
 } from 'yox-type/src/type'
 
 import {
+  Slots,
   VNode,
 } from 'yox-type/src/vnode'
 
@@ -534,6 +535,10 @@ export default class Yox implements YoxInterface {
           }
         )
       }
+      // 把 slots 放进数据里，方便 get
+      if ($options.slots) {
+        instance.renderSlots(source, $options.slots)
+      }
     }
 
     // 先放 props
@@ -615,18 +620,12 @@ export default class Yox implements YoxInterface {
         directives,
         partials,
         filters,
-        slots,
       } = $options
 
       if (model) {
         instance.$model = model
       }
 
-      // 把 slots 放进数据里，方便 get
-      if (slots) {
-        object.extend(source, slots)
-      }
-
       // 检查 template
       if (is.string(template)) {
         // 传了选择器，则取对应元素的 html
@@ -1236,14 +1235,19 @@ export default class Yox implements YoxInterface {
 
       { $observer, $dependencies } = instance,
 
-      oldDependencies = $dependencies || constant.EMPTY_OBJECT,
+      dependencies: Record<string, any> = { }
 
-      dependencies = { },
+      if ($dependencies) {
+        for (let key in $dependencies) {
+          $observer.unwatch(key, markDirty)
+        }
+      }
+
+      instance.$dependencies = dependencies
 
-      vnode = templateRender.render(
+      return templateRender.render(
         instance,
         instance.$template as Function,
-        dependencies,
         $observer.data,
         $observer.computed,
         instance.$filters,
@@ -1253,26 +1257,16 @@ export default class Yox implements YoxInterface {
         instance.$directives,
         globalDirectives,
         instance.$transitions,
-        globalTransitions
-      )
-
-      for (let key in dependencies) {
-        if (!(key in oldDependencies)) {
-          $observer.watch(key, markDirty)
-        }
-      }
-
-      if ($dependencies) {
-        for (let key in $dependencies) {
-          if (!(key in dependencies)) {
-            $observer.unwatch(key, markDirty)
+        globalTransitions,
+        function (keypath) {
+          if (!dependencies[keypath]
+            && instance.$dependencies === dependencies
+          ) {
+            $observer.watch(keypath, markDirty)
+            dependencies[keypath] = constant.TRUE
           }
         }
-      }
-
-      instance.$dependencies = dependencies
-
-      return vnode
+      )
     }
   }
 
@@ -1354,6 +1348,20 @@ export default class Yox implements YoxInterface {
     }
   }
 
+  /**
+   * 渲染 slots
+   *
+   * @param props
+   * @param slots
+   */
+  renderSlots(props: Data, slots: Slots): void {
+    if (process.env.NODE_ENV !== 'pure') {
+      for (let name in slots) {
+        props[name] = slots[name](this)
+      }
+    }
+  }
+
   /**
    * 销毁组件
    */