As the project team connected to a new project and used VUE3 for development, we encountered this problem. I didn’t think of the reason at that time, but then we realized it, and then we explored this problem.

Problem description

The parent component passes a reference object value to the child component, and the internal field, depending on the backend interface, is presented to the child component for a drop-down display of data that the child component does not display. Let’s echo the problem with a simple code.

The child component needs to do some parameter processing after getting columns

The code above looks like this: The child component drop-down has no data

Problem analysis

  1. The optionList. Value is passed to the child, and its reference has changed, so the child does not get the updated value. Ok, we pass the optionList, and the code changes as follows:

    The code above looks like this: The child component drop-down data is displayed normally

    However, this can only be defined using ref, because the child component uses.value, so this method is not feasible.

  2. Optionlist. value is passed to the child, and its reference has changed, so the child does not get the updated value. Ok, we do not change its reference, and the code changes as follows:

    This code looks like this: The child component dropdown data displays normally

    The parent component is responsive, whether it is push or direct assignment. Why should the child component be push? That is, ref or Reactive cannot change its reference. So there’s this one.

  3. The sub component uses the three-point operator to reassign columns to a new object. We try to return the original columns directly. The code is modified as follows:

    The code above is also normal. If the child loop is passed to a.value value by v-for, the push function will not work. If the push function is passed to a reactive component, the push function will not work. To get the item. The options.

  4. Based on the above changes, we would like to use Reactive instead of pushing. Is there any other way to do this? In fact, we can use toRefs to convert every value inside to ref form.

    This code looks like this: The child component dropdown data displays normally

conclusion

  1. It’s the way we wrote it. It shouldn’t be usedThree-point operatorTo modify the value of the parent component, if desiredtoRefsortoRef(The value you want to deconstruct is optional, not necessarily) insetupIn the facepropsDeconstruct it.
  2. The value isrefThe normal delivery, if yesreactiveYou should usetoRefsBreak it out and pass it on separately.

At the end of doubt

If you are careful, you may have a question that if you deconstruct reactive, you will lose responsiveness. Check the official website and this is also explained, but there is no explanation as to why this is the case. We will analyze the reasons next time.