@mpxjs/core 2.8.33 → 2.8.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.8.33",
+  "version": "2.8.36",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -47,5 +47,5 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "sideEffects": false,
-  "gitHead": "6838a99375bfce3ebd8046e86f8806920f4f2b37"
+  "gitHead": "f7d1fc9bf1aaf7aff6fe9f2a11288dc5e12f78d6"
 }

package/src/core/proxy.js

@@ -1,9 +1,9 @@
 import { reactive } from '../observer/reactive'
-import { ReactiveEffect } from '../observer/effect'
+import { ReactiveEffect, pauseTracking, resetTracking } from '../observer/effect'
 import { effectScope } from '../platform/export/index'
 import { watch } from '../observer/watch'
 import { computed } from '../observer/computed'
-import { queueJob, nextTick } from '../observer/scheduler'
+import { queueJob, nextTick, flushPreFlushCbs } from '../observer/scheduler'
 import Mpx from '../index'
 import {
   noop,
@@ -119,6 +119,7 @@ export default class MpxProxy {
       // 下次是否需要强制更新全部渲染数据
       this.forceUpdateAll = false
       this.currentRenderTask = null
+      this.propsUpdatedFlag = false
     }
     this.initApi()
   }
@@ -170,7 +171,9 @@ export default class MpxProxy {
   }
 
   propsUpdated () {
+    this.propsUpdatedFlag = true
     const updateJob = this.updateJob || (this.updateJob = () => {
+      this.propsUpdatedFlag = false
       // 只有当前没有渲染任务时，属性更新才需要单独触发updated，否则可以由渲染任务触发updated
       if (this.currentRenderTask?.resolved && this.isMounted()) {
         this.callHook(BEFOREUPDATE)
@@ -477,6 +480,7 @@ export default class MpxProxy {
       return
     }
 
+    pauseTracking()
     // 使用forceUpdateData后清空
     if (!isEmptyObject(this.forceUpdateData)) {
       data = mergeData({}, data, this.forceUpdateData)
@@ -504,12 +508,30 @@ export default class MpxProxy {
     }
 
     this.target.__render(data, callback)
+    resetTracking()
+  }
+
+  toggleRecurse (allowed) {
+    if (this.effect && this.update) this.effect.allowRecurse = this.update.allowRecurse = allowed
+  }
+
+  updatePreRender () {
+    this.toggleRecurse(false)
+    pauseTracking()
+    flushPreFlushCbs(undefined, this.update)
+    resetTracking()
+    this.toggleRecurse(true)
   }
 
   initRender () {
     if (this.options.__nativeRender__) return this.doRender()
 
     const effect = this.effect = new ReactiveEffect(() => {
+      // pre render for props update
+      if (this.propsUpdatedFlag) {
+        this.updatePreRender()
+      }
+
       if (this.target.__injectedRender) {
         try {
           return this.target.__injectedRender()
@@ -522,10 +544,10 @@ export default class MpxProxy {
       }
     }, () => queueJob(update), this.scope)
 
-    const update = this.update = this.effect.run.bind(this.effect)
+    const update = this.update = effect.run.bind(effect)
     update.id = this.uid
     // render effect允许自触发
-    effect.allowRecurse = update.allowRecurse = true
+    this.toggleRecurse(true)
     update()
   }
 

package/src/observer/effect.js

@@ -4,6 +4,19 @@ import { PausedState } from '../helper/const'
 
 let uid = 0
 
+let shouldTrack = true
+const trackStack = []
+
+export function pauseTracking () {
+  trackStack.push(shouldTrack)
+  shouldTrack = false
+}
+
+export function resetTracking () {
+  const last = trackStack.pop()
+  shouldTrack = last === undefined ? true : last
+}
+
 export class ReactiveEffect {
   active = true
   deps = []
@@ -27,17 +40,21 @@ export class ReactiveEffect {
   // run fn and return value
   run () {
     if (!this.active) return this.fn()
-    pushTarget(this)
+    const lastShouldTrack = shouldTrack
     try {
+      pushTarget(this)
+      shouldTrack = true
       return this.fn()
     } finally {
       popTarget()
+      shouldTrack = lastShouldTrack
       this.deferStop ? this.stop() : this.cleanupDeps()
     }
   }
 
   // add dependency to this
   addDep (dep) {
+    if (!shouldTrack) return
     const id = dep.id
     if (!this.newDepIds.has(id)) {
       this.newDepIds.add(id)

package/src/observer/scheduler.js

@@ -17,6 +17,7 @@ let postFlushIndex = 0
 
 const resolvedPromise = Promise.resolve()
 let currentFlushPromise = null
+let currentPreFlushParentJob = null
 
 const RECURSION_LIMIT = 100
 
@@ -68,9 +69,9 @@ export function queueJob (job) {
   // if the job is a watch() callback, the search will start with a +1 index to
   // allow it recursively trigger itself - it is the user's responsibility to
   // ensure it doesn't end up in an infinite loop.
-  if (
-    !queue.length ||
-    !queue.includes(job, isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex)
+  if ((!queue.length ||
+    !queue.includes(job, isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex)) &&
+    job !== currentPreFlushParentJob
   ) {
     if (job.id == null) {
       queue.push(job)
@@ -92,8 +93,9 @@ function queueFlush () {
   }
 }
 
-export function flushPreFlushCbs (seen) {
+export function flushPreFlushCbs (seen, parentJob = null) {
   if (pendingPreFlushCbs.length) {
+    currentPreFlushParentJob = parentJob
     activePreFlushCbs = [...new Set(pendingPreFlushCbs)]
     pendingPreFlushCbs.length = 0
     if (isDev) seen = seen || new Map()
@@ -107,8 +109,9 @@ export function flushPreFlushCbs (seen) {
     }
     activePreFlushCbs = null
     preFlushIndex = 0
+    currentPreFlushParentJob = null
     // recursively flush until it drains
-    flushPreFlushCbs(seen)
+    flushPreFlushCbs(seen, parentJob)
   }
 }