[vue.js]监听数据修改，实时获取DOM高度

问题背景

有一个div，内容可以通过编辑区的输入框进行修改，我要获取这个div实时的高度
一开始的想法是通过watch监听内容变化获取高度，但是怎么获取都获取到的是内容修改前的高度

解决方案

<div
      class="mtitle"
      ref="text"
    >{{mtitle}}</div>
......
watch: {
    mtitle(newval, oldval) {
      let that= this
      Vue.nextTick(function() {
        // DOM 更新了
        let percent = parseFloat(
          that.$refs.text.offsetHeight / (1263 * 0.9)
        ).toFixed(2);//计算高度比例
        console.log(percent);
        that.$emit("changetextheight", percent, that.id);//调用父组件方法实时改变外层div高度
      });
    }
  },

重点在 Vue.nextTick(function() {})这个方法的调用
一开始获取不到实时高度就是因为没有在外层封装一层nextTick函数
导致DOM还没有更新完就获取了高度

Vue.nextTick在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。

我们可以把它理解为Promise，它会在DOM更新后再执行函数里的内容