vue中很少用到的点，但却很实用的点

2024年3月24日 165次阅读 来源: 听风语

1.用vue做单页应用时，当页面滚动之后，跳转到其他页面，如果跳转到的页面大于一屏的高度，该页面的滚动条不会置顶

解决方案：
在router.js底部加上如下代码

scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    return { x: 0, y: 0 }
}

2.if-else闪烁问题，初始数据为空，当created里的接口请求的数据过来之后，页面会出现dom更新的闪烁问题

解决方案：
运用组建内路由前置守卫，提前请求数据，在挂载dom前更新数据，关于路由守卫可参考路由守卫

{
  beforeRouteEnter (to, from, next) {  //next需要被主动调用，不然跳转不到该页面
    serv.test()
      .then(res => {
        next(vm => {       // 这里还无法访问到组件实例，this === undefined
          // 通过 `vm` 访问组件实例
          vm.listData = res.data.results
        })
      })
      .catch(err => {
        console.log(err)
      })
  },
  mounted () {
    console.log(this.listData) // undefind
  }
}

此路由守卫还可以用于权限拦截和页面非法跳转

3.vue数据双向绑定,数据改变后不能立马反映到视图上，在给vue data中object类型数据赋值时存在不实时显示的情况

解决方案：
见Vue.js中文官网->进阶->深入响应式原理->变化检测问题

Vue.set(vm.someObject, 'b', 2)
this.$set(this.someObject,'b',2)
    原文作者：听风语
    原文地址: https://segmentfault.com/a/1190000019714709
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞