优化用户体验

Posted 2020-12-10 xiaomg

1、监听路由执行对应事件

watch: {

  ‘$route‘:‘getPath‘

},

methods: {

  getPath(){

    console.log(this.$route.path);

  }

}

2、vue中的watch监听

 

1>、监听 ‘单个值’

data() {
    return {
        text: ‘‘ // 该值可以是字符串、数字、布尔、数组等   
    }
},
watch: {
    text(newValue, oldValue) { // 其中 newValue 是监听改变后的值，oldValue 是改变之前的值
        console.log(newValue) // 可以在此处执行对应的语句或函数
    }
}

　

2>、监听 ‘对象’

watch: {
　　obj: {
　　　　handler(newValue, oldValue) {
　　　　　　console.log(newValue)
　　　　}
　　}
},
mounted: {
    this.obj = {
        name: ‘456‘,
        age: ‘456‘
    }
}

　这样监听只是对象，对于对象的监听，默认情况下其实是监听该对象的引用，比如在此处对 obj 重新赋值，才会被监听到，才能调用 handler 函数　

• 监听对象中的某个属性
• 如果想对对象中的某个属性进行监听，deep 属性就派上用场了  deep 的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。

• watch: {
  　　obj: {
  　　　　handler(newValue, oldValue) {
  　　　　　　console.log(newValue)
  　　　　},
         deep: true 
  　　}
  }　　

3>、监听对象的属性值

字符串形式监听

watch: {
　　‘obj.a‘: {
　　　　handler(newValue, oldValue) {
　　　　　　console.log(newValue)
　　　　}
　　}
}

使用计算属性 computed 作为中间层

computed: {
　　age() {
　　　　return this.obj.age
　　}
},
watch: {
　　age(newValue, oldValue) {
　　　　console.log(newValue)
　　}
}

3、搜狗 Ie浏览器，表单输入框中会自动注入登录时记住的账号密码，

给 input 输入框， 加上一个 readonly 得属性，使用 settimeout ，

在一定时间间隔后，再将这个readonly 属性移除即可。

settimeout 得时间间隔值，需要根据需求调整。

如下：

<input readonly="true" id="inputArea"></input>
    settimeout(function(){
        document.getElementById("inputArea").removeAttribute(‘readonly‘);
    },800)    

亲测有效！
4、账号登录异常之后，多个网络请求出错，会弹出多个会话框，如何解决：

　　this.$router.push({path:‘/‘})

        错误码分开处理

5、vue项目使用过程中，出现Loading chunk {n} failed问题，导致页面卡死。　

偶然一次发现，项目更新迭代开发时上传测试环境后就会出现，当我们打包后某些js文件会改变，再上传到服务器后，由于浏览器缓存问题，用户在访问的时候还会再访问之前的js文件。就会出现Loading chunk {n} failed这种报错，

思考到了路由懒加载的情况下，访问当前应用进行路由跳转时都是实时动态的从服务器上拉取相应模块的js文件，这时候我们改完代码打包上线，js文件名更换了，路由跳转的时候由于页面并未刷新，所以还是访问的原来的文件名，这是就会出现找不到模块的错误。

解决办法：

我们需要给路由加一个错误的回调方法，在监听到路由报错之后进行页面刷新操作，这时就可以获取到当前最新的代码来解决报错问题。

/* 路由异常错误处理，尝试解析一个异步组件时发生错误，重新渲染目标页面 */
router.onError((error) => {
　　const pattern = /Loading chunk (d)+ failed/g;
　　const isChunkLoadFailed = error.message.match(pattern);
　　const targetPath = router.history.pending.fullPath;
　　if (isChunkLoadFailed) {
　　router.replace(targetPath);
　　}
});