Use reactive attention points

This article will explain some of the details of using reactive in VUE3, mainly for common errors.

#1 Direct assignment

  let MenuList: any = reactive([])​
  const res= await getMenuList()​
  MenuList=res

We can first understand how reactive is to solve the response, we know that in Vue3 reactive is the use of ES6 in the new syntax proxy proxy to achieve the response

Proxy is a constructor function that implements listening to an entire object instead of listening to the property name like defineProperty. Two parameters are passed during creation, the first is the object that needs to be proxied, and the second is the configuration of the proxy. Object (at least pass an empty object, otherwise an error will be reported), and this object can have a deleteProperty in addition to get/set, which will be called when the property value in the proxy object is deleted, and when a property is appended to the proxy object It will also call set to solve the problem that vue2 (append property/delete property) cannot listen But if we directly Reassignment of the reactive object created by reactive will destroy the reference address of the original reactive object, so it will lose the reactive, so we cannot assign directly

#2 Deconstruction assignment