@mpxjs/core 2.8.32 → 2.8.36

package/@types/index.d.ts

@@ -128,6 +128,8 @@ interface ComponentOpt<D, P, C, M, Mi extends Array<any>, S extends Record<any,
 
   pageHide?: () => void
 
+  initData?: Record<string, any>
+
   [index: string]: any
 }
 

package/package.json

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

package/src/core/mergeOptions.js

@@ -132,7 +132,9 @@ function extractObservers (options) {
         },
         deep: true,
         // 延迟触发首次回调，处理转换支付宝时在observer中查询组件的行为，如vant/picker中，如不考虑该特殊情形可用immediate代替
-        immediateAsync: true
+        // immediateAsync: true
+        // 为了数据响应的标准化，不再提供immediateAsync选项，之前处理vant等原生组件跨平台转换遇到的问题推荐使用条件编译patch进行处理
+        immediate: true
       })
     }
   })
@@ -174,7 +176,9 @@ function extractObservers (options) {
             }
           },
           deep,
-          immediateAsync: watchProp
+          // immediateAsync: watchProp
+          // 为了数据响应的标准化，不再提供immediateAsync选项，之前处理vant等原生组件跨平台转换遇到的问题推荐使用条件编译patch进行处理
+          immediate: watchProp
         })
       }
     })

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)
   }
 }
 

package/src/observer/watch.js

@@ -42,7 +42,7 @@ const processWatchOptionsCompat = (options) => {
 }
 
 export function watch (source, cb, options = {}) {
-  let { immediate, deep, flush, immediateAsync } = processWatchOptionsCompat(options)
+  let { immediate, deep, flush } = processWatchOptionsCompat(options)
   const instance = currentInstance
   let getter
   let isMultiSource = false
@@ -139,8 +139,6 @@ export function watch (source, cb, options = {}) {
   if (cb) {
     if (immediate) {
       job()
-    } else if (immediateAsync) {
-      queuePreFlushCb(job)
     } else {
       oldValue = effect.run()
     }