search

vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.86k stars 8.36k forks source link

Cannot read properties of null (reading 'insertBefore') #4678

Closed Guervyl closed 3 years ago

Guervyl commented 3 years ago

Version

3.2.18

Reproduction link

github.com

Steps to reproduce

I created this project to reproduce it. https://github.com/Guervyl/vueJs3-not-updated. But, I could not be able to get the error. From this test repository, the value just not updated.

And this error is weird. It's nothing like the others. I made a video so that you can see what's going on. Before you comment anything please watch the video. There is no error like this. Here is the link: https://drive.google.com/file/d/1cP-4a4rZ69bBxQphzs7hhPQgN0Ozol4m/view?usp=sharing .

It's hard to explain what's going on. When I access a property on the object elementObj.type === 'link' I got the error. When I remove the code, I don't get the error. And this only happens when I after I roughly removed some existed property from the object outside of vuejs.

What is expected?

It should not throw error and the view was supposed to be updated.

What is actually happening?

It throws an error.

Please watch the 5 minutes video to be able to understand what the problem is.

LinusBorg commented 3 years ago

You are essentially updating the original non-reactive object (outside Vuejs) and expect Vue's reactive proxy for that object to update. That doesn't work, Vue doesn't get informed about changes to the nonreactive original opject.

https://v3.vuejs.org/guide/reactivity.html#proxy-vs-original-identity

Consequently, when removing a property from the original object, Vue's reactive proxy for that object thinks it's still there and all sorts of funky stuff can go wrong.

yyx990803 commented 3 years ago

For Vue 3, reactivity works through proxies. So essentially: Do NOT set an external object on this then expect the original object to become "reactive". This worked in Vue 2 but won't in Vue 3 - Vue 3 will no longer modify the original object. You can only work through the reactive proxy of the object (through this.object)

This will be more clearly documented in the new docs, but if you are coming from Vue 2, make sure to understand the difference.

Guervyl commented 3 years ago

It's great that vue3 does not touch the original object. I wasn't modifying the external object to expect Vue3 to react. I was assigning the external object to this.object after I modified the external object.

I found the problem. Somewhere in the code it was destroying the Vue html container.

Thanks for answers.