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

27次阅读

共计 683 个字符,预计需要花费 2 分钟才能阅读完成。

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)

正文完
 0