Understanding Vue
Since there was some Discussion about Vue and React between myself and other members I just figured it's good for me to read the docs just to fully understand what I am talking about. While reading the docs I had encountered v-html. In the docs it says it replace the old innerHTML with the value of v-html, so if rawHTML includes a span then the HTML will result in "span - span - text - /span - /span"? Or will it replace the entire span with the new one, I am guessing it's the first thing just wanted to make I got it right.
8 Replies
If I where to make a Vue project due I need to concern myself for the difference between ref() and reactive()? In a real world application I think once the object data becomes to complex it wil be fetched from a database anyways right?
I'm not sure what you mean by replacing span but isn't this just using html entity or something
Either that or escape the special characters some way
Ah nevermind I get what you mean now
It won't replace the span since the docs says vue uses innerHtml internally. So it just updates the html inside the already existing span I think
Wouldnt that make a mess semantically?
What do you mean
You can just put use v-html on a div
In the example if I where to put the v-html on the p tag it will replace the other text as well. Now in the example it has double span tags around the text.
Yes. You create a span and tell it to put this html string as its child content. If that string contains a span then you get a nested span
Also yes the difference between ref and reactive is very important
In general:
shallowRef is like useState in React. It reacts only to changes to the reference of the object. It doesnt modify the object at all
ref is like shallowRef but will also react to reference changes done to nested objects through magic. I need to play around with that more
reactive uses "new" js features to wrap the object in a javascript proxy. It reacts to changes that are done to the object without having to change the reference. So you can push to a reactive array and get updates from that. However you cannot get updates from reference changes. It essentially makes it const. You can change the contained values but not the reference
I usually use ref by default and reactive rarely for arrays and maps
So if you're coming from react you can stick with shallowRef to begin with and then dip your toes into the other options if you think it's worth it