As I dive into the world of frontend development and start learning Vue.js, I came across a paragraph in the tutorial that caught my attention:
Vue.js makes rendering a template seem simple, but under the hood it does a lot of work. The data and DOM are linked, creating reactivity. How can you test this? Just open your browser's developer console and modify exampleData.name. You should see the changes reflected in the rendered output.
<!-- Here is our View -->
<div id="example-1">
Hello {{ name }}!
</div>
// This is our Model
var exampleData = {
name: 'Vue.js'
}
// Create a Vue instance, or "ViewModel",
// linking the View and the Model
var exampleVM = new Vue({
el: '#example-1',
data: exampleData
})
While experimenting in the console, instead of modifying exampleData.name, I assigned another object to exampleData like exampleData = {}. This shifted the reference elsewhere, leading me to question whether this could potentially cause a memory leak. If not, what would constitute as a true memory leak?