Hice una propiedad calculada para ordenar un objeto Javascript alfabéticamente por clave. Agregué el registro a la propiedad calculada para asegurarme de que no se invocara sin un cambio de dependencia.

Descubrí que sin cambiar la dependencia reactiva ( sensorData ), la propiedad calculada parece reevaluarse a una velocidad alta (más de 10 Hz).

¿Por qué se está reevaluando sin un cambio de dependencia?

lo que he probado

Sé que Vue recomienda no agregar/eliminar propiedades, y mi objeto se inicializa en {} . Sin embargo, incluso al inicializarlo con cada tecla, obtuve el mismo resultado.

También probé vm.$set(object, key, value) como se recomienda si es necesario agregar propiedades después de representar una página. Sin suerte.

JSON del servidor

 { "readings": { "stepperC": 180, "stepperA": 360, "stepperB": 0 } }

Código Vue

 data: () => ({ sensorData: {} }), computed: { // sort alphabetically by key sortedSensorData() { console.log("calling sort"); return Object.keys(this.sensorData).sort() .reduce((obj, key) => ({ ...obj, [key]: this.sensorData[key] }), {}); } } methods: { handleWebSocketMessage({ data }) { const newReadings = data.readings; if (Object.entries(newReadings).some(([sensor, reading]) => this.sensorData[sensor] !== reading)) this.sensorData = newReadings; } }

Producción

Sin cambios en sensorData :

 calling sort calling sort calling sort ...