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

Vue hooks library

"use strict";
const vue = require("vue");
function useWhyDidYouUpdate(componentName, props) {
  const keys = vue.computed(() => Object.keys(props).map((key) => key));
  vue.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
    }
  );
}
module.exports = useWhyDidYouUpdate;