如何监听 mutableStateListOf 的变化

看到别人写的一个compose的代码，作为初学很容易犯的一个错；

在viewmodel中定义个列表变量

var tabState = mutableStateListOf<ConditionFilter>()

用来存储tablist，

然后比如在网络请求等数据更新后，对这个 tabState进行内容更新，例如 

tabState.clear()
tabState.addAll(conditionFilter)

然后呢，在UI compose部分，希望通过launcher 来监听tabState的内容，触发界面变化之类的

所以在compose部分

@Composable
fun WorldTourFilterPage(){
    val tabList = viewModel.tabState
    LaunchedEffect(key1 = tabList) {
       ...//触发更新
    }
}

但是实际上呢，

1. 1.

   ​​mutableStateListOf的工作原理​​：

   • •

     它创建的是一个 SnapshotStateList

   • •

     当列表​​内容改变​​（添加/删除/修改元素）时，​​会触发依赖该状态的重组（Recomposition）​​

   • •

     但​​不会改变列表实例本身​​（引用保持不变）

2. 2.

   ​​LaunchedEffect的行为​​：

   LaunchedEffect(key1 = tabList) { ... }

   • •

     只检查 key的​​引用是否变化​​（===操作符）

   • •

     不检查列表内容的实际变化

   • •

     由于列表实例不变，所以不会重新执行

所以需要修改为

val tabList by remember {
    derivedStateOf { viewModel.tabState.toList() }
} //需要监听 tabstate list

才能触发launch effect