vue3的ref响应式问题？

  • Z时代
  • 2024-02-16
  • 分类：IT

在vue3框架中，我使用ref定义了一个变量，但是发现在更新其数据之后，页面上并不会有响应式变化，具体表现是在更新数据之后不会出现表格最前面的选择框

数据定义

const rowSelections = ref<Record<string, ComputedRef<object> | null>>({})

数据初始化，其中list是一个数组，具有唯一的id属性

list.value.forEach((el) => {
   rowSelections.value[el.id] = null
})

组件A中定义了计算属性rowSelection

const isBatching = ref<boolean>(false)
const rowSelection = computed(() => {
      if (isBatching.value) {
        return {
          columnWidth: 30,
          selectedRowKeys: selectedRowKey.value,
          getCheckboxProps: (record) => {
            return {
              props: {
                disabled: !isActivated(record)
              }
            }
          },
          onChange: (selectedRowKeys: string[], selectedRows) => {
            selectedRowKey.value = selectedRowKeys
          }
        }
      }
      return null
    })

当点击一个按钮之后，触发BatchEdit函数，通过emit抛出新的rowSelection

const batchEdit = () => {
      isBatching.value = true
      selectedRowKey.value = []
      emit('rowSelectionChange', {
        rowSelection,
        id: props.id
      })
    }

在父组件中进行事件定义并更新内容

const rowSelectionChange = ({
    rowSelection,
    id
  }) => {
    rowSelections.value[id] = rowSelection
  }

rowSelections的使用

<a-table
      :row-selection="rowSelections[text.id]"
      :columns="columns"
      :data-source="data"
    />

回答：

ref与reactive的区别

在Vue 3中，ref和reactive都是用于响应式数据绑定的API，但它们之间有一些区别：

  • ref只能用于包装基本数据类型，例如数字、字符串、布尔值等，而reactive可以用于包装对象和数组。
  • ref是一个函数，可以在模板中直接使用，类似于之前Vue 2.x中的data属性值；而reactive是一个方法，需要在setup函数中进行调用和返回。
  • 对于ref包装的基本数据类型，在模板中使用时需要使用.value属性来获取实际的值，而对于reactive包装的对象和数组，可以直接访问属性或索引来进行操作。
  • ref返回的是一个简单的响应式对象，而reactive返回的是一个响应式代理对象，可以通过代理对象的属性来实现对对象或数组数据的操作。

ref用于包装简单的数据类型，而reactive用于包装复杂的数据类型，可以更好地处理数据的变化和更新

因此你需要使用reactive

以上是 vue3的ref响应式问题？ 的全部内容， 来源链接： utcz.com/p/935290.html

回到顶部