zoukankan      html  css  js  c++  java
  • Vue踩坑系列

    前言

    前端开发对于vue的使用已经越来越多,它的优点就不做介绍了, 本篇是我对vue使用过程中遇到的问题中做的一些总结,帮助大家踩坑。如果喜欢的话可以点波赞,或者关注一下,希望本文可以帮到大家!!!

    本篇介绍的问题大概如下:

    1. 路由变化页面数据不刷新问题

    2. setTimeout/setInterval(泛指异步回掉函数的this指向)this指向改变,无法用this访问VUe实例

    3. setInterval路由跳转继续运行并没有及时进行销毁

    4. vue 滚动行为用法,进入路由需要滚动到浏览器底部 头部等等

    5. 实现vue路由拦截浏览器的需求,进行 一系列操作 草稿保存等等

    6. v-once 只渲染元素和组件一次,优化更新渲染性能

    7. vue本地代理配置 解决跨域问题,仅限于开发环境

    8. 本地开发 没有任何问题 部署服务器 就404啊这些问题

     

    1. 路由变化页面数据不刷新问题:

    出现这种情况是因为依赖路由的params参数获取写在created生命周期里面,因为路由懒加载的关系,退出页面再进入另一个文章页面并不会运行created组件生命周期,导致文章数据还是第一次进入的数据

    解决方法:watch监听路由是否变化

     watch: {
     // 方法1
      '$route' (to, from) { //监听路由是否变化
        if(this.$route.params.articleId){// 判断条件1  判断传递值的变化
          //获取文章数据
        }
      }
      //方法2
      '$route'(to, from) {
        if (to.path == "/page") {    /// 判断条件2  监听路由名 监听你从什么路由跳转过来的
           this.message = this.$route.query.msg     
        }
      }
    
    }
    

      

    2. 异步回调函数中使用this无法指向vue实例对象

    //setTimeout/setInterval ajax Promise等等
    data(){
      return{
        ...
      }
    },
    methods (){
         setTimeout(function () {   //其它几种情况相同
          console.log(this);//此时this指向并不是vue实例 导致操作的一些ma'f
        },1000);
    }

    解决方案 变量赋值和箭头函数

    var和let的区别

    //使用变量访问this实例
    let self=this;   
        setTimeout(function () {  
          console.log(self);//使用self变量访问this实例
        },1000);
    
     //箭头函数访问this实例 因为箭头函数本身没有绑定this
     setTimeout(() => { 
       console.log(this);
     }, 500);

    结语

    这篇文章只是开始,它的待续还会很长很长,希望你我坚持下去!也希望我能帮助到更多的人,当然也会让我真正沉淀一下,为了以后为了将来 一起努力如果大家有什么问题,或者需要补充的 欢迎留言!

    如果觉得文章对大家有帮助,希望大家能点赞一下或者关注一下,得到肯定的我会更加努力!~~

  • 相关阅读:
    纯CSS打造的一款简约的灰色下拉菜单
    jQuery实现选项卡Tab菜单滚动
    jQuery写淡入淡出的选项卡TAB菜单
    jquery打造一个会自动播放样子也很经典的选项卡tab
    JS+CSS类似QQ好友/黑名单的树型菜单
    【荐】CSS+JS打造简洁的滑动门TAB
    【荐】jQuery实现有动画淡出的二级折叠菜单
    鼠标经过图片由灰色变彩色
    经典的蓝色JS+CSS下拉菜单
    兄弟们,我用Portal starter kit出现如下问题?
  • 原文地址:https://www.cnblogs.com/wzy0526/p/8400568.html
Copyright © 2011-2022 走看看