vue3对象赋值无效

在 Vue 3 中，由于使用了 Proxy 对象进行响应式处理，直接给对象赋值同样会存在无法触发更新的问题。

解决这个问题的方法也是使用 `Vue.set` 或 `this.$set`，不过在 Vue 3 中需要使用 `markRaw` 函数将一个对象标记为“非响应式”的。这样，就可以强制 Vue 3 去触发更新。例如：

import { reactive, markRaw } from 'vue'

const obj = reactive({
  key: markRaw(value)
})

Vue.set(obj, 'key', value)

或

import { reactive, markRaw } from 'vue'

export default {
  data() {
    return {
      obj: reactive({
        key: markRaw(value)
      })
    }
  },
  methods: {
    updateValue(value) {
      this.$set(this.obj, 'key', value)
    }
  }
}

其中 `value` 是要赋的值。

相关问题

vue对象赋值无效

可能是由于 Vue.js 的响应式系统的限制导致的。当你尝试直接给一个对象赋值时，Vue.js 可能无法检测到这个变化，从而无法触发更新。解决这个问题的方法是使用 `Vue.set` 或 `this.$set`，它们可以强制 Vue.js 去触发更新。例如：

Vue.set(obj, 'key', value)

或

this.$set(this.obj, 'key', value)

其中 `obj` 是你要赋值的对象，`key` 是对象的属性名，`value` 是要赋的值。

vue3 state对象赋值无效

在 Vue 3 中，使用了 Composition API 来管理组件的状态，一个常见的问题就是在 state 对象中直接赋值，但是界面没有更新。

这个问题的原因和 Vue 2 中的问题类似，直接给一个对象赋值时，Vue.js 无法检测到这个变化，从而无法触发更新。

解决这个问题的方法是使用 `Vue.set` 或 `this.$set`，不过在 Vue 3 中需要先将 state 对象包装成 `reactive`，然后再使用 `Vue.set` 或 `this.$set`。例如：

import { reactive, toRefs } from 'vue'

export default {
  setup() {
    const state = reactive({
      obj: {
        key: 'value'
      }
    })

    const updateValue = (value) => {
      Vue.set(state.obj, 'key', value)
    }

    return {
      ...toRefs(state),
      updateValue
    }
  }
}

其中 `state` 对象使用 `reactive` 包装，`toRefs` 将 `state` 对象转换成响应式的对象，并且使用展开运算符将 `state` 对象的属性解构出来，方便在模板中使用。`updateValue` 方法则使用 `Vue.set` 来更新 `state.obj` 的值。

另外一种方法是使用 `ref` 包装 `state` 对象。例如：

import { reactive, ref } from 'vue'

export default {
  setup() {
    const state = reactive({
      obj: {
        key: 'value'
      }
    })

    const stateRef = ref(state)

    const updateValue = (value) => {
      Vue.set(stateRef.value.obj, 'key', value)
    }

    return {
      state: stateRef,
      updateValue
    }
  }
}

其中使用 `ref` 包装 `state` 对象，然后在模板中使用 `state.value` 来访问 `state` 对象。`updateValue` 方法则使用 `Vue.set` 来更新 `state.value.obj` 的值。