关于《5-7 购物车 sticky 组件》中的组件的fold属性传值问题（bug处理的讲解）不明白，求解老师

Question

你好，黄老师。第5章第7小结，就是《5-7 购物车 sticky 组件》有个问题的处理，始终不得其解。看了几遍，代码也敲了（跟着视频），执行结果对的，毕竟是照搬课程的代码。但根据程序的流程和vue的知识，自己始终不能理解。在这里还是特别请您解释和讲解一下。该小节中的最后一个bug的解决。您讲到是因为“传递给sticky组件的fold属性值变化后没有赋值给listFold”造成，并且通过使用watch，用watch侦听了fold属性的改变，将新值赋值给this.listFold来解决了。（因为程序逻辑中时判断this.listFold）
这里我一直无法理解：
1、程序逻辑中，其实是要一直判断this.listFold（讲课中您也讲了），而且在处理函数中，也一直是用this.listFold来修改值等处理（见截图或引用代码），这里的程序中，并没有去改变fold属性值呀？！所以fold属性值为何会改变，谁改变的？我一直无法理解。请解释。

toggleList() {
	if (this.listFold) { //此处判断listFold
		if (!this.totalCount) {
			return ''
		} else {
			this.listFold = false //此处修改的是listFold
			this._showShopCartList()
			this._showShopCartSticky()
		}
	} else {
		this.listFold = true //此处修改的是listFold
		this._hideShopCartList()
	}

2、之所以建立fold这个属性，目的就是为了列表组件的状态给sticky组件，而这个属性在传递时，见代码见截图。“ fold: this.listFold ”，还是通过this.listFold，而且这是传值的时候了，也就是创建sticky组件时，传递。只有这一刻，是给fold赋值。其他任何后，都没有改变fold的值呀，所以还是不理解fold的改变来自何处，从哪里改变。
而且属性传递到组件后，组件内部(ShopCart)，是在data初始化时，将该属性赋值给this.listFold了。还是通过listFold来处理了。fold除了传值，始终没有看到fold的修改和变化，在何时会产生里修改和变化？

_showShopCartSticky() {
	this.shopCartStickyComp = this.shopCartStickyComp || this.$createShopCartSticky({
		$props: {
			selectFoods: 'selectFoods',
			deliveryPrice: 'deliveryPrice',
			minPrice: 'minPrice',
			fold: 'listFold',  //此处给fold赋值listFold，属性传值。但这也是创建实例时，其它时候都未修改过fold值。且单例模式只创建一次吧，之后应该就是直接引用实例。不会重复创建实例吧？
			list: this.shopCartListComp
		}
	})
	this.shopCartStickyComp.show()
}

3、我们sticky组件的创建，是通过creatApi方式创建和使用，而且是单例模式。但是在您没有解决这个bug的时候，就是没有增加watch侦听代码的时候，我也不理解为何sticky组件会被重复创建，代码是会判断该实例是否存在呀，如果存在就不执行create呀，为何界面上确实是看到重复创建该元素了。我也始终无法理解。见单例代码：
this.shopCartStickyComp = this.shopCartStickyComp || this.$createShopCartSticky({…})
当然，在使用watch侦听后，该实例是正常的，始终只会创建一个。但这是程序中参数的赋值更新问题，与单例模式创建实例无关呀，在使用watch侦听并赋值fold之前，单例模式为何无效呢？！
4、最后，在观察组件的实际使用时，自己也无法理解的值的变化。因为在操作Sticky组件时，我们会在list组件关闭后，也同时隐藏Sticky组件的，这时如果再单击购物车组件，则是shopCart自己了，而不是它的Sticky了。所以，组件是有两个：一个是组件shopCart自己，一个是它的Sticky组件。这也就是两个实例。那么一样的，this.listFold也是应该有两个，就是分别是shopCart有，Sticky组件也有。所以在单击购物车组件时，在不同的时刻，单击各自的组件时，修改的this.listFold，也应该是不同实例的，即修改的不同组件的this.listFold。但我通过调试打印出来的this.listFold值。值的变化，不是很对，自己也无法理解。
当然，我估计前面3个问题，我就没能理解，所以，第4个问题也自然造成自己无法完全读懂吧。
所以，还请黄老师，着重回答我的前3个问题的疑问。十分感谢老师！
部分代码截图如下（其实代码都是视频里照搬的）：



再次说明：程序执行都没问题，也都是照搬视频的。关键是自己无法理解，也看了好几遍老师讲解了。仍旧无法理解，请老师解疑。感谢！

Answer 1

ustbhuangyi 2020-06-11 23:06:56

fold 是组件的 Prop

这里的 fold 是响应式的也就是 listFold 改变了那么传入到子组件的 fold 就会改变。

对于 ShopCartSticky 组件而言最开始的 fold 值传入的是 false然后 data 中的 listFold 根据 fold 计算是 false然后执行 toggleList 也是正常的listFold 设置为 true。如果我不加 watch 的话对于 ShopCartSticky 来说这个 listFold 就永远为 true 了因为 data 只计算一次。

之后你点击 ShopCart 组件然后执行 toggleList会把 shopCart 的 listFold 再次设置为 false由于我们说的图中 fold 的 Prop 是响应式的传递给 ShopCartSticky 的 fold 也是为 false因此我们只要加了 watch fold就有机会去修改 ShopCartSticky 的 listFold让它从 true 变成 false这样整个逻辑才能正常跑通。

• 提问者 慕容6332229 #1

  非常感谢！此处我终于解开困惑了，的确！响应式的改变的！

• 提问者 慕容6332229 #2

  而且，我通过再分析，也解决了，我问题的3、4疑问，也解惑了！
  问题3的解惑：虽然有shopCart和它的Sticky两个组件，有两套他们自己的this.listFold，但是在单击关闭隐藏listComp列表组件时，做了判断会调用父级的listComp的hide方法，且该方法同时$emit出去了一个方法，这时又改变了shopCart的this.listFold。解惑了！这样的话，shopCart和Sticky组件的各自的this.listFold始终是保持一致的。
  问题4的解惑：如果不调用watch方法来侦听，则this.shopCartStickyComp的创建时，即使使用里缓存机制，但也还会再创建新的，因为此时单击的对象是Sticky了，Sticky中，是没有this.Sticky对象自己的，所以又会再创建新的出来。完全理解了！
  谢谢老师！这一节的内容，我真的是觉得很“绕”呢！一不小心就被绕进去了！

• ustbhuangyi 回复 提问者 慕容6332229 #3

  是有点绕，如果你能想到更好的办法来解决这个场景就更棒了~