监听div发生过改变的方法

<div :class="['div',div?'big':'small']" id="div"></div>
<button @click="changediv">按钮</button>
<button @click="changetext">按钮2</button>

.div { background: rebeccapurple; }
.big { width: 200px; height: 200px; }  
.small { width: 100px; height: 100px; }

data: {
  div: false
},
methods: {
  changediv() {
    this.div = !this.div;
  },
  changetext() {
    let target = document.querySelector('#div');
    target.append('123')
  },
},

let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

let target = document.querySelector('#div');

//创建观察者对象
let observer = new MutationObserver(function (mutations) {
  mutations.forEach(function (mutation) {
    console.log(mutation)
  });
});

//配置观察者选项
let config = {
  attributes: true,//检测属性变动
  childList: true,//检测子节点变动
  characterData: true//节点内容或节点文本的变动。
};

// 传入目标节点和观察选项
observer.observe(target, config);

// 停止观察
observer.disconnect();