Want to understand the vue3 documentation? You must know a few ES6+ syntax.

cause

Recently, I doing 160f0e126e925e vue3 introductory tutorial . Many new friends have feedback that many ES6 basic grammars are not, so I have out some 160f0e126e9265 must be es6+ grammar, so that you can refer to it.

What is ES6+

The ECMAScript 6.0 grammar was officially released in June 2015. It is called "ES6" for short. It is an extension of the original javascript grammar, and new grammars are added every year. I will refer to the subsequent new grammars as "ES6+". grammar.

let

Defining variables is different from "var". The variables declared by him are only valid in the code block where "let" is located. In short: Don't use "var" and replace it with "let".

{
  let a = 10;
  var b = 1;
}

a // 报错: a 没定义.
b // 1

const

Define constants, and the defined variables cannot be modified

const PI = 3.1415;
PI // 3.1415

PI = 3;
// 报错: 不能修改变量.

Array destructuring assignment

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

// 等价
let a = 1;
let b = 2;
let c = 3;

Object destructuring assignment

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 }

Destructuring 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 inserted gracefully in the string.

const a = '你好';
const b = `${a} Vue`;
// b == '你好vue'

Function parameter default value

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

add(3) // 4

Arrow function

function a(){
    return '你好'
}

// 箭头函数
const a = ()=>{
    return '你好';
}

// 还可以更简单
const a = ()=>'你好'

Array spread operator

// 等价于 console.log(1,2,3);
console.log(...[1, 2, 3]);

// 合并数组
const a = [1,2,3];
const b = [...a,4,5]; // [1,2,3,4,5]

Concise representation of object properties

const a = 1;

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

Concise notation of object methods

const obj = {
  say:function (){
      return '你好!';
  }
}; 
// 简写,可以省略":function"
const obj = {
  say (){
      return '你好!';
  }
};

Object attribute name expression

The property name of the object can support variables.

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

Chain judgment operator (?)

Realize the judgment of whether the expression on the left of "?" is null or undefined, if it is to stop the judgment immediately, 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

Obviously, only the value before "??" is null or undefined will it return the value after "??".

Promise

Promise is a solution for asynchronous programming, which is more reasonable than the traditional solution "callback functions and events".

You can get a little bit of it here, mainly to explain the following " async/await ", because many third-party plug-ins (such as axios) we use in development are encapsulated in Promise format, and we need to encapsulate ourselves at the beginning There is very little demand.

// 封装代码成Promise格式
const promiseA = ()=> new Promise(function(resolve, reject) {
  
  // === 你的代码 ===
  setTimeout(()=>{
    if(0.5 < Math.random()){
        resolve('成功');
    } else {
        reject('失败');
    }
    },200);
  // === 你的代码 ===
  
});

// 执行
promiseA().then(value=>{
    // '成功' == value
  console.log(value);
}).catch(error=>{
    // '失败' == error
  console.log(error);
});

async/await

The implementation of the Promise function is "more elegant". Take the above encapsulation of the "promiseA function" as an example:

function funA(){
  promiseA().then(value=>{
    console.log(value);
  }).catch(error=>{
    console.log(error);
  });
}

// 改写, 需要用try/catch来捕获"reject"触发的异常
async function funA(){
  try{
    const value = await promise();
    console.log(value);
  } catch(error){
    console.log(error);
  }
}

More

Here I just explain a few commonly used grammars to you, for more please refer to Yifeng's tutorial

🔥 vue3 introductory tutorial

The course starts from the 0 basics to help you learn step by step. Now you have completed the vue3 basic course part. Each lesson has a video (only 3 lessons are recorded for the time being, and the recording is still in progress), and the content is constantly updated every week.

https://www.yuque.com/books/share/c0ab3348-87ab-4e77-a34e-10ede7dfb00e

typescript

It is recommended that you use typescript to develop after learning the basics of vue3. This should be the mainstream development language of vue3 in the future. Here are some introductory articles of typescript.

First lesson, experience typescript

Second lesson, basic type and beginner advanced type

Lesson 3, Generic

Lesson 4, Interpreting Advanced Type

Lesson 5, What is a namespace

special, learn typescript from vue3🔥 source code🦕-"is"

Lesson 6, What is a declaration file (declare)? 🦕-Global Declaration

typescript-Practical articles, to achieve full browser screen (59 lines)

WeChat group

Thank you for reading. If you have any questions, you can add me to WeChat. I will pull you into the WeChat group (due to Tencent's 100-member limit on WeChat groups, after more than 100 people must be pulled in by group members)