fix(fe): implement syncUpdateChildrenProps and enhance triggerObserver method to skip duplicate observer execution

Author: dos1in

fe/packages/service/__tests__/component-observer-order.spec.js

@@ -10,6 +10,7 @@ describe('Component.tO observer ordering', () => {
 				position: 'center',
 				name: 'fade',
 			},
+			__pendingSyncedProps__: {},
 			__info__: {
 				observers: {
 					'show': () => {
@@ -45,4 +46,33 @@ describe('Component.tO observer ordering', () => {
 			'observeShow:top',
 		])
 	})
+
+	it('skips duplicate observer execution for identical render replay after parent sync', () => {
+		const observeShow = vi.fn()
+		const instance = {
+			data: {
+				show: true,
+			},
+			__pendingSyncedProps__: {
+				show: true,
+			},
+			__info__: {
+				observers: {},
+				properties: {
+					show: {
+						observer: 'observeShow',
+					},
+				},
+			},
+			observeShow,
+		}
+
+		Component.prototype.tO.call(instance, {
+			show: true,
+		})
+
+		expect(observeShow).not.toHaveBeenCalled()
+		expect(instance.__pendingSyncedProps__).toEqual({})
+		expect(instance.data.show).toBe(true)
+	})
 })

fe/packages/service/__tests__/utils.spec.js

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest'
-import { filterInvokeObserver, mergeBehaviors } from '../src/core/utils'
+import { filterInvokeObserver, mergeBehaviors, syncUpdateChildrenProps } from '../src/core/utils'
 
 describe('数据监听器触发匹配逻辑', () => {
 	const funAB = vi.fn((numberA, numberB) => {
@@ -429,3 +429,53 @@ describe('观察者函数 oldVal 参数测试', () => {
 		expect(observer).not.toHaveBeenCalledWith(10, 20, 5)
 	})
 })
+
+describe('syncUpdateChildrenProps', () => {
+	it('triggers child property observers during parent setData sync', () => {
+		const child = {
+			__id__: 'child-1',
+			__parentId__: 'parent-1',
+			__pendingSyncedProps__: {},
+			__info__: {
+				properties: {
+					show: {},
+					name: {},
+				},
+			},
+			tO: vi.fn(),
+		}
+		const parent = {
+			__id__: 'parent-1',
+			data: {
+				show: true,
+				name: 'fade',
+			},
+			__childPropsBindings__: {
+				'child-1': {
+					show: {
+						expression: 'show',
+						dependencies: ['show'],
+						isSimple: true,
+					},
+					name: {
+						expression: 'name',
+						dependencies: ['name'],
+						isSimple: true,
+					},
+				},
+			},
+		}
+
+		syncUpdateChildrenProps(parent, {
+			'child-1': child,
+		}, {
+			show: true,
+			name: 'fade',
+		})
+
+		expect(child.tO).toHaveBeenCalledWith({
+			show: true,
+			name: 'fade',
+		})
+	})
+})

fe/packages/service/src/core/utils.js

@@ -700,9 +700,11 @@ export function syncUpdateChildrenProps(parent, allInstances, changedData) {
 			}
 		}
 
-		// 如果有数据需要更新，触发子组件的 tO 方法，但不触发 observers
+		// 如果有数据需要更新，直接触发子组件 observers，确保属性驱动的行为在 service 侧即时生效
 		if (Object.keys(updateData).length > 0) {
-			child.tO?.(updateData, false)
+			child.__pendingSyncedProps__ = child.__pendingSyncedProps__ || {}
+			Object.assign(child.__pendingSyncedProps__, updateData)
+			child.tO?.(updateData)
 		}
 	}
 }

fe/packages/service/src/instance/component/component.js

@@ -3,7 +3,7 @@ import { createSelectorQuery } from '../../api/core/wxml/selector-query'
 import { createIntersectionObserver } from '../../api/core/wxml/intersection-observer'
 import message from '../../core/message'
 import runtime from '../../core/runtime'
-import { addComputedData, filterData, filterInvokeObserver, invokeObserversOnce, isChildComponent, matchComponent, syncUpdateChildrenProps } from '../../core/utils'
+import { addComputedData, deepEqual, filterData, filterInvokeObserver, invokeObserversOnce, isChildComponent, matchComponent, syncUpdateChildrenProps } from '../../core/utils'
 
 // 组件生命周期
 const componentLifetimes = ['created', 'attached', 'ready', 'moved', 'detached', 'error']
@@ -60,6 +60,7 @@ export class Component {
 		// 保存子组件 properties 绑定关系（用于同步更新）
 		// 格式：{ childModuleId: { childPropName: parentDataKey } }
 		this.__childPropsBindings__ = {}
+		this.__pendingSyncedProps__ = {}
 	}
 
 	init() {
@@ -461,33 +462,48 @@ export class Component {
 	 * 触发观察者函数
 	 * triggerObserver
 	 */
-	tO(data, triggerObservers = true) {
+	tO(data) {
+		const nextData = {}
+		for (const [prop, val] of Object.entries(data)) {
+			if (
+				this.__pendingSyncedProps__
+				&& Object.hasOwn(this.__pendingSyncedProps__, prop)
+				&& deepEqual(this.__pendingSyncedProps__[prop], val)
+			) {
+				delete this.__pendingSyncedProps__[prop]
+				continue
+			}
+			nextData[prop] = val
+		}
+
+		if (Object.keys(nextData).length === 0) {
+			return
+		}
+
 		// 收集需要执行的观察者函数
 		const observersToExecute = []
 		const propertyObserversToExecute = []
 
 		// 保存旧值并更新数据，收集观察者
-		for (const [prop, val] of Object.entries(data)) {
+		for (const [prop, val] of Object.entries(nextData)) {
 			// 保存旧值
 			const oldVal = this.data[prop]
 
 			// 更新数据
 			this.data[prop] = val
 
-			if (triggerObservers) {
-				// 收集 observers
-				if (this.__info__.observers) {
-					observersToExecute.push(() => filterInvokeObserver(prop, this.__info__.observers, data, this, oldVal))
-				}
-				
-				// 收集属性观察器
-				const observer = this.__info__.properties?.[prop]?.observer
-				if (isString(observer)) {
-					propertyObserversToExecute.push(() => this[observer]?.(val, oldVal))
-				}
-				else if (isFunction(observer)) {
-					propertyObserversToExecute.push(() => observer.call(this, val, oldVal))
-				}
+			// 收集 observers
+			if (this.__info__.observers) {
+				observersToExecute.push(() => filterInvokeObserver(prop, this.__info__.observers, this.data, this, oldVal))
+			}
+			
+			// 收集属性观察器
+			const observer = this.__info__.properties?.[prop]?.observer
+			if (isString(observer)) {
+				propertyObserversToExecute.push(() => this[observer]?.(val, oldVal))
+			}
+			else if (isFunction(observer)) {
+				propertyObserversToExecute.push(() => observer.call(this, val, oldVal))
 			}
 		}