Vue 2 vs Vue 3

1
(No Transcript)
2
Basic Introduction

• Leading front-end frameworks like Angular, React,
  and Vue.JS are usually accessible, making it
  simple for developers to create reliable web
  apps. Vue.js is the only framework of this type
  that can be used to create rich user interfaces.
• Which version should you use if you're absolutely
  new to working with VueJS? might be the first
  thought that comes to mind. Right. Almost all
  businesses employ Vue 2, which is now available
  on the market, to build responsive web
  applications.
• With the release of Vue 3, developers are
  interested in learning about the technical
  principles added to the most recent version of
  Vue. Vue 3 has developed novel features that
  speed up your application and come with useful
  libraries to increase the responsiveness of your
  online project.

3
History of Vue.JS Framework

• We need to start with the framework trip before
  we can begin to grasp the idea of the distinction
  between Vue 2 and Vue 3. Initially, Vue.js was
  just a straightforward runtime library. It
  changed over time from being a library to a
  framework. And certainly, Vue.js is now well
  recognized as a user-friendly, effective, and
  adaptable framework that is essential for
  creating web user interfaces.

4
What Is Vue 2?

• Exactly four years before Vue 3, in October 2016,
  Vue 2 was released. Vue 2 quickly established a
  reputation as a flexible, lightweight, and
  lightweight programming framework. It was used by
  programmers to make responsive and advanced web
  interfaces that worked well with other
  technologies.
• Due to both its many advantages and Vue 3's
  recent release, Vue 2 is still in use by
  businesses all over the world. The ecosystem has
  enough time to transition to Vue 3 because Vue 2
  is expected to reach end-of-life by the end of
  2023.

5
What Is Vue 3?

• As a more manageable, quicker, and more compact
  version of Vue 2, Vue 3 was introduced. Along
  with updating the framework with new
  capabilities, Vue 3 also fixes some of Vue 2's
  flaws.
• With more code, Vue 2's code is prone to
  complexity and readability issues. While having a
  syntax that is quite similar to Vue 2, Vue 3
  seeks to address this problem as well as a number
  of others.

6
Difference Between Vue 2 vs Vue 3
Knowing the precise technological differences
between Vue 2 and Vue 3 can help you pick between
the two wisely. Even if you are not technically
inclined, these distinctions will make the other
arguments in this article easier to
understand. The major differences between Vue 2
and Vue 3 are shown below

• Creating a New Application
• Multiple Roots
• Fragments
• Setting Up Data
• Creating Methods
• Lifecycle Hooks

• Computed Properties
• Accessing Props
• Emitting Events
• Portals
• Initialization Code

7

• Creating a New Application
• While building an application from scratch, one
  of the obvious differences between Vue 2 and Vue
  3 will become apparent. Installing the Vue CLI is
  required to start the process (Command Line
  Interface). Vue 2 and Vue 3 have different
  commands for this
• Vue 2 npm install vue_at_2.x.x
• Vue 3 npm install vue
• Multiple Roots
• When compared to Vue 3, this limitation is
  removed. Vue 2 only permits the implementation of
  one root node in the template. Multiple roots can
  now be added by developers to a single template.

8

• Fragments
• The process of generating the same component in
  Vue 3 as opposed to Vue 2 differs since
  components can now have many root nodes (thanks
  to the addition of fragments). In Vue 3, the
  'reactive' option is used to access data while
  building a component this is not possible in Vue
  2.
• Setting Up Data
• Composition API was one of the key changes made
  in Vue 3. The Vue 2 Options API necessitates the
  division of code into various properties. On the
  other side, grouping the code by function as
  opposed to property type is possible using Vue
  3's Composition API.

9

• Creating Methods
• In comparison to Vue 3, creating methods differ
  differently in Vue 2. In Vue 2, you may utilize
  the Options API to declare all of your methods at
  once and arrange them however you like.
• The Composition API in Vue 3 requires specifying
  methods and then "returning" them so that other
  components of your component can access them,
  though.
• Lifecycle Hooks
• The component options in Vue 2 provide direct
  access to lifecycle hooks. However, virtually
  everything in Vue 3 (including lifecycle hooks)
  is included within the setup() method.
• In Vue 3, lifecycle hooks must be imported before
  being utilized inside the setup() method.

10

• Computed Properties
• By including a "calculated" field in the options
  object, users of Vue 2 can use computed
  properties. However, in order to use 'computed'
  in the setup() method in Vue 3, developers must
  first import it into the component.
• This update was made to stop the habit of
  importing unused packages, which was present in
  Vue 2.
• Accessing Props
• The word "this" was always used in Vue 2 to refer
  to the component rather than any particular
  property. Additionally, access to "props" was
  simple. However, "this" is no longer used to
  refer to access properties in Vue 3. To access
  props, use the setup() method's 'props' and
  'context' arguments.

11

• Emitting Events
• The way that Vue 3 and Vue 2 both emit events is
  also different. In Vue 2, you may easily emit an
  event to a parent component by using the simple
  syntax "this.emit". However, Vue 3 allows you
  more flexibility when it comes to accessing
  properties or methods.
• The 'context' object is added as the second
  parameter to the setup() method in Vue 3 to do
  this. The event can then be sent to the parent
  component by simply using "emit."
• Portals
• With the gateway functionality, you can translate
  a portion of code from one component into another
  component in a different DOM tree. This was
  accomplished using a third-party plugin called
  portal-vue in Vue 2.
• A built-in portal in Vue 3 is used to accomplish
  the same goal. Any code that needs to be prepared
  for teleportation is enclosed in a special tag
  called ltteleportgt.

12

• Initialization Code
• CreateApp is a new method that is introduced to
  initialize the app in Vue 3 compared to Vue 2.
  The result of this method is a fresh instance of
  a Vue app. Without compromising the functionality
  of the other instances, each instance can work
  independently.
• const app1 createApp()
• const app2 createApp()
• app1.directive('focus',
• inserted el gt el.focus()
• )
• app2.mixin(
• / ... /
• )
• Even though it is uncommon to develop many apps
  within one application, doing so could be useful
  if the project expands in scope. Compared to Vue
  2, it is now possible to configure each app as a
  separate object with Vue 3. It is also feasible
  to combine various features from different
  instances.

13
Summary of Vue 2 vs Vue 3

• After comparing the significant new changes
  between Vue 2 and Vue 3, we can state that
• Compared to Vue 2, Vue 3 is rumored to be
  quicker, smaller, easier to maintain, and more
  natively targettable.
• With some new and noteworthy updates and
  functionality, Vue 3 is essentially a rewrite of
  Vue 2.
• Both Vue 2 and Vue 3 have very similar
  fundamental syntax.
• However, if you have any questions about
  developing a new web application with the VueJS
  framework or want to switch to Vue 3, don't
  hesitate to get in touch with us. Albiorix
  Technology is a leading Vue.js development
  company having a team of talented developers to
  provide the best optimum IT solutions

14
THANK YOU
Contact Us (91) 991-308-8360 / 1 (912)
528-5566 inquiry_at_albiorixtech.com livealbiorix.te
ch For More Information Visit Us
At www.albiorixtech.com