vue项目常见问题

• 1.监听路由参数的变化--created 和 watch的区别

相同路由重复加载的时候，不会触发created组件生命周期里面的方法；路由的params参数回去方法写在created里面就不会再触发。

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

 

2.VUE中的异步函数this指向问题

ES6中的箭头函数 ‘=>’内部this是词法作用域，由上下文确定（也就是由外层调用者vue来确定）

methods: {
  loginAction(formName) {
    this.$axios.post('http://127.0.0.1/u/subLogin', {
      username: this.username,
      password: this.password
    })
      .then(function(response){
        console.log(this); //这里 this = undefined
      })
      .catch((error)=> {
        console.log(error); //箭头函数"=>"使this指向vue
      });
  }
}

  // jq 中可使用bind() 来改变匿名函数的this指向      
//hack写法 var  _this = this
loginAction(formName) {
  var _this= this;
  this.$axios.post("...")
    .then(function(response){
      console.log(_this); //这里 _this 指向vue
   })
}

3.VUE组件销毁时事件的清除-- beforeDestroy

   vue中一些事件（setInterval）在路由跳转后，会继续执行，严重损耗内存

  

//组件销毁前执行的钩子函数，跟其他生命周期钩子函数的用法相同。   
beforeDestroy(){         
  //把setInterval()定时器赋值给this实例，然后就可以像下面这么停止。        
  clearInterval(this.intervalId);   
}

4.vue滚动行为，进入一个新的路由页面返回页面顶部

   

cosnt router = new VueRouter({
  routers: [...],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      // 1. 返回savedPosition,在按下后退/前进 按钮时，就会像浏览器的原生表现那样
      return savedPosition
    } else {
      const position = {}
      // 2. 模拟滚动到锚点的行为
      if (to.hash) {
        position.selector = to.hash
      }
      // 3. 如果meta中有scrollTop
      if (to.matched.some(m=>m.meta.scrollToTop)) {
        position.x = 0
        position.y = 0
      }
      // 4. 与keepAlive结合， 保存停留位置
      if (from.meta.keepAlive) {
        from.meta.savedPosition = document.body.scrollTop
        position.x = 0
        position.y = to.meta.savedPosition || 0
      }
      // return 期望滚动到哪个位置
      return position
    }
  }
})

5.vue的路由操作

   常见的路由操作有 beforeEach（路由全局守卫）、afterEach（全局后置钩子）、beforeEnter（路由独享的守卫）、beforeRouteEnter（组件内守卫）、beforeRouteUpdate（组件内守卫）、beforeRouteLeave（组件内守卫）

const beforeEach = (to, from, next) => {
      if (to.name === 'login') {
      // 如果已登录且当前要访问login页面则自动跳转到首页
      Message('您已登录，自动跳转至首页！')
      next({name: 'home'})
    } else {
      // 如果已登录则默认可以访问任何页面
      next()
    }
}

6.v-once组件渲染

    只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能

// 当修改input框的值时，使用了v-once指令的p元素不会随之改变，而第二个p元素时可以随之改变的
<div id="app">    
  <p v-once>{{msg}}</p>  //msg不会改变    
  <p>{{msg}}</p>    
  <p> 
       <input type="text" v-model = "msg" name=""> 
  </p> 
</div>  
<script>      
 let vm = new Vue({ 
       el : '#app', 
       data : {  
        msg : "hello"  
       }      
  }); 
</script>

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

 

// 配置 config.js下面的proxyTable对象
proxyTable: {
  '/api': { // 用/api 代替 http://192.168.3.2:8888
    target: 'http://192.168.3.2:8888',
    changeOrigin: true
  }}

// 发送request请求
axios.get('/api/page')//按代理配置 匹配到/api就代理到目标target地址
  .then((res) => {
    console.log(res)// 数据完全拿得到  配置成功
    this.newsList = res.data
  }, (err) => {
    console.log(err)
  })