如何在Vue3中修改嵌套数组对象中的对象属性值并确保页面正确更新？

在Vue 3中，如果需要修改嵌套数组对象中的对象属性值并确保页面正确更新，可以采用以下方法：首先，使用Vue.set()方法更新对象属性值，以确保响应性；其次，使用Vue. watch ()方法监听数组对象的变化，以便在数组对象中新增或删除对象时触发视图更新。具体实现可以参考以下代码：

<template>
  <div v-for="(item, index1) in list" :key="index1">
    <!-- 嵌套循环 -->
    <div v-for="(obj, index2) in item.objList" :key="index2">
      <input :value="obj.name" @input="changeName(index1, index2, $event)">
</template>
<script>
import { ref, watch, reactive, Vue } from "vue";
export default {
  setup() {
    const list = ref([
        id: 1,
        objList: [
          { id: 11, name: "obj1" },
          { id: 12, name: "obj2" },
        id: 2,
        objList: [
          { id: 21, name: "obj3" },
          { id: 22, name: "obj4" },
    const changeName = (i, j, event) => {
      const obj = {
        id: list.value[i].objList[j].id,
        name: event.target.value,
      Vue.set(list.value[i].objList, j, obj);
    const watchList = () => {
      watch(
        () => list.value,
        (newVal, oldVal) => {
          console.log("list changed", newVal, oldVal);
        { deep: true }
    watchList();
    return { list, changeName };
</script>
在上述代码中，我们使用了ref()方法来创建响应式数组，在changeName()方法中使用Vue.set()方法更新嵌套数组对象中的对象属性值，并引用了Vue.watch()方法监听数组对象的变化。需要注意的是，在监听数组对象变化时，需要设置deep选项为true，以便在嵌套数组对象发生变化时也能正确触发视图更新。
总之，通过使用Vue.set()方法和Vue.watch()方法，我们可以在Vue 3中修改嵌套数组对象中的对象属性值并确保页面正确更新。