在服务器端和客户端渲染之后如何操作 DOM？

Question

这是我的代码（它是 Nuxt 应用程序中的 Vue 组件）：

<template>
  <div class="comment-editor" v-if="loggedIn">
    <div class="leftside">
      <!-- <client-only> -->
      <textarea
        ref="editor"
        v-model="content"
        placeholder="your comment"
      ></textarea>
      <!-- </client-only> -->
      <Message v-bind="message" />
    </div>
    <Button
      text="Publish"
      color="main"
      v-if="message.type != 'loading'"
      @click="publish"
    />
  </div>
  <div class="notLoggedIn" v-else>
    You should <nuxt-link to="/signup">register</nuxt-link> or
    <nuxt-link to="/login">log in</nuxt-link> to write comments.
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: "",
    };
  },
  mounted() {
    const tx = document.querySelector("textarea");
    fh(tx);
    tx.style.overflowY = "hidden";
    tx.addEventListener("input", function () {
      fh(this);
    });
    function fh(x) {
      while (x.style.height + "" != x.scrollHeight + "px")
        x.style.height = x.scrollHeight + "px";
    }
  },
};
</script>

您在“mounted”函数中可以看到用于动态更改文本区域的高度。当组件在客户端渲染时（即从另一个页面导航时），它可以正常工作，但应用程序在 SSR 之后崩溃（当直接使用组件打开页面时）。如何使该代码在这两种情况下都能正常工作？

Answer 1

您应该使用动态样式而不是直接的 DOM 操作。

例如，<textare :style="{ height: computedHeight }" />

见https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1

Answer 2

问题在于，当组件被安装时，最初，class="leftside" 元素不是 dom 的一部分（由于loggedIn 等于false）。解决方案是将 class="leftside" 元素和mounted() 函数移到单独的组件中。