VueJS自适应textarea组件在IE浏览器中的裁剪闪烁问题求助

我完全理解你遇到的困扰——在IE11里，textarea的高度调整会出现明显的两次尺寸变化，连带下方内容跟着移位闪烁。这确实是因为你当前实现里的$nextTick带来了延迟，让浏览器有机会渲染出高度为auto的中间状态，之后再更新成最终高度，才导致了视觉上的闪烁。下面给你几个实用的修复方案，既能兼容IE11，也能在现代浏览器中正常工作：

方案1：移除$nextTick，同步完成高度计算 #

IE11在处理DOM样式更新时，不需要额外等待tick就能获取正确的scrollHeight，你可以尝试把重置和设置高度的步骤合并，去掉异步等待：

resizeTextarea: function() {
    // 先重置高度为auto，立刻计算并设置scrollHeight
    this.textareaStyle.height = 'auto';
    this.setHeight();
},

setHeight: function() {
    var scrollHeight = this.$refs.input.scrollHeight;
    // 统一赋值逻辑，避免重复操作
    this.textareaStyle.height = scrollHeight + 'px';
}

这样高度的重置与设置会在同一个渲染周期内完成，IE11就不会渲染出中间的auto状态，自然也就不会有闪烁了。

方案2：用隐藏克隆元素提前计算高度 #

如果方案1还是存在问题，你可以创建一个和目标textarea样式完全一致的隐藏元素，用它来计算高度，避免直接修改原textarea的高度导致闪烁：

1. 在模板中添加隐藏的克隆textarea：

<textarea ref="clone" v-model="message" style="position: absolute; top: -9999px; left: -9999px; width: 100%;" aria-hidden="true"></textarea>
<textarea v-model="message" ref="input" :style="textareaStyle"></textarea>

2. 修改resize方法，借助克隆元素计算高度：

resizeTextarea: function() {
    var cloneEl = this.$refs.clone;
    // 克隆元素会通过v-model自动同步内容，直接取它的scrollHeight即可
    this.textareaStyle.height = cloneEl.scrollHeight + 'px';
}

这种方法完全不需要修改原textarea的高度为auto，从根源上避免了闪烁问题，同时兼容所有浏览器。

方案3：优化原有的$nextTick实现（若必须保留） #

如果你因为某些业务限制必须使用$nextTick，可以尝试在设置auto高度前先隐藏元素，避免中间状态被渲染：

resizeTextarea: function() {
    // 先隐藏元素，避免中间状态被看到
    this.textareaStyle.visibility = 'hidden';
    this.textareaStyle.height = 'auto';
    this.$nextTick(function() {
        this.setHeight();
        // 恢复元素可见性
        this.textareaStyle.visibility = 'visible';
    }.bind(this));
},

setHeight: function() {
    this.textareaStyle.height = this.$refs.input.scrollHeight + 'px';
}

不过这种方法可能会导致textarea短暂消失，体验不如前两种方案，仅作为备选。

另外你提到用autosize包也有同样问题，大概率是因为这个包的实现逻辑和你的类似，也依赖了异步DOM更新，所以换成上面的同步计算或克隆元素的方法应该能解决问题。

内容的提问来源于stack exchange，提问作者Thomas Ferro