项目面试总结

目录

1. HTML5中template标签

2. vue中template

3. 浏览器页面切换时，刷新页面。

4. vuex做角色缓存

5. 只可以输入数字的input 

---

1. HTML5中template标签

        html中template标签中内容在页面中是不显示的。但是在控制台中可以看到dom结构。就相当于display：none。

  2. vue中template

        它是可以显示template标签中的内容，但是查看后台的dom结构不存在template标签。如果template标签不放在vue实例绑定的元素内部默认里面的内容不能显示在页面上，但是查看后台dom结构存在template标签。

        注意：vue中template标签不支持v-show指令，支持v-if，v-else，v-for等指令

 3. 浏览器页面切换时，刷新页面。

           在页面初始化的时候，使用document.hidden监听浏览器是否切换。监听visibilitychange事件，当页面切换时，在判断浏览器中页面是否隐藏或显示。

注意：如果不监听visibilitychange事件，直接判断hidden==false，则会导致隐藏页面一直刷新。

function browser() {
  if (document.hidden !== undefined) {
    document.addEventListener('visibilitychange', () => {
      if (document.hidden == false) {
        setTimeout(() => {
          window.location.reload()
        }, 0)
      }
    })
  }
}

4. vuex做角色缓存

        场景：有一个需求要求在同一台电脑，多个用户登录此系统，刷新角色人员不变。

这种情况如果只是用vuex，是不能实现的。产生的原因：每次最新的用户登录，都会存储到vuex的state中，所以同时登录的话，刷新浏览器以后就会出现，用户发生了变化，变成最近一次登录的人员。

解决方法：监听浏览器的刷新事件 beforeunload或onbeforeunload两种。

（1）window.οnbefοreunlοad=function(){}

（2） window.addEventListener('beforeunload', () => {})

当浏览器刷新的时候就将store的状态进行存储。使用的是sessionStorage，loaclStorage是存储方式。

 window.addEventListener('beforeunload', () => {

      sessionStorage.setItem('__userInfo', JSON.stringify(this.$store.state.user))

    })

    if (sessionStorage.getItem('__userInfo')) {

      this.$store.state.user = JSON.parse(sessionStorage.getItem('__userInfo'))

      sessionStorage.removeItem('__userInfo')

    }

让我头大的是刚开始我想的是，在登陆成功的时候将用户信息存到本地，然后就发现了一个东西，虽然自己天天背面试题，但是实际我是不知道的。

localStorage和sessionStorage的区别，大家都应该知道。

说点应用场景：localStorage特点是永久存储在浏览器，只要用户不手动删除，将会一直存在。

sessionStorage是会话级别的存在，页面关闭则消失。

最重要的是：在浏览器打开多个页面，在一个页面存储localStorage，会发现所有页面都会显示存储的信息。而sessionStorage则对每个页面显示不同的信息，同时页面关闭信息消失。

5. 只可以输入数字的input 

<input type="number" onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"/>

css去除type=“number”的箭头。

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}