An introduction to

Before the order

I’ve been using React since I started working, from class to function, but I’ve always had a preference for Vue. Vue3 has been around for a while, and there have been some previous people who have stepped on bugs, so let’s start our vue3!

Git project address: gitee.com/wongest/vue…

The scaffold

Vue has an official scaffolding called VUE-CLI, which is now available in version 4.5. First make sure you install vue-CLI to get started:

  1. Execute the commandvue create project-nameThen the following options appear:

  1. Directly select the second option, the CLI automatically downloads the dependencies, and then we go to the project-name directory, so the scaffolding for VUe3 is installed.

configuration

The steps to install the scaffolding above are not different from cli3.0, so let’s explore:

vue-router

NPM I vue-router –save download vue-router dependencies, then create a router file to configure the router:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@components/Home.vue'

Vue.use(Router)

export default new Router({
router: [...]. })Copy the code

Modify the main.js file again:

const app = newVue({ ... App, router }) app.$mount()Copy the code

There is no such thing as Vue in main.js, but instead:

createApp(App).mount('#app')
Copy the code

CreateApp (App).use(router).mount(‘# App ‘), Ctrl + S, object is: not function See vue3 changed, look to the vue of official documents, found that installing a plug-in with command vue add, that right, run directly vue add vue – the router, goodfellas 404 directly, see the also not line, then go to see the official document of the vue – the router, the original use vue the add is right, Just use vue to add router, press Enter, the system is installed, even the page is configured. The structure of the router.js file looks like this:

import { createRouter, createWebHistory } from 'vue-router'
import Home from '.. /views/Home.vue'

const routes = [
  {
    path: '/'.name: 'Home'.component: Home
  },
  {
    path: '/about'.name: 'About'.// route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () = > import(/* webpackChunkName: "about" */ '.. /views/About.vue')}]const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router
Copy the code

Even the route defaults to the history route, which makes the URL look much better. If you want to use hash routing, you can use createWebHashHistory, where process.env.base_URL should be set to “/” by default, PushState takes full advantage of the history.pushState API to do URL jumps without reloading the page, and if your single-page app service is under /app/, your BASE_URL should be set to /app/.

vuex

Here is not so much routine, directly on the code:

store.js

import { createStore } from 'vuex'
import mine from '.. /pages/mine/store'

export default createStore({
  state: {
    id: Awesome!
  },
  mutations: {
    setId(state, payload){ state.id = state.id + payload.count; }},actions: {},modules: {
    mine
  }
})
Copy the code

You can see that the previous vue.use (Vuex) has been removed and replaced with createStore

mine/index.vue

<script>
import { computed } from "vue";
import { useStore } from "vuex";
export default {
  name: "Mine".setup() {
    const store = useStore();
    const count = computed(() = > store.state.mine.count);
    const id = computed(() = > store.state.id);
    return {
      count,
      id,
      handleAdd: () = > {
        store.commit("setId", { count: 8 });
        store.dispatch("mine/setCount", { count: 8}); }}; }}; </script>Copy the code

Here you can see a new lifecycle function setup (more on that below) that no longer uses this.$store (you can still use it, of course), but since it’s Vue3, we’re definitely using a new approach. Vuex exposes a useStore, which we use to create an instance store. You can then use state, COMMIT, dispatch as before.

Life cycle function

Vue3 cancels beforeCreate and Created and uses Setup to execute before beforeCreate and Created. You create data and method.

  1. setup: component creation before execution, can carry out data definition and initialization and method definition; And the other lifecycle functions are also inside the setup function;
  2. onBeforeMount(beforeMount)
  3. onMounted(Mounted) Operations on the DOM are performed after page initialization.
  4. onBeforeUpdate
  5. onUpdated
  6. onBeforeUnmountFunctions executed before the component is unloaded;
  7. onUnmountedA function that executes after the component is unloaded;
  8. OnActivated The component contained in (equivalent to the component in Components) is executed when activated.
  9. onDeactivatedFor example, the switch from component A to component B is executed when component A disappears.
  10. onErrorCapturedThe hook function is activated when an exception from a descendant component is caught.

setup

What is setup? Setup is a lifecycle function, and it’s a special lifecycle function, equivalent to const widget = () => {} in React Hook. Vue3 no longer has methods, methods are defined in setup

data

The data defined before vue3 was all in data(). Vue3 provides several data types:

  1. refVariables that define the basic data types used in setup reading and modification.value;
  2. reactiveDefine complex data such as data, JSON, etc.
  3. readOnlyPassing a normal value or string or reactive does not change read-only;
  4. shallowReadonlyShallow response, shallow read – only, deep modifiable