NightCatSama/vue-slider-component

Deep objects comparison

agilov opened this issue · 1 comments

Describe the feature

Here in your docs there is a warning:

WARNING

In theory, value supports the object type, but you must ensure that the object references are consistent, otherwise the component cannot judge whether the two objects are equal.

And I've actually faced this behaviour during my developing process, I was forced to find the object in the data array and put it in the value from the array instead of simple put the object in the model.

But there are several ways to compare objects even if they aren't pointing to the same instance.

Describe the solution you'd like

For objects comparison you can use:

  • Node built in util.isDeepStrictEqual
  • _.isEqual(object1, object2) of lodash library (if you use it)

or something like this:

function deepEqual(object1, object2) {
  const keys1 = Object.keys(object1);
  const keys2 = Object.keys(object2);

  if (keys1.length !== keys2.length) {
    return false;
  }

  for (const key of keys1) {
    const val1 = object1[key];
    const val2 = object2[key];
    const areObjects = isObject(val1) && isObject(val2);
    if (
      areObjects && !deepEqual(val1, val2) ||
      !areObjects && val1 !== val2
    ) {
      return false;
    }
  }

  return true;
}

function isObject(object) {
  return object != null && typeof object === 'object';
}

Of course to speed up - native js objects comparison can be run first, and deep only if native objects comparison failed.

Sorry, this should not be supported.

First of all it is not recommended to use object type for value, and I think the reference of the two objects are consistent to be really equal.