怪虫记

2023-09-02

直接在html文件中引入Vue, 样式使用不当可能引起bug

一般情况下，html文件中的内联样式是放在head中的，但是Vue用户一般使用的是脚手架项目，是在SFC中写Vue，所以可能在html中惯性在script后面写style，例如：

<html>
  <head>
     <script scr="path to vue.js"></script>
  </head>

  <body>
    <div>... </div>
     
     <script> 
       new Vue({
        mounted() {
          const bodyHeight = document.querySelector('body').clientHeight
          // 这个值可能因为style未加载出现错误
        }
       })
     </script>
     <!-- 写过sfc的用户很容易惯性这么写样式 -->
     <style></style>
  </body>

</html>

这种情况下，就会出现加载顺序的问题，在mounted的时候，去获取整个渲染的高度，是会发生错误的，因为此时style还没有加载，获取的高度是没有样式的高度，这个和加上样式的高度有可能不一样的。而在SFC中，style在script的后面也没问题，Vue编译器会把样式处理好放在head中。