网站导航
> 文章列表 > Vue3总结（持续更新）

Vue3总结（持续更新）

网友: 文章列表 2024-03-22 01:40:14

Vue3总结（持续更新）

一：ES6新特性
栈内存：存放基本数据类型的变量名和变量值；复杂（引用）数据类型的变量名和引用地址
堆内存：复杂数据类型的变量值

1.let命令
var 和 let的区别（var的三大bug）：

  • 作用域：var变量全局范围内有效，let变量仅在块级作用域内有效
  • 变量提升：var会发生变量提升现象，而let不会，即let必须先定义再使用
  • 变量重复声明：var在相同作用域内可以被重复声明，而let不允许重复声明

2.const命令
是一个只读的常量，声明时，必须赋初值，一旦声明，栈值就不能改变，

  • 对于基本数据类型，声明后值是不能改变的
  • 对于复杂数据类型，栈内的地址不能变，数据值（堆内存）是可以变的

3.变量的结构赋值
包括数组和对象的结构赋值

  • 数组： let [a, b, c] = [10, 20, 30];

  • 对象：let { name1, age1 } = { name1: ‘李四’, age1: 29 };
    4.对象的扩展
    包括属性的简写，方法的简写，扩展运算符，模版字符串

  • 属性的简写：：当属性名和值的变量名相同时，触发对象的属性简写let name = ‘张三’; const person ={name}

  • 方法的简写：去掉冒号和function，
    eat() {
    return ‘三顿’
    }

  • 扩展运算符：三个点（…）.可遍历属性。.三个点放在对象前，用于对象的合并等
    let z = { a: 10, b: 20 }
    let n = { …z, c: 30 };
    console.log(n) // {a: 10, b: 20, c: 30}

  • 模版字符串:模板字符串用反引号（）表示，嵌入变量用${}表示 let idCard = '360424198612121539'； let str = 身份证号码${idCard} `
    5.箭头函数
    主要针对的是函数变量，即带有函数名的函数；使用箭头（ => ）连接参数列表和函数体
    箭头函数的简化：

  • 参数只有一个时，括号可以省略
    const say = msg => {
    函数体
    }

  • 无参数时，括号不能省略
    const say = () => {
    函数体
    }

  • 参数多个时，括号不能省略
    const say = (x,y) => {
    函数体
    }

  • 可变参数，括号不能省略
    const say = (…args) => {
    函数体
    }

  • 函数体只有一条return时，可以省略大括号和return关键字
    const say2 = x =>x+1

  • 函数体包含多条语句时，不可以省略大括号和return关键字

  • 函数体中有一个对象时，省略大括号和return关键字后需要用小括号
    -const student2 = () => ({ name: ‘张三’, age: 25 })

6.模块语法

  • export:规定模块的对外接口，如果希望外部能够获取模块内的某个变量/函数/类，就必须在模块中使用export输出该变量/函数/类
    const PI = 3.1415
    const add = (a, b) => a + b
    export { PI as pi, add } //可以合在一起导出，也可以分别导出

  • import：引入模块
    //import { pi as PI, add } from ‘./demo1.js’
    import * as abc from ‘./demo1.js’ // 导入全部
    console.log(‘pi的值为：’, abc.pi)
    console.log(‘调用add函数：’, abc.add(40, 50))

  • export default：每个模块【只能够使用一次】，可以导出变量，常量，函数，类，匿名函数
    export default (a, b) => a + b //默认导出的是匿名函数
    对于export default导出的，导入时，不需要{}，并且变量名可以随意
    import 你家的孩子 from ‘./demo2.js’
    console.log(‘变量值为：’, 你家的孩子(3, 6))
    7.Promise异步编程
    Promise对象要点：
    原理：异步执行，当接口请求后，可以去做其他事情，等接口返回成功再渲染页面，接口返回失败也会有相应的提示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>8-1 promise对象.html</title>
</head><body><script>/*Promise对象要点：1.Promise对象是用于执行异步操作的2.可以使用Promise构造函数来创建实例对象3.Promise对象的.then方法调用后，返回的还是一个Promise对象4.Promise对象的.catch方法调用后，返回的还是一个Promise对象*//*步骤1:创建Promise对象1.调用构造函数，来创建Promise对象2.构造函数的参数，是一个函数【参数是函数】，它负责执行业务3.该函数接受2个参数作为参数4.第一个参数：是resolve（成功的）函数，可以是其他5.第二个参数：是reject（拒绝的）函数*/const p1 = new Promise((resolve, reject) => {console.log('1.异步请求开始，异步讨债开始')// 去讨债开始......// ......漫长的过程,....可以去干其它事情....  // 讨债结束.....const flag = falseif (flag) { //resolve方法执行后，则执行then的第一个参数return resolve('还钱成功!')//异步调用，只支持一个参数（可以是一个对象）} else {return reject('还钱失败!')//它们前面加上return语句，这样就不会有意外。}})       /*要点：1.then方法，也接收2个函数作为参数，但第二个参数是可选的2.当resolve方法调用时，会触发then的第一个参数3.当rreject方法调用时，会触发then的第二个参数*///步骤2:调用异步执行.then方法const p2 = p1.then((a) => {// throw new Error('4.人为模拟异常，还的钱是假钱...')console.log('3.进来了then的第一个方法，还钱成功了，用钱干什么，买手机。。。', a)}// , () => {//第二个参数是可选的//     console.log('3.进来了then的第二个方法，，还钱失败了，怎么办。。。')// })//还可以继续.then/*要点：1.catch方法，也接收1个函数作为参数2.当【前面】的方法中有异常时，才会触发catch的参数*/// 步骤3.调用catch方法，then方法有效const p3 = p2.catch((e) => {console.log(`catch方法被调用了${e}`)}).finally(() => { //无论如何都会执行console.log('finally')})console.log('2.底部的代码调用了，将在当前脚本所有同步任务执行完才会执行点then异步代码')//Promise 新建后立即执行，所以首先输出的是Promise。
//然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出。</script>
</body>
</html>
网络标签：

相关问题