Vue使用中遇到问题汇总（三）

一、后台session过时前端跳转到登陆页面

　　axios 拦截器 能够拦截请求和返回，对于失效的状况后端能够返回一个状态码，如401， 使用axios拦截时判断是401，则跳转到指定页面，如login。本人项目中开发还没定接口规范，后端返回的就是success：true/false

axios.interceptors.response.use((response) => { if (response.data.success === false) { router.push('/login') message({ message:'会话失效，请从新登录', type:'error' }) return response } else { return response } }, (error) => { return Promise.reject(error) })

二、定义全局函数或变量

　　许多时候咱们须要定义一些全局函数或变量，来处理一些频繁的操做（这里拿 AJAX 的异常处理举例说明）。可是在 Vue 中，每个单文件组件都有一个独立的上下文（this）。一般在异常处理中，须要在视图上有所体现，这个时候咱们就须要访问 this 对象，可是全局函数的上下文一般是 window，这时候就须要一些特殊处理了。

　　简单粗暴型：

　　最简单的方法就是直接在 window 对象上定义一个全局方法，在组件内使用的时候用 bind、call 或 apply 来改变上下文。

　　定义一个全局异常处理方法：

// errHandler.js
window.errHandler = function () { // 不能使用箭头函数
  if (err.code && err.code !== 200) { this.$store.commit('err', true) } else { // ...
 } } //在入口文件中导入： // src/main.js
import 'errHandler.js'

//在组件中使用： // xxx.vue
export default { created () { this.errHandler = window.errHandler.bind(this)//绑定this
 }, method: { getXXX () { this.$http.get('xxx/xx').then(({ body: result }) => { if (result.code === 200) { // ...
        } else { this.errHandler(result) } }).catch(this.errHandler) } } }

　　优雅安全型作法：

　　在大型多人协做的项目中，污染 window 对象仍是不太稳当的。特别是一些比较有我的特点的全局方法（可能在你写的组件中几乎到处用到，可是对于其余人来讲可能并不须要）。这时候推荐写一个模块，更优雅安全，也比较天然，惟一不足之处就是每一个须要使用该函数或方法的组件都须要进行导入。好比我常常把一些公共的方法写在utils里面，若是哪一个组件须要就直接导入方法使用便可，推荐这种方式，前面介绍只是一个思路引子而已。

三、setInterval路由跳转继续运行并无及时进行销毁

　　好比一些弹幕，走马灯文字，这类须要定时调用的，路由跳转以后，由于组件已经销毁了，可是setInterval尚未销毁，还在继续后台调用，控制台会不断报错，若是运算量大的话，没法及时清除，会致使严重的页面卡顿。

　　解决方案：在组件生命周期beforeDestroy中止setInterval

beforeDestory() { clearInterval(this.timer); MessageBox.close() }

四、图片验证码，视频等资源，浏览器自动解析

<el-dialog class="dialogStyle" center top="0" custom-class="vertical-horizontal" title="查看录像" :visible.sync="videoShow" width="70%">
    <video controls>
        <source :src="videoApi" type="video/mp4">
    </video>
</el-dialog>

//查看录像
viewVideo(row){ this.videoShow = true
    this.videoApi = "/api/up/playVideo?video_path=" + row.video_path //videoApi 直接给接口，及传参便可 
}

五、ES6 import 引用问题

　　在 ES6 中，模块系统的导入与导出采用的是引用导出与导入（非简单数据类型），也就是说，若是在一个模块中定义了一个对象并导出，在其余模块中导入使用时，导入的实际上是一个变量引用（指针），若是修改了对象中的属性，会影响到其余模块的使用。

　　一般状况下，系统体量不大时，咱们可使用 JSON.parse(JSON.stringify(str)) 简单粗暴地来生成一个全新的深度拷贝的 数据对象。不过当组件较多、数据对象复用程度较高时，很明显会产生性能问题，这时咱们能够考虑使用 Immutable.js。

　　鉴于这个缘由，进行复杂数据类型的导出时，须要注意多个组件导入同一个数据对象时修改数据后可能产生的问题。

　　此外，模块定义变量或函数时即使使用 let 而不是 const，在导入使用时都会变成只读，不能从新赋值，效果等同于用 const 声明。

六、图片上传与预览

　　问题描述： 有时候可能会有这样的需求，须要经过<input type="file">标签上传一个头像，而后在特定的位置预览头像。

　　解决方法： 预览 （1）添加一个<img :src="image">标签，图片路径绑定实例数据 （2）给<input type="file">添加一个事件@change="onFileChange"，（3）onFileChange方法以下：

onFileChange: function(){ if (typeof FileReader == 'undefined') { console.log('failed'); return false; } var file = document.getElementById('file').files[0]; var reader = new FileReader(); reader.readAsDataURL(file); var vm = this; reader.onload = function(e) { vm.image = e.target.result; } }

七、vue 滚动行为用法，进入路由须要滚动到浏览器底部、头部等等

　　使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像从新加载页面那样。 vue-router 能作到，并且更好，它让你能够自定义路由切换时页面如何滚动。 注意：这个功能只在

const router = new VueRouter({ 　　mode: 'history', 　　scrollBehavior (to, from, savedPosition) { 　　　　if (savedPosition) { //若是savedPosition存在，滚动条会自动跳到记录的值的地方
　　　　　　return savedPosition 　　　　} else{ 　　　　　　return { x: 0, y: 0}//savedPosition也是一个记录x轴和y轴位置的对象
　　　　} 　　}， 　　routes: [...] })

八、实现vue路由拦截浏览器的需求，进行一系列操做，如草稿保存等等

　　为了防止用户失误点错关闭按钮等等，致使没有保存已输入的信息(关键信息)。

　　解决方法：在beforeRouteLeave钩子中执行相应操做

beforeRouteLeave (to, from, next) { 　　if(用户已经输入信息){ //出现弹窗提醒保存草稿，或者自动后台为其保存
　　}else{ next(true);//用户离开
　　} }

九、v-once 只渲染元素和组件一次，优化更新渲染性能

　　v-once 这个指令相信你们用的不多，不过我的感受仍是挺实用的！

　　只渲染元素和组件一次。随后的从新渲染，元素/组件及其全部的子节点将被视为静态内容并跳过。这能够用于优化更新性能。

十、关于在vue中如何操做DOM元素。

　　咱们都知道vue框架中咱们通常操做的都是数据，那么假如咱们要操做dom元素使用什么方法呢？下面就来介绍一下！

　　假若有如下元素，咱们要获取这个h2元素的文本，须要给此元素添加ref属性，并赋予名字。

<h2 ref='foo'>我是ref的值</h2>

　　接下来就可使用这个方法获取到它的文本（注意是this.$refs不是this.$ref）：

console.log(this.$refs.foo.innerHTML)

//如何改变h2中的文本呢？
this.$refs.foo.innerHTML='我是新值'

　　这样就能够和之前同样，轻松的操做dom元素了，可是vue仍是以操做数据为核心，因此建议尽可能少的使用以上方法。

十一、element的tooltip修改默认样式问题

　　经过使用tooltip的popper-class属性设置自定义class，可是发如今本组件给class设置样式会无效，最后发现tooltip生成的元素是在最外层，因此只能把class设置的样式移到App.vue，样式生效了

.el-tooltip__popper.is-light.tooltipStyle{ border 1px solid #eee width 80px word-break break-all }