weixin_42936434的博客

分享一种开发中遇到的比较方便的表格高度自适应方案template代码<div class="page"> <div class="table_wrap"> <el-table> </el-table> </div></div>css代码将el-table设置为绝对定位，相对于父元素定位且高度100%，这样表格就会占据它父元素的全部高度。父元素的高度设置为flex:1，将根据页面的高度进行适配。.page {

动态组件可以动态切换组件的显示与隐藏。不知道渲染什么类型的组件，需要根据数据确定组件类型时，可以使用动态组件。

关于动机，无论是在工作还是面试中，都会遇到Promise的相关使用和原理，手写Promise也有助于学习设计模式以及代码设计。本文主要介绍了如何使用自己的代码去实现Promise的一些功能。以下是本篇文章正文内容// 1、默认状态 - PENDING// 2、内部维护的变量值// 存放回调try {return new Promise((resolve, reject) => { // 支持链式调用})})})} else{// 普通值。

渐进增强和优雅降级是在css3出现之后才火起来的。比如IE6等，不支持css3，但是css3的样式又特别优秀，所以在高级浏览器中应用css3样式，在低版本中保持基本功能。渐进增强和优雅降级也是一种程序开发思想，比如在vue源码中，数据更新和渲染就有运用优雅降级这一思想。

使用webpack插件webpack-dev-server 出现Cannot GET/的解决办法

为什么要有webpack构建和打包？更好的模块化管理。webpack支持模块化规范：代码分割成独立模块，并管理模块之间的依赖关系。资源打包。将js文件、css文件、图片等多个资源打包成单个或多个文件，减少请求，提高加载性能性能，且webpack支持资源压缩、优化、缓存等处理。转换和编译。如用Bable将ES6+代码转为向后兼容版本如ES5，将sass、less、stylus转为浏览器能识别的css代码，将ts转为js等。代码拆分和懒加载。

1、全局对象的数据时普通的js数据类型，不是响应式的。即全局对象数据被修改了，界面也没法做出对应的更新。2、全局对象的修改无法追踪，也就是说应用中的任何一处代码，都有机会拿到全局数据，并做出对应的修改。因此呢，很难搞清楚是哪个文件哪行代码修改了全局数据，造成bug难以追踪。3、vue是组件化的，组件的构成就像一棵树，全局数据一般从父组件一层层传递给子组件。直接从一个组件获取数据被视为一种反模式，这样很容易造成数据混乱。因此，需要一个状态管理工具。状态管理三杰：vuex、redux、mobx。

vue3+ts项目，使用store，打印store的值，显示undefined。

比如我们有自定义的Form组件、Input组件。如果Form组件想拿到Input组件中input框输入的内容，我们可以让Form这个父组件给Input子组件传值（不能直接修改子组件的props），子组件定义变量记录prop的值，子组件监听数据变化，再用传给父组件，父组件接收调用方法去修改value。vue3可以使用组件v-model去解决上述问题，从而实现组件的双向数据绑定。组件v-model其实是语法糖。

当再次请求时，客户端带上资源标识，服务端去重新计算资源标识，和客户端带过来的比较，如果相同则说明文件未修改，返回304状态码；第二种是Last-Modified，这个值记录的是资源最后的修改时间，如果修改了，则值是不一样的。在这个时间内进行再次请求，浏览器会去判断缓存是否失效，未失效的话请求本地缓存并返回资源，如果缓存失效了则再去请求服务器。使用域名的好处就是，域名便于记忆，其次，如果服务器做了负载均衡，则ip不是唯一的，ip有多个，使用DNS就可以将域名解析成对应机器的ip。强缓存的优先级大于协商缓存。

页面左侧有一列表数据，点击列表项会查对应的表格数据和表单信息（表单是根据数据配置生成的），并在右侧展示。如果数据量大，则非常卡。需要对此页面进行优化。

图片懒加载是常见的性能优化方法，在图片很多或加载图片出现网络延迟的情况下，使用懒加载可以减少网络请求、提高用户体验感。实现原理：在图片没进入可视区域前，使用默认的图片；在进入可视区域并加载好之后，再替换图片的默认src路径，展示真实图片。vue3已经封装好了v-lazy自定义指令，直接安装使用即可也可以用yarn安装3、template中使用判断图片是否进入可视区域使用的是 IntersectionObserver API ，MDN详见：https://developer.mozilla.org/z

项目用的Vue3+ElementUI+TS，要实现一个上传文件夹的功能。官网的Element-plus目前没有上传文件夹的功能，虽然支持上传多个文件，但是项目要求要带相对路径，所以需要做一个上传文件夹的功能。

使用ElementUI的文件上传组件（前端vue3、后端springboot），本地能正常上传到后台。

1、下载链接： Git（Git 主程序）https://git-scm.com/downloads根据自身电脑操作系统选择下载，默认安装，一直next就可以了。装好了，打开文件目录，右键单击“Git Bash Here”，即可弹出Git命令框。2、可根据自身需要下载图形界面图形界面操作工具，TortoiseGit： https://download.tortoisegit.org/tgit/可根据需要再下载中文语言包，安装完语言包之后，右键→TortoiseGit→setting，把languag

http的缓存机制是一种优化策略。但也会出现文件变动后浏览器没有更新的问题。综上，入口文件不缓存或采用协商缓存，其他静态资源使用强缓存，url拼接hash值或者打包时给文件名加上hash值。

你所了解的前端攻击手段有哪些，该如何预防？

组件通信在工作中很常见，但通讯的方式很多且使用场景也不同，故在此记录和总结。父组件level1，向level2传递属性a、b、c和事件getA()、getB()、getC()return {getA() {组件level2使用，接收父组件未在props和emits中定义的属性和事件return {getX() {

在开发中，也会遇到用nextTick的情况，面试中也经常考到。因此，总结了下nextTick的使用及实现原理。 {

JS是一门单线程语言，那就意味着一次只能执行一个任务且按顺序执行。如果有耗时任务，也必须等着它执行完了才能执行下一个任务。问题来了，浏览网页的时候，某个高清图片需要加载很久，那网页岂不是卡着等图片加载完才能做别的操作？显然不是这样的，JS设计者设计了一种执行机制：事件循环机制（Event Loop），以实现单线程非阻塞的方法。通过上文，了解到事件循环机制（Event Loop）是用来实现单线程非阻塞的一种机制。我们先了解下任务。