v-for="(item, index) in displayOnTheRightData.slice((pageInfo.pageCurrent - 1) * pageInfo.pageSize,pageInfo.pageCurrent * pageInfo.pageSize)" 在vue3中，pageInfo初始值是通过计算属性获取，在另一个地方对pageInfo的值进行修改后，页面上渲染的数据没有变化

在Vue 3中使用计算属性的方式与Vue 2略有不同。在Vue 3中，可以使用`computed`函数来创建计算属性。在创建计算属性时，需要使用`ref`或`reactive`将需要计算的数据包裹起来，以便Vue能够跟踪数据的变化。

如果您在另一个地方对`pageInfo`的值进行修改后，页面上渲染的数据没有变化，可能是因为您没有正确地使用`ref`或`reactive`来包装`pageInfo`。请确保在计算属性中使用`ref`或`reactive`来包装需要计算的数据，并确保在修改`pageInfo`时，使用`ref`或`reactive`的`value`属性来访问和修改数据。

此外，还需要确保在修改`pageInfo`时，您使用的是Vue的响应式API，例如`Vue.set()`或`this.$set()`。这样Vue才能够正确地检测到数据的变化，并重新计算计算属性以更新页面上的数据。

相关问题

v-for="(item, index) in displayOnTheRightData.slice((pageInfo.pageCurrent - 1) * pageInfo.pageSize,pageInfo.pageCurrent * pageInfo.pageSize)"这样子写后，为什么当pageInfo中的值改变后，渲染的数据没有变化？

这是因为 Vue 的响应式系统是基于依赖追踪的。在你的代码中，v-for 的表达式依赖于 `displayOnTheRightData` 数组、`pageInfo.pageCurrent` 和 `pageInfo.pageSize` 三个变量。只有当这些变量的值发生改变时，Vue 才会重新计算表达式，并更新渲染结果。

如果你修改了 `pageInfo` 对象中的属性值，但是没有触发 Vue 响应式系统的更新，则渲染结果是不会更新的。这可能是因为 `pageInfo` 对象是通过对象引用传递给子组件的，而你修改 `pageInfo` 的属性值时，没有使用 Vue 提供的响应式方法（如 `Vue.set` 或 `this.$set`）。这种情况下，Vue 无法检测到 `pageInfo` 对象的属性值的变化，因此也不会触发更新。

为了解决这个问题，你可以使用 Vue 提供的响应式方法来修改 `pageInfo` 对象的属性值，例如：

this.$set(this.pageInfo, 'pageCurrent', 2);

或者：

Vue.set(this.pageInfo, 'pageCurrent', 2);

这样做可以确保 Vue 响应式系统能够检测到 `pageInfo` 的属性值的变化，并触发更新。