The background,

Vue3 has been out for more than a year. In order to prevent being lost, we reconstructed the company’s projects with VUE3 inside and out in June. Up to now, all the company’s projects have adopted VUE3 version, and the existing projects have been upgraded successively in spare time. Although I have written several VUE3 projects, many things still remain in the application level, and I even cannot explain them clearly. First, I will sort out what I have used. Code does not stop, inside volume more than

Attached is github open source address: github.com/909652769/v…

2. Technology stack

webpack => vite2

vue2 => vue3

vueRouter3 => vueRouter4

vuex3 => vuex4

pug

stylus

typescript

vite2

In the Vite2 official documentation, there is a paragraph like this:

Before browsers supported the ES module, developers didn’t develop JavaScript’s native mechanics in a modular way. This is where the concept of “packaging” comes in: using tools to grab, manipulate, and link our source code modules into files that run in a browser.

Over time, we’ve seen the creation of tools like WebPack, Rollup, and Parcel that dramatically improve the development experience for front-end developers.

However, as we start building larger and larger applications, the amount of JavaScript code we need to process grows exponentially. It is not uncommon for large projects to contain thousands of modules. We started hitting performance bottlenecks — tools developed in JavaScript often took a long time (even minutes!). To start the development server, even with HMR, it takes a few seconds for the effect of the file changes to be reflected in the browser. Over and over again, slow feedback can have a huge impact on a developer’s productivity and happiness.

Vite aims to take advantage of new developments in the ecosystem: browsers are starting to support ES modules natively, and JavaScript tools are increasingly written in compiled languages.

Webpack’s packager-based approach to starting a development server is to eagerly grab and build your entire application before serving it up.

Vite only needs to transform the source code when the browser requests it and provide it on demand. Code that is dynamically imported according to the situation is only processed if it is actually used on the current screen

The startup build of Vite is 10-100 times that of WebPack, and the development happiness is greatly improved. For details, please refer to the official document EMMM.

vue3

Vue3 has better performance, smaller code size, and better TS support than VUE2. All global apis of vue2 are created by calling createApp in vue3. Vue2 does not support multiple root nodes. Vue3 can contain multiple root nodes. .

Vue3 has a lot of changes compared to VUe2, such as global API, template instructions, components, rendering functions, custom elements, etc. Also removed some apis such as filter, $destroy, $ON, $OFF, etc.

Here are some of the more common variations in writing that I use in my projects:

Modular API

One of the most noticeable changes in the VUe3 project was the introduction of Setup, as described in the VUE documentation:

By creating Vue components, we can extract the repetitive parts of the interface, along with their functionality, into reusable snippet of code. This alone will take our application a long way in terms of maintainability and flexibility. However, our experience has shown that this alone may not be enough, especially if your application becomes very large — think hundreds of components. Sharing and reusing code becomes especially important when dealing with large applications like this.

It would be even better if you could collect code related to the same logical concern. And that’s exactly what composite apis allow us to do

Now that we know why, we can know how. To get started with the composite API, we first need a place where we can actually use it. In Vue components, we call this location setup.

The setup function is the entry function to the composition API. Setup is called before the beforeCreate hook. Setup Because the Created lifecycle methods have not been executed at execution time, data and methods cannot be used in setup functions. Setup takes props and context. Variables and methods defined in the setup function must eventually be returned, otherwise they cannot be used in the template.

Global API

During testing, global configuration can easily accidentally contaminate other test cases. The user needs to carefully store the original global configuration and restore it after each test (such as resetting vue.config.errorHandler). Some apis like vue. use and vue. mixin don’t even have methods for restoring effects, which makes testing involving plug-ins particularly tricky. To avoid these problems, in Vue 3 we introduced a new global API called createApp

// vue2
import Vue from "vue";
Vue.prototype.$moment = moment;

// vue3
import { createApp } from 'vue'
const app = createApp(App)
app.config.globalProperties.$moment = moment;
Copy the code

watch

The Watch API is exactly equivalent to the optional API this.$watch (and the corresponding Watch option). Watch needs to listen to specific data sources and perform side effects in a separate callback function. By default, it is also lazy — that is, the callback is invoked only when the listening source changes.

let count = 0
// vue2
watch: {
    count: (res) = > {
        /* res */}}// vue3
watch(() = > count,
    (newValues) = > {
        /* newValues */})// vue3 listens multiple times
watch(() = > [count1, count2],
    (newValues1, newValues2) = > {
        /* newValues1 */
        /* newValues2 */})Copy the code

keep-alive


when wrapping dynamic components, inactive component instances are cached rather than destroyed. Like
,

is an abstract component: it does not render a DOM element on its own, nor does it appear in the component’s parent chain. When a component is switched within

, its activated and deactivated lifecycle hook functions are executed accordingly. Primarily used to preserve component state or avoid re-rendering.


 

// vue2
<keep-alive>
    <router-view />
</keep-alive>

// vue3
// keepAliveList a list of components to cache
<router-view v-slot="{ Component }">
    <keep-alive :include="keepAliveList">
        <Component :is="Component"></Component>
    </keep-alive>
</router-view>
Copy the code

A complete contrast

vue2

<template lang="pug">
    .layout-container
        .layout-head
            span {{count}}
            // ...
        .layout-page
            keep-alive
                router-view
</template>
<script>
export default {
    name: "layout".data() {
        count: 0.// ...
    },
    watch: {
        count: (res) = > {
            // ...}},created(){
        // ...
    },
    mounted: () = > {
        // ...
    },
    methods: {
        initPage() {
            // ...}}}</script>
Copy the code

vue3

<template lang="pug">
.layout-container
    .layout-head
        span {{count}}
        // ...
    .layout-page
        router-view(v-slot="{ Component }")
            keep-alive(:include="keepAliveList")
                Component(:is="Component")
</template>
<script lang="ts">
import { defineComponent, reactive, onMounted, watch } from 'vue'
export default defineComponent({
    name: 'layout'.setup() {
        const state:any = reactive({
            count: 0.// ...
        })
        
        watch(() = > count,
            (newValues) = > {
                // ...
            }
        )
        
        onMounted(() = > {
            // ...
        })
        
        const initPage:Function = () = > {
            // ...
        }
        
        return {
            ...toRefs(state),
            initPage
        }
    }
})
</script>
Copy the code

The last

There are a lot of uncombed, also do not know how to comb, the foundation is not enough to write bad scold ~, after all, I am also an API engineer.