vue-hooks-plus/es/useWhyDidYouUpdate/index.js

Vue hooks library

import { computed, watch } from "vue";
function useWhyDidYouUpdate(componentName, props) {
  const keys = computed(() => Object.keys(props).map((key) => key));
  watch(
    Object.keys(props).map((key) => props[key]),
    (curr, prev) => {
      const changedProps = {};
      keys.value.forEach((key, index) => {
        if (prev[index] !== curr[index]) {
          changedProps[key] = {
            from: prev[index],
            to: curr[index]
          };
        }
      });
      if (Object.keys(changedProps).length) {
        console.log("[why-did-you-update]", componentName, changedProps);
      }
    },
    {
      deep: true
    }
  );
}
export {
  useWhyDidYouUpdate as default
};