This is the 14th day of my participation in the More text Challenge. For more details, see more text Challenge

Introduction of Vue3

Vue.js3.0 will be released in September 2020 and will support most of the features of Vue2, better Typescript support, complete refactoring of the virtual Dom, combined with template compilation to improve performance and reduce runtime overhead. Use Proxy instead of defineProperty to implement data responsiveness. New feature Composition Api.

Before learning Vue3, you must learn Vue2 first. After all, it is the upgraded version of Vue2 with better performance. After packaging, the volume is reduced by about 41%, first rendering is 55% faster, update rendering is 133% faster, memory is reduced by 54%. Use Proxy instead of defineProperty to implement data response, structure the code so it works with tree-Sharking, and throw away unused code at compile time. It should be noted that Vue3 does not support Internet Explorer at present, so it needs to be compatible with Internet Explorer or develop with Vue2.

The response of Vue2 is different from Vue3. In Vue3, Proxy is used instead of defineProperty to realize the response of data. Because Vue2 uses defineProperty to realize the response of data and directly modifies the elements through subindices. For example, arr[3]= XXX or to update the length of the array, the interface does not automatically update. You need to use vue. set or this.

In practice, Vue3 supports most of the code for Vue2, but companies typically require Typescript for development, so it’s important to learn Typescript before you learn Vue3

Create a project

1. Update vue-CLI scaffolding to the latest version (after 4.5)

yarn globalAdd @vue/cli # OR NPM install -g@vue /cli ps// View the current NPM mirror source

npm config set registry https:/ / registry.npm.taobao.org/ / / mirror set NPM source for taobao image
Copy the code

2. Create a screenshot

  • vue create vue3-demo

  • Press space to cancel and press Enter

  • Choose 3. X

  • Do not select class-style components

Copy the code
  • The rest just hit the car

3. Create a project directory

The difference between vue2:

  1. The views directory replaces the Pages directory, but you can change it to the Pages directory
  2. Add the shims-vue.D. ts file, which is typescript for vue
/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

Copy the code

  1. Tsconfig. json, as the name implies, is a typescript configuration file

  2. Functional programming style

The main js to create

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

Copy the code

Route.js is no longer in the form of new, but in the style of methods

4. Start the project

npm run serve
Copy the code

You can see that the route is in history mode

Let’s go to hash mode

const router = createRouter({
  // history: createWebHistory(process.env.BASE_URL),
  history: createWebHashHistory(process.env.BASE_URL),
  routes
})
Copy the code

5. defineComponent

In the home. Js

<template>
  <div class="home">
    <img alt="Vue logo" src=".. /assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

export default defineComponent({
  name: 'Home'.components: {
    HelloWorld,
  },
});
</script>

Copy the code

DefineComponent is an overload function that simply encapsulates setup and returns an Options object. The purpose is to define a component. You can pass a configuration object internally. In Typescirpt, give the component the correct parameter type inference.

Ps: Vue in Vue3 does not need the root element. Home. Js will still work if you remove the outer layer, because there is a layer of document fragmentation

<template>
    <img alt="Vue logo" src=".. /assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

export default defineComponent({
  name: 'Home'.components: {
    HelloWorld,
  },
});
</script>

Copy the code

New Vue3 Feature Compositon Api

1. Compositon Api definition

The Compositon Api is a set of low-intrusion, functional apis that allow us to compose component logic more flexibly. The Compositon Api is inspired by React Hooks and is more powerful than Mixin. It improves the usability of your code logic to be template-independent, while functional programming makes your code more compressible. In addition, Vue3’s responsive modules can be combined with other frameworks.

2. Experience the setUp function

Before you learn about the Compositon Api, you need to look at the setUp () function. The setUp function is new to Vue3. Its new feature based on the Compositon Api provides a unified entry point where all combined Api functions are used, only once at initialization, and the setUp function is executed before the create lifecycle. If an object is returned within the setUp function, Properties or methods in an object can be used directly in the template example: home.js

<template>
  <div class="home">
    {{msg}}{{sayHello()}}
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

export default defineComponent({
  name: 'Home'.components: {
    HelloWorld,
  },
  setup() {
    let msg = 'hello world'
    function sayHello() {
      return 'hi! '
    }
    return {
      msg,
      sayHello
    }
  }
});
</script>

Copy the code

Congratulations, the vue3 project is ready. Come back tomorrow and check out the new content of Vue3