Vue持续更新烂摊子集……

加载页面刷新页面闪烁问题

vue的数据双向绑定，在页面加载时有时候会造成一定程度的页面闪烁，首先要排产代码问题和网络延迟造成的渲染问题，
然后来说一下v-cloak，v-cloak的使用方式很简单：

<div id="app" v-cloak>
    <p>{{title}}</p>
</div>

然后在样式中加入：

[v-cloak] {
    display: none !important;
}

这样添加了v-cloak的元素就不会出现闪烁问题啦。

路由拦截检测登录状态

router.beforeEach((to, from, next) => {
  let userName = localStorage.getItem('userName')
  if (to.name !== 'Login' && from.name !== 'Login') {
    if (userName === null) {
      return next({ path: '/' })//判断本地不存在用户信息跳转登录页面
    }
  }

  if (from.name === 'Login') {
    if (userName === null) {
      return next({ path: '/' })//根路由、目标路由、登录页不拦截
    }
  }
  next()
})

代码比较简单，全局注册一个路由钩子，beforeEach方法，每次路由跳转之前会执行的函数，
登录后将用户信息保存在localStorage中，找寻路由先判断本地storage。
但是现在常用的方式一般都是使用Token，在每次访问时使用token验证登录状态。

Vue使用token验证登录状态

使用token的方式一般流程就是，用户登录接口之后，后台会返一串token字符串，前端存储在本地，可以同时存储在localStorage和vuex中，每次访问后台时添加一个请求头，将token塞在里面，根据后台范蝴蝶状态码进行判断时候跳转到登录页或下一页。细节很多，简单代码理解一下：
登录保存storage很简单，然后后也要像之前的一样加一套路由钩子，
然后发送添加header：

// 添加请求拦截器，在请求头中加token
axios.interceptors.request.use(
  config => {
    if (localStorage.getItem('Authorization')) {
      config.headers.Authorization = localStorage.getItem('Authorization');//添加的header头Authorization ：从localStorage中取出名为Authorization的字符串
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  });

要注意一种情况，当后台设置了时效时，前端接收失效代码后要清楚掉本地的存贮状态

localStorage.removeItem('Authorization');

不算麻烦，理解就好。

elementUI组件 文本框回车会触发刷新表单

解决方法：

<el-form @submit.native.prevent>
  ...
</el-form>

props 属性设置多个类型

从帖子中偷学到的，感觉很灵活，
js：

export default {
  props: {
    width: {
      type: [String, Number],
      default: '100px'
    }
    // 或者这样
    // width: [String, Number]
  }
}

比如一个 上暴露了一个 width 属性，我们既可以传 100px，也可以传 100 ：

<!-- my-button.vue -->
<template>
  <button :style="computedWidth">{{ computedWidth }}</button>
</template>

<script>
  export default {
    props: {
      width: [String, Number]
    },
    computed: {
      computedWidth () {
        let o = {}
        if (typeof this.width === 'string') o.width = this.width
        if (typeof this.width === 'number') o.width = this.width + 'px'
        return o
      }
    }
  }
</script>

使用：

<!-- 在其他组件中使用 -->
<template>
  <my-button width="100px"></my-button>
  <!-- or -->
  <my-button :width="100"></my-button>
</template>

简单解释v-for中的key：index作用

其实之前做兰州电信的后台管理系统遇到过因为没加index出问题，但是决堤原因忘记了，后来有人问起来这个问题，就简单查了一下，深入理解了一下:
搬运一下例子，
没有加key的情况：

<div id="app">
    <div>
      <input type="text" v-model="name">
      <button @click="add">添加</button>
    </div>
    <ul>
      <li v-for="(item, i) in list">
        <input type="checkbox"> {{item.name}}
      </li>
    </ul>
<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        name: '',
        newId: 3,
        list: [
          { id: 1, name: '李斯' },
          { id: 2, name: '吕不韦' },
          { id: 3, name: '嬴政' }
        ]
      },
      methods: {
        add() {
         //注意这里是unshift
          this.list.unshift({ id: ++this.newId, name: this.name })
          this.name = ''
        }
      }
    });
  </script>
  </div>

当选中吕不为时，添加楠楠后选中的确是李斯，并不是我们想要的结果，我们想要的是当添加楠楠后，一种选中的是吕不为。
加key：

<li v-for="(item, i) in list" :key="item.id">
  <input type="checkbox"> {{item.name}}
</li>

原作者简书：https://www.jianshu.com/p/4bd5e745ce95

实际上key的作用是保证你的这个item在for中是唯一的，加入你有4个苹果，没加key，他们的的编号分别是1，2，3，4，你吃掉了2， 那么3就变成了2,4就变成了3，就成了1、2、3，
加入你加了key，你吃到2，那么就是1、3、4他们都是唯一的。
出现这种不加key出现问题一般都是因为要筛选活动太处理item造成的。

for循环中使用if的写法

不好意思，不推荐for循环中使用if，哈哈哈哈；
由于 v-for 和 v-if 放在同一个元素上使用会带来一些性能上的影响，官方给出的建议是在计算属性上过滤之后再进行遍历。

for循环中v-once到底怎么用

之前的v-once主要用在一些固定静态页面的渲染上和一些组件渲染上，说一下他的具体用法，简单说。

官方文档中对他的解释是：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

当让我们想的就是把它用在静态资源上，实际上文档中提到了可以给低使用率的组件也加上，但是同样的细节，官方文档又声明：再说一次，试着不要过度使用这个模式。当你需要渲染大量静态内容时，极少数的情况下它会给你带来便利，除非你非常留意渲染变慢了，不然它完全是没有必要的——再加上它在后期会带来很多困惑。例如，设想另一个开发者并不熟悉 v-once 或漏看了它在模板中，他们可能会花很多个小时去找出模板为什么无法正确更新。
所以说：v-once是用一定是要在你用来处理组件之间渲染冲突和明显的渲染缓慢下使用。