【vue】对比两个对象的差异并在页面标记

如上demo，当text的内容发生变化时，会将变化标记变红，代码如下：

HTML页面，给元素动态绑定ref

    <div id="app" class="flex">
      <div class="container flex">
        <!-- 上一个版本内容 -->
        <div class="container-left flex">
          <h3>上一个版本</h3>
          <p v-for="item in lastVersions">{{ item.text }}</p>
        </div>
        <!-- 当前版本内容 -->
        <div class="container-right flex">
          <h3>当前版本</h3>
          <p v-for="item of currentVersions" :ref="item.key">{{ item.text }}</p>
        </div>
      </div>
    </div>

使用了lodash工具库的_.transform和_.isEqual方法

    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          lastVersions: [
            {
              text: "文本1",
              key: "text1",
            },
            {
              text: "文本2",
              key: "text2",
            },
            {
              text: "文本3",
              key: "text3",
            },
          ],
          currentVersions: [
            {
              text: "文本1 -- change",
              key: "text1",
            },
            {
              text: "文本2",
              key: "text2",
            },
            {
              text: "文本3",
              key: "text3",
            },
          ],
        },

        created() {
          this.renderDiff();
        },

        methods: {
          // 渲染
          renderDiff() {
            const res = this.difference(
              this.currentVersions,
              this.lastVersions
            );

            res.forEach((item) => {
              this.$nextTick(() => {
                this.$refs[item.key][0].className = "change-color";
              });
            });
          },
          // 比较差异,使用了lodash工具库的_.transform和_.isEqual方法
          difference(object, base) {
            function changes(object, base) {
              return _.transform(object, function (result, value, key) {
                if (!_.isEqual(value, base[key])) {
                  result[key] = value;
                }
              });
            }
            return changes(object, base);
          },
        },
      });
    </script>

样式

    <style>
      html,
      body,
      #app {
        margin: 0;
        height: 100%;
      }

      .flex {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .container {
        width: 600px;
        height: 300px;
        border: 2px solid gray;
      }

      .container-left,
      .container-right {
        flex-direction: column;
        flex: 1;
        height: 100%;
      }

      .container-left {
        border-right: 1px dashed gray;
      }

      .change-color {
        color: red;
      }
    </style>