关于sticky的问题

Question

黄老您好。
首先这里的逻辑是真的有点绕呀。。我看两遍，局部重复看了好几遍。
有个地方脑袋卡住了。关于watch那里，也就是5-7节的最后三分钟左右那里。以下是我理解的逻辑描述：
此时存在的bug是点了头两次shop-cart那里是正常的，从第三次点击起就越点越深了。
点击事件是这样的：

toggleList() {
      if (this.listFold) {
        if (!this.totalCount) {
          return
        }
        this.listFold = false
        this._showShopCartList()
        this._showShopCartSticky()
      } else {
        this.listFold = true
        this._hideShopCartList()
      }
    }

一开始listFold是从props里的fold在data()中赋予的。

• 第一次点击shop-cart区域的时候，点击的是真正的shop-cart组件区域，此时listFold值为true，执行点击事件toggleList让this.listFold = false并且显示出list和sticky，此时传入sticky的fold值为false。
• 第二次点击shop-cart区域的时候，点击的是已经show出来的sticky组件对应的shop-cart2号区域了（2号作为一个代称）。传入2号的fold为false，即2号中的listFold一开始也为false。那么当这第二次点击的时候，点击事件toggleList执行的是

	this.listFold = true
	this._hideShopCartList()
	// 即此时的listFold变为true，然后hide掉list，并且触发js动画钩子发送事件销毁掉了sticky组件。

• 第三次点击的时候，点击的也是真正的shop-cart组件区域，目前为止没错吧？然后此时的listFold应该是true吧？因为在第二次点击的时候，用createAPI调用sticky组件，传入的props的 fold: 'listFold'这里是字符串，即响应式的变化。那么在第二次点击时listFold变为了true，第三次点击真正的shop-cart时，listFold也应该是true。那么第三次点击后，就执行的是：

	if (this.listFold) {
        if (!this.totalCount) {
          return
        }
        this.listFold = false
        this._showShopCartList()
        this._showShopCartSticky()

此时listFold变为false，再show出list和sticky，传入sticky的props的fold: 'listFold'这个fold也应该是false嘛？接着第四次点击的时候不应该就这样正常地重复第二次点击时那种场景嘛。。为啥会从此时越点越深呢？

我不明白黄老您说的 “listFold在data()中被this.fold（props传的）初始化一次后，之后listFold值与this.fold再无关联。”这句话和本次的逻辑有什么关联。。所以我不懂此处为什么出现这个bug和为什么要watch fold，那应该是我逻辑错了。。请问我逻辑错在哪儿呢黄老？

Answer 1

ustbhuangyi 2019-03-21 09:28:00

watch fold 是为了给  sticky 组件，也就是你说的 shop-cart2 用的，因为 fold 是 prop，但是在 toggleList 函数中判断的是 listFold。所以你每次改变的  shop-cart2 组件的 fold prop 的时候，也要去更新  shop-cart2 的 listFold 值，这就通过 watch 实现的。

• 提问者 qq_有心人_10 #1

  懂了，谢谢黄老～