feat(fe): add deepEqual function for deep comparison and integrate it into runtime and service components

Author: dos1in

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

@@ -12,6 +12,23 @@ export function isNil(value) {
 	return value === null || value === undefined
 }
 
+export function deepEqual(a, b) {
+	if (a === b) {
+		return true
+	}
+	if (typeof a !== 'object' || typeof b !== 'object' || a == null || b == null) {
+		return false
+	}
+
+	const keysA = Object.keys(a)
+	const keysB = Object.keys(b)
+	if (keysA.length !== keysB.length) {
+		return false
+	}
+
+	return keysA.every(key => deepEqual(a[key], b[key]))
+}
+
 export function get(data, path) {
 	return _get(data, path)
 }

fe/packages/common/src/index.js

@@ -9,6 +9,7 @@ export {
 	animationToStyle,
 	camelCaseToUnderscore,
 	cloneDeep,
+	deepEqual,
 	get,
 	getDataAttributes,
 	isAndroid,

fe/packages/render/src/core/runtime.js

@@ -1,4 +1,4 @@
-import { getDataAttributes, set, uuid } from '@dimina/common'
+import { deepEqual, getDataAttributes, set, uuid } from '@dimina/common'
 import { Components, deepToRaw, triggerEvent } from '@dimina/components'
 import {
 	createApp,
@@ -429,21 +429,33 @@ class Runtime {
 			let skipInitialPropsNotify = true
 
 		watch(
-				props,
-				(newProps) => {
+				() => deepToRaw(props),
+				(newProps, oldProps = {}) => {
 					Object.assign(data, newProps)
 					if (skipInitialPropsNotify) {
 						skipInitialPropsNotify = false
 						return
 					}
+
+					const changedProps = Object.entries(newProps).reduce((acc, [key, value]) => {
+						if (!deepEqual(value, oldProps[key])) {
+							acc[key] = value
+						}
+						return acc
+					}, {})
+
+					if (Object.keys(changedProps).length === 0) {
+						return
+					}
+
 					message.send({
 						type: 't',
 						target: 'service',
 						body: {
 							bridgeId,
 							moduleId,
 							methodName: 'tO', // triggerObserver
-							event: deepToRaw(newProps),
+							event: changedProps,
 						},
 					})
 				},

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

@@ -81,6 +81,50 @@ describe('Component.tO observer ordering', () => {
 		])
 	})
 
+	it('runs later changed props before earlier props in reverse batch order', () => {
+		const calls = []
+		const instance = {
+			data: {
+				defaultDate: 1,
+				type: 'single',
+				currentDate: null,
+			},
+			__pendingSyncedProps__: {},
+			__info__: {
+				observers: {},
+				properties: {
+					defaultDate: {
+						observer: 'observeDefaultDate',
+					},
+					type: {
+						observer: 'observeType',
+					},
+				},
+			},
+			observeDefaultDate: vi.fn(function observeDefaultDate(val) {
+				this.data.currentDate = val
+				calls.push(`defaultDate:${this.data.currentDate}`)
+			}),
+			observeType: vi.fn(function observeType() {
+				if (this.data.type === 'multiple') {
+					this.data.currentDate = [this.data.defaultDate]
+				}
+				calls.push(`type:${Array.isArray(this.data.currentDate) ? 'array' : typeof this.data.currentDate}`)
+			}),
+		}
+
+		Component.prototype.tO.call(instance, {
+			defaultDate: 1,
+			type: 'multiple',
+		})
+
+		expect(calls).toEqual([
+			'type:array',
+			'defaultDate:1',
+		])
+		expect(instance.data.currentDate).toBe(1)
+	})
+
 	it('skips duplicate observer execution but keeps data in sync for identical render replay after parent sync', () => {
 		const observeShow = vi.fn()
 		const instance = {

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

@@ -1,4 +1,4 @@
-import { get, isFunction, isNil } from '@dimina/common'
+import { deepEqual, get, isFunction, isNil } from '@dimina/common'
 
 const queue = []
 let isFlushing = false
@@ -21,19 +21,7 @@ function flushQueue() {
 	}
 }
 
-export function deepEqual(a, b) {
-	if (a === b)
-		return true // 引用相同
-	if (typeof a !== 'object' || typeof b !== 'object' || a == null || b == null)
-		return false
-
-	const keysA = Object.keys(a)
-	const keysB = Object.keys(b)
-	if (keysA.length !== keysB.length)
-		return false
-
-	return keysA.every(key => deepEqual(a[key], b[key]))
-}
+export { deepEqual }
 /**
  * 将 computed 的 key 提前写入 data，确保渲染层初始化时能正确追踪这些 key 的响应式依赖。
  *

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

@@ -534,7 +534,7 @@ export class Component {
 			}
 		}
 
-		propertyObserversToExecute.reverse().forEach(run => run())
+		propertyObserversToExecute.forEach(run => run())
 	}
 
 	async #invokeInitLifecycle() {
@@ -608,7 +608,7 @@ export class Component {
 		observersToExecute.forEach(run => run())
 		invokeBehaviorObservers(this, Object.keys(nextData), Object.fromEntries(Object.entries(nextData).map(([prop]) => [prop, undefined])))
 
-		// 同批次 props 更新时，优先让后写入的属性观察器完成派生状态计算
+		// 同批次 props 更新时，让后写入的属性观察器覆盖前者的派生状态
 		propertyObserversToExecute.reverse().forEach(run => run())
 	}