htmledit_views">

改老项目bug时，发现父组件数据更新后通过属性传递给子组件，子组件页面未更新；查看代码原来是使用shallowRef定义的属性导致的；这里记录一下

子组件如下

html" title=javascript>javascript"><template>
<ul><li v-for="b in filterList" :key="b.text" v-text="b.text" @click="click(b)"></li>
</ul>
</template><script setup>
const props = defineProps({list: {type: Array,default: []})
})
const filterList = computed(() => props.list.filter(item => item.auth))
</script>

父组件定义shallowRef，并通过push增加数据

html" title=javascript>javascript"><template><child :list="arr" />
</template><script setup>
const arr = shallowRef([])
const getData = async () => {// 调用接口const data = await getPageList()data.forEach((item) => {// 通过push增加数据arr.value.push(item)})
}
</script>

由于arr定义为shallowRef，只有arr.value具有响应式，通过push增加数据并不会触发响应式，故页面未更新。

解决办法：

1、使用ref 改为深层响应式；

2、使用 arr.value.push 方法后，通过 triggerRef(arr)强制触发；

3、先定义一个变量push数据，之后将这个变量赋值给arr.value；

html" title=javascript>javascript"><script setup>
const arr = shallowRef([])
const getData = async () => {const data = await getPageList()// 定义临时变量const tempList = []data.forEach((item) => {tempList .push(item)})// 赋值arr.value = tempList
}
</script>

4、使用reactive或html#shallowreactive" rel="nofollow" title="shallowReactive">