Vue Flashcards
What is Vue?
Vue.js is a progressive framework for JavaScript used to build web interfaces and one-page applications.
Desktop and mobile app development with Electron framework
Simply put, view is a UI of an application/website, and the core library of Vue.js focuses the view layer by default.
Pros
Tiny size
Virtual DOM rendering and performance
Reactive two-way data binding
Single-file components and readability
Integration capabilities and flexibility
Solid tooling ecosystem
Easy to learn
Very good documentation
Virtual DOM rendering and performance
When a user interacts with the page, the objects change their state, so that a browser has to update the information and render it on the screen. But, updating the whole DOM is cumbersome. For the sake of speed, Vue.js utilizes virtual DOM: Think of this as a copy of an original DOM that figures out what elements to update, without rerendering the whole DOM. This approach makes page rendering pretty quick and improves application performance.
Reactive two-way data binding
Two-way data binding is a connection between model data updates and view (UI).
Single-file components and readability
Every piece of the application/web page in Vue is a component. Components represent encapsulated elements of your interface. In Vue.js, components can be written in HTML, CSS, and JavaScript without dividing them into separate files.
Splitting the application code is actually an architectural approach called Component Based Architecture (CBA), and it’s also utilized in Angular and React. Such an architectural approach has lots of benefits:
Component reusability. Encapsulated components are basically chunks of code that can be reused as templates for similar system elements.
Code readability. As all the components are stored in separate files (and each component is just a single file), the code is easier to read and understand, which makes it easier to maintain and fix.
Good for unit-testing. Unit-testing is a QA activity aimed at checking how the smallest parts of the app work on their own. Having components greatly simplifies this task.
Integration capabilities and flexibility
An important aspect of any emerging technology is the ability to integrate with existing applications. With Vue.js it’s as easy as pie, because it relies only on JavaScript and doesn’t require any other tools to work.
Between its components and lightweight nature, Vue can be used in nearly any project
Switching from React or Angular won’t be a big problem, as Vue’s internal organization is basically a mix of the two
Solid tooling ecosystem
Vue CLI 3 will support Babel and TypeScript out of the box, provide unit testing, end-to-end testing tools, and a plugin installation system. And if that isn’t enough, Vue also has its own browser debugging tools, server renderer, and state manager.
Cons
Limited Resources
Lack of support for large-scale projects
Reactivity complexity
Server-Side Rendering (SSR)?
Vue.js is a framework for building client-side applications. By default, Vue components produce and manipulate DOM in the browser as output.
However, it is also possible to render the same components into HTML strings on the server, send them directly to the browser, and finally “hydrate” the static markup into a fully interactive app on the client.
A server-rendered Vue.js app can also be considered “isomorphic” or “universal”, in the sense that the majority of your app’s code runs on both the server and the client.
SSR Pros
Better SEO, as the search engine crawlers will directly see the fully rendered page.
Faster time-to-content, especially on slow internet or slow devices. Server-rendered markup doesn’t need to wait until all JavaScript has been downloaded and executed to be displayed, so your user will see a fully-rendered page sooner.
SSR Cons
Development constraints. Browser-specific code can only be used inside certain lifecycle hooks; some external libraries may need special treatment to be able to run in a server-rendered app.
More involved build setup and deployment requirements. Unlike a fully static SPA that can be deployed on any static file server, a server-rendered app requires an environment where a Node.js server can run.
More server-side load. Rendering a full app in Node.js is obviously going to be more CPU-intensive than just serving static files, so if you expect high traffic, be prepared for corresponding server load and wisely employ caching strategies.
Component Lifecycle Hooks
beforeCreate()/created() - most often used method
beforeMount()/mounted() - html of the component is mounted onto the DOM
beforeUpdate()/updated() - triggered when a reactive property such as data or computedProperties chagnes
beforeUnmount()/unmounted() - before the compo is destroyed
beforeCreate()/created() - most often used method
best place to make API calls
beforeMount()/mounted() - html of the component is mounted onto the DOM
dom is ready for access and manipulation
used if the dom of the component needs to me modified before or after being rendered initially
use case - focusing input element
