在搭建SSR服务器端渲染项目时候，遇到问题 Hydration completed but contains mismatches？字面意思就是客户端激活已完成，但是存在不匹配；若是第一次遇到这个问题，貌似还不是很懂？

　　所谓客户端激活指的是Vue在浏览器端接管由服务器发送的静态HTML,将其变为由Vue管理的动态DOM的过程，激活过后就可以进行点击事件等交互操作。

　　由于服务器已经渲染好了HTML，这样无需将其丢弃再重新创建所有的DOM元素，相反只需要"激活"这些静态的HTML。

快速解决办法：结合上面的例子在客户端挂载时条件式地渲染,由于onMounted钩子函数在服务器端不执行,这样激活前客户端生成的虚拟DOM树与服务器渲染好的静态HTML结构都不包含展示的元素，因此能够匹配成功

template>
    <table v-if="isClient">
      <tr><td>hello</td></tr>
    </table>
</template>
<script setup>
    import { ref } from 'vue'
    const isClient = ref(false)
    onMounted(() => {
      isClient.value = true
    })
</script>

导致此种问题常见情况总结：

　　　　不规范DOM结构：https://cn.vuejs.org/guide/scaling-up/ssr.html#hydration-mismatch

　　　　Teleports组件：https://cn.vuejs.org/guide/scaling-up/ssr.html#teleports