发表于: 2019-11-28 23:17:52

1 1109


今日完成的事

        完成消息模块

明日计划的事

       开始后台模块调试

收获

       使用vuex修改state时,有两种方式:

可以直接使用 this.$store.state.变量 = xxx;

this.$store.dispatch(actionType, payload) 

    或者:  this.$store.commit(commitType, payload)

异同点

  共同点: 能够修改state里的变量,并且是响应式的(能触发视图更新)

  不同点:

      若将vue创建 store 的时候传入 strict: true, 开启严格模式,那么任何修改state的操作,只要不经过

      mutation的函数,vue就会  throw error :    [vuex] Do not mutate vuex store state outside mutation handlers。

 使用dispatch 和 commit的区别在于,前者是异步操作,后者是同步操作,所以 一般情况下,推荐直接使用commit,

 即 this.$store.commit(commitType, payload),以防异步操作会带来的延迟问题。

 vuex能够记录每一次state的变化记录,保存状态快照,实现时间漫游/回滚之类的操作。

     (实际本人未用到,暂时未遇到使用该特性的需求)

  

  结论: 官方推荐最好设置严格模式,并且每次都要commit来修改state,而不能直接修改state,以便于调试等。


阻塞和非阻塞关注的是程序在等待调用结果(消息,返回值)时的状态.阻塞调用是指调用结果返回之前,当前线程会被挂起。调用线程只有在得到结果之后才会返回。非阻塞调用指在不能立刻得到结果之前,该调用不会阻塞当前线程。

还是上面的例子,你打电话问书店老板有没有《分布式系统》这本书,你如果是阻塞式调用,你会一直把自己“挂起”,直到得到这本书有没有的结果,如果是非阻塞式调用,你不管老板有没有告诉你,你自己先一边去玩了, 当然你也要偶尔过几分钟check一下老板有没有返回结果。

在这里阻塞与非阻塞与是否同步异步无关。跟老板通过什么方式回答你结果无关。


keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在v页面渲染完毕后不会被渲染成一个DOM元素


当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行

被包裹在keep-alive中的组件的状态将会被保留,例如我们将某个列表类组件内容滑动到第100条位置,那么我们在切换到一个组件后再次切换回到该组件,该组件的位置状态依旧会保持在第100条列表处


有的产品可能会要求在每一次进入一个组件时页面的初始位置都是保持在顶部的,这里可以利用Vue中的滚动行为,但是前提是你是HTML5 history模式

我们在创建一个router实例的时候,可以提供一个scrollBehavior方法,该方法会在用户切换路由时触发



返回列表 返回列表
评论

    分享到