switchon@lavalamp.biz
+27(0) 83 419 4851 / +27(0) 21 036 1165
Application & software development
Get A Quote

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact
    ui/ux resource arsenal
    A Web Developer’s UI/UX Resource Arsenal
    May 9, 2022
    ui and ux
    UI/UX: Just Because Its A Big Company Doesn’t Make It Right
    May 20, 2022

    What’s New In Vue

    what's new in vue
    what's new in vue

     

    Introduction

    In this blog I will be looking into features that have been added or changed when Vue2 updated to Vue3.

     

    Smaller and faster

    • Performance Comparison

    Vue3 utilizes an optimization feature known as tree shaking. This means that Vue features that are unused by the project are removed when the project is compiled. This makes projects smaller and therefore faster. Another feature that Vue3 implements is a compiler-informed DOM. This results in Vue3 projects being 41% lighter, 55% faster, having 133% faster updates and using 54% less memory than projects written in Vue2. Check out the link below for the full Vue2 vs Vue3 comparison.

     
     

    Changes in initialization

    • In Vue3, a dedicated “createApp()” function is used to create an app instead of using the “new Vue” instance
    new Vue()

    – becomes –

    createApp()

    Vue2 example

     

    vue 2

    Vue3 example

     

    vue 3
    data: {
         msg: 'It works!'
    }
    

    – becomes –

    data() {
         return { msg: 'It works!' };
    }

    Vue2 example

     

    Vue 2

    Vue3 example

     

    Vue 3
    • Although using “data” as a method was recommended in Vue2, writing “data” as an object was also allowed. This has been changed in Vue3, with it being mandatory to have “data” as a method.
    • “Vue.component()” or other examples like “Vue.use()” in Vue2 has been changed to “app.component()” etc.
    Vue.component()

    - becomes -

    app.component()

    Vue2 example

     

    Vue 2

    Vue3 example

     

    Vue 3

    Teleport

    Teleport is a component that has been built into Vue3. This feature makes it possible to “teleport” a part of a components template into a DOM node residing outside of that component’s DOM hierarchy.

     

    Vue3 – Teleport example

     

    teleport

     

    Composition API

     

    Vue2 – Options API example

     

    Vue2

    Vue3 – Composition API example

     

    Vue3

    The main difference between the two API’s is the syntax in which it is written. The Options API requires you to have a large single exportable object, where the Composition API allows for compartmentalizing of code. This results in smaller and more understandable code, as related code can be grouped together.

    This is especially beneficial when working with bigger projects where code can become large and confusing.

     

    Vue2 – Options API Grouping example

     

    Vue2

    Vue3 – Composition API Grouping example

     

    Vue3

     

    Other Changes

    Other changes to Vue3 include:

    • Multiple root elements: Vue3 allows you to have multiple root elements per template, which was not allowed in Vue2.
    • Multiple v-models: Vue3 also allows multiple v-models on a single element, where Vue2 did not.

     

    Summary

    Although many features remain the same from Vue2 to Vue3, the changes improve maintainability, readability and speed.

    Contact us


      Related posts:

      dynamic doughnut graph using laravel vue componentDynamic Doughnut Graph Using Laravel Vue Component angularUpdating A Primitive Type Variable From A Service In Angular sending files with auxiliary dataSimple Way To Send A File With Auxiliary Data Via Axios In VueJS laravel livewireLaravel Livewire
      Share
      1
      Inge Wilhelm
      Inge Wilhelm
      Inge is a Front-end developer who enjoys bringing a sense of creativity to any project she works on.

      Leave a Reply Cancel reply

      Your email address will not be published. Required fields are marked *

      Lava Lamp Lab


      Like technology, a lava lamp constantly changes form, producing new conditions with every passing moment



      lava lamp lab facebook   lava lamp lab twitter   lava lamp lab linkedin   lava lamp lab instgram

      Services


      Application & software development

      Outsourced software development

      Project based resourcing

      Digital marketing & consulting

      Graphic design & consulting

      UI / UX design & consulting

      Contact Us


      +27(0) 83 419 4851

      +27(0) 21 036 1165

      +61(0) 42 420 8911


      switchon@lavalamp.biz


      Unit 1 Monaco Square,
      14 Church Street,
      Durbanville,
      Cape Town, 7550

      NBConsult Group


      nbconsult
      designer needed
      © 2023 Lava Lamp Lab (Pty) Ltd | All Rights Reserved | Privacy Policy
      Contact us now

        Application & software development

          Outsourced software development

            Project based resourcing

              Digital marketing & consulting

                Graphic design & consulting

                  UI/UX design & consulting

                    Lease an expert

                      Recruitment services

                        We are using cookies to give you the best experience on our website.

                        You can find out more about which cookies we are using or switch them off in settings.

                        Lava Lamp Lab
                        Powered by  GDPR Cookie Compliance
                        Privacy Overview

                        This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

                        Strictly Necessary Cookies

                        Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

                        If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

                        3rd Party Cookies

                        This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.

                        Keeping this cookie enabled helps us to improve our website.

                        Please enable Strictly Necessary Cookies first so that we can save your preferences!

                        Cookie Policy

                        More information about our Cookie Policy