Summary of the problem of using reactive in vue3

question

In vue3, an array arr is rendered from the beginning of the page. When certain conditions are met, arr will be replaced with another array, but I defined arr using reactive, which causes TypeError: Assignment to constant variable when replacing.
How to modify this?

method

In Vue 3, if you usereactiveTo define a responsive object, then the properties of this object cannot be reassigned becausereactiveThe object's properties will be converted to getter/setter so that Vue can track changes in properties. When you try to replace the entire array directly, the error you encounter will appear.

To solve this problem, you can take the following methods:

1. UserefTo define an array:
refis used to define responsive references, which allows you to reassign the value pointed to by the reference. You can userefto define the array, and then through.valueProperties to access or modify arrays.

import { ref } from 'vue';
const arr = ref([]); // Initialize to an empty array// Use to access or modify an array(/* ... */);

2. UsereactiveDefine an object containing an array:
If you need to keep the array responsive and want to operate inside the array instead of replacing the entire array, you canreactiveDefine an array in the object.

import { reactive } from 'vue';
const state = reactive({
  arr: []
});
// Access or modify arrays through(/* ... */);

3. UsecomputedTo create a derived array:
If you need to dynamically create a new array based on certain conditions, you can usecomputedattributes to implement.

import { reactive, computed } from 'vue';
const state = reactive({
  originalArr: [],
  condition: false
});
const derivedArr = computed(() => {
  if () {
    // Return a new array    return /* ... */;
  } else {
    // Return to the original array    return ;
  }
});

4. UsereadonlyCombinedref：
If you need to keep the array responsive and want to replace the entire array in some cases, you can usereadonlyPackageref. That way, you canreadonlyAssign value operations on the properties of the object.

import { readonly, ref } from 'vue';
const originalArr = ref([]);
const arr = readonly({ value:  });
// When replacing the array = /* ... */;

Which method to choose depends on your specific needs. If you just want to replace the array when the condition is satisfied, then userefIt is the most direct way. If you need more complex logic, such as dynamically creating arrays based on conditions, you may need to usecomputed。

This is the end of this article about using reactive in vue3. For more related content related to using reactive in vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!