vue 未知依赖导致dom刷新

Question

如题 修改了某个变量导致整个dom重新渲染

相关代码如下

如图每次更新数据后 log(222222) 都会被执行，间接说明dom被重新渲染了

问题： 不知道为什么整个dom被重新渲染了？

修改了变量 index 和 一些dom样式

修改变量的代码

  this.index >= items.length - 2
                ? ((wrapper.style.transform = ""), (this.index = 0))
                : this.index++;

全部js 如下

import anime from "animejs/lib/anime.es.js";
import addListener from "@/utils/listenerDestroy";
export default {
  props: {
    messages: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      // 当前显示元素的索引
      index: 0,
      // 控制速度
      speed: 280,
      animation: null,
      dialogVisible: false,
      listenters: null
    };
  },
  computed: {
    items() {
      return document.querySelectorAll(".notice-item");
    },
    wrapper() {
      return document.querySelector(".notice-wrapper");
    }
  },
  methods: {
    log(msg){
      console.log(msg);
    },
    getMsg() {
      console.log(111111);
      
      const {messages, index} = this
      return messages[index]
    },
    getLastAnime() {
      const { items, wrapper } = this;
      const el = items[this.index];

      const duration = () => {
        return el.textContent.length * this.speed;
      };

      return {
        targets: el,
        easing: "linear",
        duration: duration,
        translateX: el => {
          return -el.children[0].offsetWidth;
        },
        complete: () => {
          anime({
            targets: el,
            duration: 400,
            easing: "easeInOutExpo",
            rotateY: "1turn",
            complete: () => {
              el.style.transform = "";
            }
          });
          anime({
            targets: wrapper,
            duration: 500,
            easing: "easeInOutExpo",
            translateY: -(this.index + 1) * 2 + "em",
            complete: () => {
              this.index >= items.length - 2
                ? ((wrapper.style.transform = ""), (this.index = 0))
                : this.index++;
              anime(this.getLastAnime());
            }
          });
        }
      };
    }
  },
  mounted() {
    const wrapper = this.wrapper;
    if (wrapper.children.length > 1) {
      const subNode = wrapper.firstElementChild.cloneNode(true);
      wrapper.appendChild(subNode);
      this.animation = anime.timeline().add(this.getLastAnime());
      const listenters = addListener(wrapper, "click", () => {
        this.dialogVisible = true;
      });
      this.listenters = listenters
    }
  },
  destroyed() {
    this.listenters && this.listenters.destroy()
  }
};

Answer 1

等待大神解答