Learn how to effectively debug with Chrome DevTools MCP server, which provides AI agents access to Chrome DevTools directly inside your favorite code editor.
Ever opened a React file and found a graveyard of useState hooks? The problem isn’t React; it’s how we model state. Here’s how to do it smarter.
React 19 breaks old third-party integrations. Learn why concurrent rendering exposes brittle SDKs and how to rebuild them with resilient modern patterns.
useEffectEvent
: Goodbye to stale closure headachesDiscover why the useEffectEvent Hook is important, how to use it effectively, and how it compares to useRef.
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
6 Replies to "Cleaning up your Vue.js code with ES6+"
Great tips, one question, when I use the arrow functions I get undefined on this… Any suggestion?
Hi, Maximiliano, thanks for reading!
So, if “this” is returning “undefined”, you’re probably using arrow functions in the wrong place. You shouldn’t use them when defining a function for your data, or lifecycle methods, as you do want this to be bound to the context. So doing { mounted: () => { console.log(this.hello) } } will console log undefined (rightly).
You should use arrow functions _within_ your methods, lifecylcles, etc. so that the context of “this” will always be your component.
For more information on arrow functions, check out this article: https://codeburst.io/javascript-arrow-functions-for-beginners-926947fc0cdc
(hello = 0) Destructuring works let { hello } = this and then I hello = 1 in the method and the value changes if I assign it to a different value but when a different method later calls the data() for that particular data it is as-if it was never changed at all because when I check it again it is still hello = 0.
Hi, Lou!
So the reason mutating the value of “hello” doesn’t work, is that primitive values (like a number or string) are copied by value, not reference. When you do let { hello } = this, what it’s really doing is let hello = this.hello, which *copies* the value of this.hello into a new local variable. So when you mutate your local variable, it won’t change the value of this.hello.
For more information, check out this AWESOME article on value vs reference in JS: https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0
Got it! Thanks for the clarification and explanation!
Nice, practical write-up, thanks!