Vue Patterns
In this article, I will be discussing some useful Vue patterns, techniques, tips, and tricks to define the responsibilities and behaviors of your components. these following patterns will increase the maintainability, performance, and scalability of your application.
In this article, I will cover 7 patterns to add to your toolbox and will complete the rest of the different patterns in the coming article isA.
_______________________________________________________
1. Component Declaration _______________________________________________________
1. Global Component (String Template)
In order to use a component as a global component, you need to use Vue.component to register it in the global scope where it can be used in many other components through your app.
The first argument in Vue.component is the name of the component while the second argument is the component itself which is an object that contains all the component data (template, data, methods, ...etc)
?? Notes:
1?? global component will be defined using Vue.component followed by new Vue({ el: '#container' }) to target a container element in the body of every page.
2?? works very well for small to medium-sized projects, where JavaScript is only used to enhance certain views.
3?? In more complex projects, however, or when your frontend is entirely driven by JavaScript, these disadvantages become apparent.
?? Disadvantages of using Global Component:
1?? Global definition: force unique names for every component where you can't have 2 or more components with the same name even they are in different places of your project.
2?? String templates: using global component will enforce you to use template string to write you markup inside, which lack syntax highlighting and require ugly slashes for multiline HTML
3?? No CSS support means that while HTML and JavaScript are modularized into components, CSS is conspicuously left out without being scoped to your component
4?? No build step restricts us to HTML and ES5 JavaScript, rather than preprocessors like Pug (formerly Jade) and Babel
5?? Globals Make It Harder To Refactor Code: Module bundlers like Webpack are very popular nowadays, Modules make it easier to organize our code into separate files. This makes our code not only DRY but easier to refactor but using global components raises new problems.
1st problem
What if the file requires a global variable, how do you know what it is? ?? Is it a function / object / class?
2nd problem
Using Vue.component is the same thing as using a global variable, and comes with the same problems, it may have been OVERWRITTEN because Javascript lets you do that to globals.
Here is a very useful article about Why You Shouldn’t Use Vue.component
2.1 Global Component (createElement)
We can implement a Vue render function in any Vue component. Also, given Vue reactivity, the render function will be called again whenever a reactive property of the component gets updated.
Here's a quick example of how you could render an anchored-heading component that takes "level" as a prop and render a span contains "Hello World" as a child directly from a component render function.
2.2 Global Component (Render Function)
Vue recommends using templates to build your HTML in the vast majority of cases. There are situations, however where you really need the full programmatic power of JavaScript.
That’s where you can use the render function, a closer-to-the-compiler alternative to templates, That template doesn’t feel great. It’s not only verbose, but we’re duplicating for every level and will have to do the same when we add a new level or child of the component
3. Global Component (JSX)
If you’re writing a lot of render functions, it might feel painful to write something like the previous one ??
That’s why there’s a Babel plugin to use JSX with Vue, getting us back to a syntax that’s closer to templates
4. Single File Component (Most-Common)
Single file components are similar to regular components, but there are a few key differences which can make single file components the better tool for your project:
- They can be defined locally, instead of globally.
- You can define your component’s <template> outside of your JavaScript, which allows for syntax highlighting in your text editor, unlike with string templates.
- CSS/styling information is included in the component definition.
Inspecting a Single File Component
Single file components are contained in files with the .vue extension. Each .vue file consists of three parts: template, script, style. Let’s revisit our barebones component:
What About the Separation of Concerns?
?? For the first time, you may think that a SINGLE FILE COMPONENT violates the principle of separation of concerns but Let me elaborate a little on that point:
1?? the separation of concerns is not equal to the separation of file types.
2?? instead of dividing the codebase into three huge layers, it makes much more sense to divide them into the component.
3?? collocating them actually makes the component more cohesive and maintainable.
4?? you can still leverage its hot-reloading and pre-compilation features by separating your JavaScript and CSS into separate files
5. React Class Component
Class syntax is one of the most common ways to define a React component. While more verbose than the functional syntax, it offers more control in the form of lifecycle hooks, so for me as a React lover, I wished that vue has a similar syntax for declaring a component.
6. Vue Class Component
Thanks to the vue-class-component library We now got a class-based component in vue ???? by using the @Component prefix and extending your component from Vue, you now have a vue class-based component
Take a look at the following implementation for more details:
_______________________________________________________
2. Component Communication
_______________________________________________________
Props and Events
1?? Vue components follow the one-way data flow
2?? props are a reactive data source
3?? Child Components can only emit events to their direct parent (unlike the previous gif)
4?? There is something called Event-Bus which is a global Vue instance helps to share props between components without referring to parent-component
_______________________________________________________
3. Component Event Handling
_______________________________________________________
1. Listening to Events
We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered
2. Method Event Handlers
The logic for many event handlers will be more complex though, That’s why v-on can also accept the name of a method you’d like to call.
3. Method in Inline Handlers
Instead of binding directly to a method name, we can also use methods in an inline JavaScript statement
_______________________________________________________
4. Component Conditional Rendering
_______________________________________________________
1. Directives (v-if, v-else and v-else-if)
Often in a web application, we want elements to appear on the page depending on if a condition is met or not.
In vue js, we have many options to perform conditional rendering for our elements, check the following snippet to see the different ways to perform that:
2. Directives (v-show)
v-show used to show or hide our element depending on if a condition is met or not
?? v-show VS v-if
The main difference between the two is that:
- v-if - Only renders the element to the DOM if the expression passes.
- v-show - Renders all elements to the DOM and then uses the CSS display property to hide elements if the expression fails.
- v-show - Does not support v-else, v-else-if
3. Render Function or JSX
If you use render functions or JSX in your vue application, you can apply all the techniques,
1?? if-else
2?? switch-case
3?? JSX (Object-Map)
4?? Ternary operators
5?? Logical operators
3.1 JSX (If-Else)
3.2 JSX (Switch-Case)
3.3 JSX (Object-Map)
3.4 JSX (Ternary-Operator)
3.5 JSX (Logical-Operator)
_______________________________________________________
5. Dynamic Component
_______________________________________________________
Swappable Dynamic Components
Sometimes, it’s useful to dynamically switch between components, which is can be done using Vue’s <component> element with the is a special attribute:
Component element just takes a string which is the component name or component definition using `:is` prop, After that Vue then looks up the component referenced by that string and renders it in place of the <component> tag
?? Notes
1?? with the previous code example, the rendered component will be destroyed if a different component is rendered in <component>
2?? If you want components to keep their instances without being destroyed, you should wrap the <component> tag in a <keep-alive> tag
_______________________________________________________
6. Functional Component
_______________________________________________________
Stateless Functional Component
1?? A functional component is a special-SFC, with no-script-tag
2?? It only accepts props in order to display data.
3?? To make your component a functional one, you should add a functional attribute to the template tag
? Advantages
1?? Faster rendering 2?? Lighter memory usage
_______________________________________________________
7. Renderless Component
_______________________________________________________
Renderless Component
1?? A renderless component is basically a component that does not render any HTML to the DOM
2?? A renderless component makes use of the Slots API in order to achieve what we want.
?? The only job of Renderless.vue is to provide the prop name
? Advantages
1?? Separate our logic from our markup
