近期Vue项目中遇到问题的一些整理 2020-12-18

最近做前端遇到了不少问题，总结一下，以作备忘。

样式部分

本前端一共就两个页面，以下分别用页面A，页面B（在新窗口打开）代替。
页面A有这样的想法：1、背景图要占据整个屏幕，并随着浏览器的缩放而缩放，在页面中内容较多时出现滚动效果，但是背景图不要动。2、文本框占据了页面的主要部分，距离上方距离固定，距离下方距离固定，但是有最小高度限制（不可无限压缩）。
整个背景图片的css如下

{
  position:absolute;
  background:url(...) fixed no-repeat;
  background-size:cover;
  min-height:100%;
  min-width:100%;
}

文本框和外层的div关系如下，

height:100%这属性很邪门，鑫神的《CSS世界》里也说了，对于height属性，假如父元素的height为auto，只要子元素在文档流中，其百分比值将被完全忽略。所以在这里我必须给text_area设定一个确定的高度，但是浏览器会缩放的，怎么设计高度才能满足第二个想法呢？
在这里，就用js了（其实后来想想用flex是不是就可以搞定了…），在mounted（）里，监听resize事件，执行自定义的getResize()函数，并且在mounted()里也执行一次。

getResize(){
  let textArea=document.getElementById('text_area');
  this.textAreaHeight=document.body.clientHeight-200;
  textArea.style.height=this.textAreaHeight.toString()+'px';
}

在这里用到了body的高度，所以在App.vue里要设置

html,body{
  height:100%;
}

数据处理部分

然后是从页面A向页面B传递数据的问题，页面B在新窗口打开，这带来了一系列的问题，不过一开始把思路局限为传递，确实有问题。
试过的方法有：
1、通过router，但是很可惜，通过params是无法把数据带到新窗口的，通过query是可以的，但是由于传递的字符串可能特别长，放在query是不合适的；
2、通过表单提交数据，一开始看了不少关于这方面的博客，但是你们这些老哥貌似都是往一个已存在的页面上提交数据啊喂！我的页面B都没开发出来，提交个P啊！
3、通过vuex存储，A存储进去，B拿出来，但试过之后发现不可行，A确实存进去了，但是B再过去拿的时候还是空的。可能是由于vue本来做的就是SPA的原因？
4、麻烦后台，在页面A存储进后台，后台返回id，B根据id再去后台请求数据。但是后台为了防止数据无限增长，在请求过后，就会把这个数据删除掉，这样页面B就没法刷新了。

最后的解决方案：生成随机id，存储进localStorage，在页面B获取，在关闭页面B的时候清除该id对应的内容，但是刷新的时候不要清除，而且在关闭A时不要清除。
这样就有个问题，怎么判断这个页面是在刷新还是关闭？
这篇博客有解答，利用时间差判断刷新还是关闭，用的方法还是很巧妙的。

其实这样还是有问题的，就是用户在打开了B页面之后，清空了浏览器缓存，然后刷新了B页面，这样就会出bug（等我以后再发现新技术了再来修复…)

在页面B还抽取了一个小组件，算是加深了对组件化的理解，也感受到了组件化的强大。