vue3中 数据未同步

Question

vue3中 我通过传参，获取了form的值

<template>
  <el-form ref="formRef" :model="form" label-width="80px" label-position="top" label-suffix=":" size="mini">
    <el-form-item label="表头结构">
      <div>
        <!-- 标签上的右键菜单 -->
        <ContextMenu ref="contextMenu" :itemList="menuItemList" @mouseleave="onMouseLeave" v-model="menuVisible"
          @select="onMenuSelect" />
      </div>
      <div>
        <el-tree :data="form.columns" node-key="id" default-expand-all :check-strictly="true"
          :expand-on-click-node="false" @node-contextmenu="onContextMenu">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>
              {{ data.title }}
            </span>
          </span>
        </el-tree>
        <div>{{form}},1111</div>
      </div>
    </el-form-item>
  </el-form>
</template>
<script>
  import ContextMenu from "/@/components/context-menu/Index.vue";
  import { useMessage } from '/@/hooks/message';
  import { defineComponent, ref, watch } from 'vue';
  import { onMounted } from "vue";

  export default defineComponent({
    components: {
      ContextMenu,
    },
    props: {
      value: {
        type: Object,
        default: () => ({
          show: true,
          border: true,
          stripe: true,
          resizable: true,
          align: "center",
          columns: [],
          data: [],
          showSummary: false,
        })
      },
    },

    setup(props, ctx) {

      console.log(props.value.columns, "props");
      const ContextMenuRef = ref()
      let data = ref(props.value)
      const form = ref({
        columns: []
      });
      const formRef = ref()
      const menuVisible = ref(false);
      const menuItemList = ref([
        { key: "1", text: "添加同级", show: true },
        { key: "2", text: "添加子级", show: true },
        { key: "5", text: "删除节点", show: true },
        { key: "6", text: "重命名", show: true },
        { key: "8", text: "数字类", show: true },
        { key: "9", text: "文本类", show: true },
      ]);


      watch(() => props.value, (newVal) => {
        form.value = newVal;
      }, { deep: true });

我在watch里吗打印没问题，但是渲染页面就是空的

Answer 1

引自免费微信小程序：皆我百晓生

在你的 Vue3 项目中，问题出现在 Vue 实例数据更新和页面渲染同步方面。根据你给出的代码片段，问题在于你在使用 form 引用和传递的值并没有很好地同步起来。虽然你已经在 watch 里监控了 props.value 的变化，并将其更新到 form 中，但是在模板渲染的时候你需要通过表单引用（formRef）来访问表单的数据。你应该使用 formRef.value 来访问和更新表单数据。这是 Vue3 的响应式系统和组合 API 中非常关键的一点。以下是修改后的代码示例：

首先，你需要确保你的 formRef 是正确的并且被正确地绑定到模板中的表单元素上。在你的 <el-form> 标签上添加一个 ref 属性，值为 formRef，如下：

<el-form ref="formRef" :model="form" ... >

然后在你的 setup 函数中，确保 formRef 是一个响应式的引用：

const formRef = ref({}); // 确保初始化为一个空对象，因为 form 的数据会绑定到这个引用上。

接下来，你需要确保在模板中使用 formRef.value 来访问表单的数据，比如表单中的列（columns）：

<el-tree :data="formRef.value.columns" ... >

最后，在你的 watch 函数中更新 formRef.value 而不是单独的 form：

watch(() => props.value, (newVal) => {
  formRef.value = newVal; // 更新 formRef 的值而不是单独的 form 值。这将确保页面正确渲染新的数据。
}, { deep: true });

通过这样的修改，每当 props.value 更新时，Vue 将能够正确地响应并更新页面的渲染结果。这是因为你在模板中使用的是 formRef.value 来访问表单数据，并且你在 watch 中更新了 formRef.value 的值。这样 Vue 可以追踪这个引用的变化并相应地更新页面渲染结果。