检测代理更改 vuejs3

Question

I don't know how to detect a proxy object change without display it.

I Use async API call to set a proxy object (from a parent component).

In my child component, I use it like this

computed: {
  user() { return dataProxy.getCurrentUser() // return a proxy object }
}
updated: {
  console.debug(this.user)
  if(this.user.id !== undefined) {
    loadUserDetails(this.user)
  }
}

When the component is mounted, updated method is called and the console display an empty proxy object (ok) But when the proxy object is updated from api response, the updated method is never called.

Now, If I add {{user}} on my template, the updated method is called after the API response with the right content.

how to detect a proxy object change without display it?

Answer 1

You should use a watch function:

    watch: {
        user(newUser) {
            console.log('user changed:', newUser);
        }
    }