Menu
In vue's official docs I found the usage about $root at the edge cases section. "Edge Cases" makes me feel like using this.$root(or this.$parent) to mutate the data of root instance in a child component is not a normal or recommended way.
I know vuex is the best state management option for large and complex vue application and it has more advanced features and better for debugging. But that does not convince me the this.$root is not good.
As the docs says when this.$root to mutate root data is not possible to track when and where data changes happen and is not good for debugging. But what I want to know is:
Is this.$root approach only has disadvantages about debugging? Except for debugging related problems, is there any other issue of using this.$root to mutate the root data? If so can anyone give me a small example to showcase that problem because I cannot think out any case to avoid using it (suppose my vue app is not that large and complex). Thanks in advance!
312
How $parent is described in Vue? The $parent property, like $root, can be used for accessing the parent instance from a child. It provides direct access, making the application hard to test and debug.
Components in Vue are composed of three parts; a template (which is like HTML), styles and JavaScript. These can be split into multiple files or the same .
The createApp API allows multiple Vue applications to co-exist on the same page, each with its own scope for configuration and global assets: js const app1 = createApp({ /* ... */ }) app1.
It's common for an app to be organized into a tree of nested components: This is very similar to how we nest native HTML elements, but Vue implements its own component model that allow us to encapsulate custom content and logic in each component. Vue also plays nicely with native Web Components.
In Vue CLI, the root component is just like any other component and is at src/App.vue. To create a component in Vue, we start with an empty object, just like the root component. But, instead of passing it to the Vue.createApp() function, we register it to the component we want to use it in.
Despite the advantages of Vue.js, there are definitely a few drawbacks that need to be addressed. For instance, stability remains an issue since the release of the first version, back in 2015.
The component-based approach of Vue enables the formation of reusable single file components. Inside a component, template, logic, and styles are inherently coupled. Instead of separating the code into arbitrary layers, Vue collates components that can be reused and into a function. This makes the UI component cohesive, portable and maintainable.
This is all about good and bad architecture. You should always design your code so you share the least data you can (this is not even related to Vue).
Your vue component has private and public methods and fields. Consider all the method in component to be private. And $emit and props to be public. Accessing private methods and fields are always a bad idea, why?:
data inside of root.setInterval(() => $root.setDataTime(Current time ${Date.now()}), 1000). You check the changes and there're no commits in the vuex nor on your component.
104
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
