【退役之重学前端】vite, vue3, vue-router, vuex, ES6学习日记

学习使用vite+vue3的所遇问题总结(2024年2月1日)

  1. 组件中使用<script>标签忘记加 setup
    在这里插入图片描述

这会导致Navbar 没有暴露出来,导致使用不了,出现以下报错
在这里插入图片描述
这是因为,如果不用setup,就得使用 export default ……
setup 是后者的语法糖

  1. 在Vue.js中,你可以通过route对象来接收从router-link传递过来的参数。具体来说,你可以使用route对象的params属性来获取路由参数。

  2. 通过 传递的参数,都需要设置到路由中,否则会丢失参数
    在这里插入图片描述
    在这里插入图片描述

vite/vue3/vue-router/vuex 已经整体上掌握,开始复习ES6(2024年2月2日)

学习资料来源: 菜鸟教程

let 和 const 命令。

  1. let 块级作用域
 for (let i = 0; i < 10; i++) {// ...
}
  1. const 声明一个只读变量,声明之后不允许改变。意味着,一旦声明必须初始化,否则会报错。

  2. 注意要点
    const 如何做到变量在声明初始化之后不允许改变的?其实 const 其实保证的不是变量的值不变,而是保证变量指向的内存地址所保存的数据不允许改动。此时,你可能已经想到,简单类型和复合类型保存值的方式是不同的。是的,对于简单类型(数值 number、字符串 string 、布尔值 boolean),值就保存在变量指向的那个内存地址,因此 const 声明的简单类型变量等同于常量。而复杂类型(对象 object,数组 array,函数 function),变量指向的内存地址其实是保存了一个指向实际数据的指针,所以 const 只能保证指针是固定的,至于指针指向的数据结构变不变就无法控制了,所以使用 const 声明复杂类型对象时要慎重。

  3. ES6 解构赋值
    解构赋值是对赋值运算符的扩展。
    他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。

  4. ES6 引入了一种新的原始数据类型 Symbol ,表示独一无二的值,最大的用法是用来定义对象的唯一属性名。
    注意点
    Symbol 值作为属性名时,该属性是公有属性不是私有属性,可以在类的外部访问。但是不会出现在 for…in 、 for…of 的循环中,也不会被 Object.keys() 、 Object.getOwnPropertyNames() 返回。如果要读取到一个对象的 Symbol 属性,可以通过 Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 取到。

  5. ES6 Map 与 Set
    Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。

  6. Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。
    Proxy 不直接操作对象,而是像代理模式,通过对象的代理对象进行操作;
    通过构造函数新建实例时其实是对目标对象进行了浅拷贝,因此目标对象与代理对象会互相影响;
    get() 方法可以继承,let obj = Object.create(proxy);
    Reflect 可以用于获取目标对象的行为,它的方法与 Proxy 是对应的。

  7. 箭头函数
    箭头函数体中的 this 对象,是定义函数时的对象,而不是使用函数时的对象。

  8. 在JavaScript中,如果一个函数没有明确的return语句或者没有返回值,它会默认返回"undefined"。而且就算是return了而没有执行,它此时的类型也是undefined。

  9. class 的本质是 function。
    它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。
    类中方法不需要 function 关键字。
    方法间不能加分号。

  10. ES6 模块
    ES6 的模块自动开启严格模式,不管你有没有在模块头部加上 use strict;。

  11. ES6 Promise 对象
    是异步编程的一种解决方案。

从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。

vite, vue3, vue-router, vuex, ES6 学习完成 (2024年2月4日)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/451941.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux笔记之bash和expect脚本中的$和$argv参数匹配

Linux笔记之bash和expect脚本中的 和 和 和argv参数匹配 —— 杭州 2024-02-03 code review! 文章目录 Linux笔记之bash和expect脚本中的 和 和 和argv参数匹配1.bash脚本2.expect脚本 1.bash脚本 在Linux的bash脚本中&#xff0c;参数和脚本文件名的变量使用方式与你提供的稍…

React Hooks 学习笔记

1.useState&#xff08;&#xff09; 实现对页面数据的存储&#xff0c;当数据改变时候&#xff0c;自动触发render函数 2.useRef 用来解决两个问题&#xff1a; 1).是获取DOM元素或子组件的实例对象 2).存储渲染周期之间共享的数据 3.useEffect 4.useLayoutEffect 5…

自研人工智能小工具-小蜜蜂(国外ChatGpt的平替)

国内有非常多好用的人工智能工具&#xff0c;但均无法完全替代国外ChatGpt。 ChatGPT相较于其他国内工具的优势在于以下几点&#xff1a; 创新的语言生成能力&#xff1a;ChatGPT是由OpenAI开发的先进的自然语言生成模型&#xff0c;它采用了大规模的预训练和精细调整方法。因此…

DelayQueue的使用

具体思路&#xff1a; 在容器初始化的时候就创建出一个 延迟队列 然后项目启动后随即启动一个线程一直监听这个队列 手动调用接口往队列中添加任务 依赖 一个最简单的web的应用即可项目文件结构 第一步&#xff1a;在项目启动的时候就创建出一个延迟队列 Configuration publ…

明道云入选亿欧智库《AIGC入局与低代码产品市场的发展研究》

2023年12月27日&#xff0c;亿欧智库正式发布**《AIGC入局与低代码产品市场的发展研究》**。该报告剖析了低代码/零代码市场的现状和发展趋势&#xff0c;深入探讨了大模型技术对此领域的影响和发展洞察。其中&#xff0c;亿欧智库将明道云作为标杆产品进行了研究和分析。 明…

nodejs+vue+ElementU教师科研管理系统l33wm

本次开发一套高校教师科研管理系统有管理员&#xff0c;教师&#xff0c;学院三个角色。管理员功能有个人中心&#xff0c;教师管理&#xff0c;学院管理&#xff0c;科研课题管理&#xff0c;软件著作权管理&#xff0c;论文信息管理&#xff0c;专利信息管理&#xff0c;科研…

移动云ONAIR媒体云全解读!媒体内容数字化融合一站式解决方案

当下&#xff0c;传统媒体面临着诸多挑战&#xff0c;如何利用信息技术提升内容的质量、形式和分发效率&#xff0c;成为媒体行业的迫切需求。移动云作为数字中国建设的“主力军”&#xff0c; 立足于新兴媒体与云计算市场的变化与需求&#xff0c;推出了ONAIR 媒体云解决方案&…

【lesson9】高并发内存池Page Cache层释放内存的实现

文章目录 Page Cache层释放内存的流程Page Cache层释放内存的实现 Page Cache层释放内存的流程 如果central cache释放回一个span&#xff0c;则依次寻找span的前后page id的没有在使用的空闲span&#xff0c;看是否可以合并&#xff0c;如果合并继续向前寻找。这样就可以将切…

【Linux Day14 UDP网络通讯】

UDP网络通讯 UDP报文结构&#xff1a; 16位源端口&#xff1a;用于记录发送端的端口号&#xff08;占用两个字节&#xff09;16位目的端口&#xff1a;用于记录接收端的端口号&#xff08;占用两个字节&#xff09;16位UDP长度&#xff1a;确定UDP报文总长度&#xff0c;&…

Leetcode92:反转链表II(区间反转链表)

一、题目 给你单链表的头指针 head 和两个整数 left 和 right &#xff0c;其中 left < right 。请你反转从位置 left 到位置 right 的链表节点&#xff0c;返回 反转后的链表 。 示例&#xff1a; 输入&#xff1a;head [1,2,3,4,5], left 2, right 4 输出&#xff1a…

排序——选择排序

基本思想 每一趟在待排序元素中选取关键字最小的元素加入有序子序列。 算法代码 #include <iostream> using namespace std;//选择排序 void SelectSort(int nums[],int n){int i,j,min;for(i0;i<n-1;i){ //一共需要进行 n-1 趟 mini; //记录最小元素的下…

Java split 分割字符串避坑

使用split进行字符串分割时需要注意2点 1、特殊字符作为分隔符时需要使用\\进行转义(如\\ -> \\\\; | -> \\| ) 特殊字符 .$|()[{^?*\\ 例如对"|"分隔 未转义 String str "01|02|03"; String[] strArr str.split("|");System.out.…