每日五题（6）

1. 使一个元素水平垂直居中

文本垂直居中

text-align: center;

元素垂直居中

1. 绝对性定位，利用calc计算偏移量
   已知盒子自身宽高

<!-- css 样式 -->
<style rel="stylesheet" type="text/css">
body{margin: 0;padding: 0;}
.calc{
  position: absolute; /*绝对定位，相对祖先元素定位；另有fixed(固定定位),relative(相对定位)*/
  width: 200px;
  height: 200px;
  left:calc((100% - 200px)/2);
  top:calc((100% - 200px)/2);
}
</style>
<!-- html 结构 -->
<div class="calc">元素垂直居中</div>

2. 绝对定位，利用margin属性
   父级相对定位，子级绝对定位
   对已知宽高盒子进行自动偏移定位
   maigin: auto;

<style rel="stylesheet" type="text/css">
/* 绝对性定位 */
.div {
    width:200px;
    height:200px;
    position:absolute;
    margin: auto;
    background: skyblue;
}
</style>

margin负值属性

<style rel=“stylesheet” type=“text/css”>
.div {
    position: absolute;
    width: 200px;
    height: 200px;
    maigin-top: -100px;
    margin-left: -100px;
}
</style>

3. 绝对定位，利用transform属性
   父级相对定位，子级绝对定位
   对未知宽高的盒子进行自动偏移定位

<style rel="stylesheet" type="text/css">
.div {
    position: absolute; /* 相对定位或绝对定位均可 */ 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
}
</style>

4. Flex布局
   对未知宽高盒子，父元素需要设置高度

/* 利用 flex 布局 不需要盒子本身宽高 但需要父级盒子高度*/
.container { 
    display: flex; 
    align-items: center;/* 垂直居中 */ 
    justify-content: center; /* 水平居中 */ 
    height:100vh; /* 父元素高度需设置 */ 
} 
.container div {
    width: 200px; /* 宽高可以不设置 */ 
    height: 200px; 
    background-color: greenyellow;
}

5. table-cell布局
   不需要盒子本身宽高，父元素需要设置宽高

/* table-cell 不需要盒子本身宽高*/
.table-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 500px;
    height: 500px;
    background: pink;
    
}
.table-cell div{
    width: 200px;
    height: 200px;
    background:skyblue;
}

2. 防抖Debounce和节流Throttle

Throttle，Debounce是两种可以节省性能的编程技术，两者的目的都是为了优化性能，提供用户体验，都是基于DOM事件限制正在执行的JavaScript数量的方法。

节流会强制限制一个函数在一段时间内可以被调用的最大次数。如最多每100毫秒执行一次此函数
防抖强制一个函数在一定时间内不被调用之前不会被调用，如仅当100毫秒过去都没有被调用时才执行此函数

• debounce只有当连续事件停止一段时间后再执行一次，连续事件结束后可能只触发了一次
• throttle在连续事件过程中，每隔一段时间至少触发一次，连续事件结束后触发不止一次

/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
        }
        timer = setTimeout(fn,delay)
    }
}

function showTop  () {
    const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条位置：' + scrollTop);
}

window.onscroll = debounce(showTop,3000) // 为了方便观察效果我们取个大点的间断值，实际使用根据需要来配置

//throttle
function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           //休息时间 暂不工作
           return false 
       }
       // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}

节流典型场景：监听页面的scoll事件，或者监听鼠标的mousemove事件；让处理事件的方法执行频率减少，从而减少对应的处理开销。滚动加载、加载更多、搜索框的搜索联想功能。
防抖应用场景：搜索框搜索输入（只需用户最后一次输入完，再发送请求），手机号、邮箱验证输入检测、窗口大小resize（窗口调整完成后，再计算窗口大小，避免重复渲染）

3. v-show与v-if

相同: 都可以动态控制着dom元素的显示隐藏。当表达式结果为ture时，会占据页面位置，false不会。

区别：

• 初级渲染：v-if初始值为false时，组件不会渲染，生命周期钩子不会执行；初始值为true时，组件会进行渲染，依次执行== beforeCreate—created—beforeMount—mounted钩子==;v-show无论初始值是什么，都会进行渲染，同上依次执行。

• 控制手段：v-show控制显示隐藏是为该元素添加css- - (display: none;)，dom元素还存在；v-if显示隐藏是将dom元素整个添加或删除。

• 编译过程：v-if的显示隐藏切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单基于css切换。

v-if
false=>true 依次执行：beforeCreate—created—beforeMount—mounted
true=>false 依次执行：beforeDestory—destoryed钩子，代码销毁，不存在页面中
v-show
true=>false,为该元素添加css—display:none; 所在的标签还是生成了代码，只是没有显示而已

• 编译条件：v-if是真正的条件渲染，会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。渲染条件为假时，并不做操作。
• 性能消耗：v-show只编译一次，其实就是控制css；而v-if不停地销毁和创建，v-if有更高的切换消耗，v-show有更高的初始渲染消耗。

4. computed与watch

computed 计算属性 : 依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值。

watch 侦听器 : 更多的是观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。

5. 路由守卫

路由守卫就是在用户要进行一些操作时，需要根据用户的一些信息或数据或行为判断过后，才会同意用户进行操作。即就是进行操作的鉴权，当操作与之条件匹配时，操作成功；不匹配时，操作终止。是对路由进行权限控制。

全局路由守卫

一旦配置，作用范围就是所有的路由。

全局前置守卫

组件初始化时调用，每次路由器切换之前调用。
举例：当前在A路由组件，要切换到B路由组件，那么前置路由守卫就是在点了切换按钮，但B路由组件还没有被呈现在页面上的时候被调用。

//全局前置守卫
router.beforeEach((to,from,next) =>{
  //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
  //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
  //第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
})

全局解析守卫

beforeResolve，与beforeEach相似

全局后置守卫

组件初始化时调用，每次路由器切换之后调用。
router.afterEach((to, from) => { })

独享路由守卫

独享路由守卫是在进入组件时被调用，想对哪个路由进行权限控制就直接在其路由配置项中添加守卫，作用域也仅限于该路由。

只服务于被配置的单个路由组件。

beforeEnter(to,from,next){
  //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
  //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
  //第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
}

组件内路由守卫

当使用路由规则进入该组件或离开该组件时，就会触发组件内守卫的调用，组件内守卫的作用范围仅限于该组件。

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
  //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
  //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
  //第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
  //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
  //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
  //第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
}

一个钩子函数执行后输出的顺序：

• 全局前置守卫beforeEach
• 路由独享守卫beforeEnter
• 组件路由守卫beforeRouterEnter（此时this并不指向该组件实例）
• 全局解析守卫beforeResolve
• 全局后置守卫afterEach
• 组件生命周期beforeCreate
• 组件生命周期created
• 组件生命周期beforeMount
• 组件生命周期mounted
• 组件路由守卫beforeRouterEnter的next回调