Want to understand the VUE3 documentation? You must know several 🌈ES6+ grammars.

The cause of

Recently, I have been doing VUE3 introductory course, and many new friends have reported that many ES6 basic grammar cannot be learned, so I have compiled some ES6 + grammar that must be learned for your convenience.

What is the ES6 +

ECMAScript 6.0 syntax was officially released in June 2015, referred to as “ES6”. It is an expansion of the original JavaScript syntax, and there are new syntax extensions every year. Here I call the subsequent newly added syntax “ES6+” syntax.

let

Define a variable, which, unlike “var”, is only valid within the block of code where the “let” is located. In a word: “var” is not used, but replaced with “let”.

{ let a = 10; var b = 1; } a // : A is undefined. B // 1

const

Define constants. Define variables that are not modifiable

Const PI = 3.1415; Pi // 3.1415 Pi = 3; // Error: Cannot modify variable.

Array destructing assignment

let [a, b, c] = [1, 2, 3]; // let a = 1; let b = 2; let c = 3;

Deconstructive assignment of an object

let { foo, bar } = { foo: 'aaa', bar: 'bbb' }; foo // "aaa" bar // "bbb" let { x, y, ... z } = { x: 1, y: 2, a: 3, b: 4 }; x // 1 y // 2 z // { a: 3, b: 4 }

Deconstructive assignment of function parameters

function add([x, y]){ return x + y; } add([1, 2]); / / 3

function move({x, y} = { x: 0, y: 0 }) { return [x, y]; } move({x: 3, y: 8}); / / [3, 8]

Template string

Variables can be elegantly inserted into strings.

Const a = 'Hello '; const b = `${a} Vue`; // b == 'Hello Vue'

Default values for function parameters

function add(a,b=1){
    return a+b;
}

add(3) // 4

Arrow function

Function a(){return 'hello'} const a = ()=>{return 'hello '; } // const a = ()=>

The extension operator for an array

// equivalent to console.log(1,2,3); console.log(... [1, 2, 3)); // merge array const a = [1,2,3]; Const b = (... a, 4, 5); / / [1, 2, 3, 4, 5]

A concise representation of the properties of an object

const a = 1; const obj = {a: 1}; // const obj = {a}; // {a: 1}

A concise representation of an object method

Const obj = {say:function (){return ' '; }}; ":function" const obj = {say (){return ' '; }};

Object property name expression

Object property names can support variables.

const a = 'abc';
let obj = {};
obj[`{a}123`] = 1;
console.log(obj) // {abc123:1};

Chain judgment operator (?)

Implementation of “?” If the expression on the left is null or undefined, stop immediately and return undefined or null.

const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName);

// 简写
const fristName = message?.body?.user?.firstName;

NULL judgment operator (??)

console.log(0 ?? 1); // 0 console.log(false ?? 1); // false console.log(undefined ?? 1); // 1 console.log(null ?? 1); / / 1

Apparently, there is only “??” Returns “??” if the preceding value is null or undefined. The value after that.

Promise

Promise is a solution to asynchronous programming that makes more sense than the traditional “callback functions and events” solution.

Because most of the third-party plugins we use in development (such as Axios) are wrapped in Promise format, there are very few requirements that need to be wrapped ourselves at the beginning.

Const promiseA = ()=> new Promise(function(resolve,)) Reject) {/ / = = = = = = your code setTimeout (() = > {the if (0.5 < math.h random ()) {resolve (" success "); } else {reject(' reject '); }}, 200); // === Your code ===}); Then (value= = value console.log(value)).then(value= = value console.log(value); }). The catch (error = > {/ / 'failure' = = error console. The log (error); });

async/await

Execution of the Promise function is “more elegant “. For example, wrapping the “promiseA function” above:

function funA(){ promiseA().then(value=>{ console.log(value); }).catch(error=>{ console.log(error); }); Async function funA(){try{const value = await Promise ();} async function funA(){const value = await Promise (); console.log(value); } catch(error){ console.log(error); }}

More and more

Here I just explain a few common grammar to you, more please refer to teacher Ruan Yifeng’s course

🔥 Introduction to VUE3

The course starts from the foundation of 0, and helps you to learn in depth step by step. Now we have finished the basic course of VUE3, and there are videos for each lesson (only 3 lessons are recorded for the time being, and the recording is still going on), and the content is updated every week.

https://www.yuque.com/books/s…

typescript

It is recommended that you develop with TypeScript once you have learned the basics of Vue3, which should be the mainstream development language for Vue3 in the future. Here are some introductory articles on TypeScript.

First lesson, play with TypeScript

Second lesson, basic types and introductory advanced types

Third lesson, generics

Fourth lesson, reading advanced types

Lesson Five: What is a Namespace

Learn TypeScript “-is” in the Vue3 🔥 source code

Lesson 6: What are declaration files? 🦕 – Global declaration

TypeScript – Practicing a full screen browser (59 lines)

WeChat group

Thank you for your reading. If you have any questions, you can add me WeChat and I will add you to the WeChat group (due to the restriction of 100 people on WeChat group by Tencent, if you exceed 100 people, you must be joined by the group members).