Vue3和Vue2有什么区别

区别生命周期的变化 整体来看,变化不大,只是名字大部分需要 + on,功能上类似。使用上 Vue3 组合式 API 需要先引入;Vue2 选项 API 则可直接调用,如下所示。 // vue3 <script setup> import { onMounted } from 'vue' onMounted(() => { ... }) // 可将不同的逻辑拆开成多

- 阅读全文 -

带你了解Pinia和Vuex两个状态管理模式

Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia。 本文将通过Vue3的形式对两者的不同实现方式进行对比,让你在以后工作中无论使用到Pinia还是Vuex的时候都能够游刃有余。既然我们要对比两者的实现方式,那么我们肯定要先在我们的Vue3项目中引入这两个状态管理器(实际项目中千万不要即用Vuex又

- 阅读全文 -

JS预解析

1.JS引擎运行JS分为两步预解析代码执行(1) 预解析:JS引擎会把JS里面的所有var和function提升到当前作用域的最前面(2) 代码执行:按照代码书写的顺序从上往下执行2.预解析分为变量预解析(变量提升)和函数预解析(函数提升)(1) 变量提升:就是把所有的变量声明提升到当前的作用域最前面,不提升赋值操作(2) 函数提升:就是把所有的函数声明提升到当前的作用域最前面,不调用函数

- 阅读全文 -

原生Js中的onLoad事件

document.addEventListener('DOMContentLoaded', (event) => { console.log('DOM fully loaded and parsed'); // DOM 完全加载以及解析 });

- 阅读全文 -

JS函数

函数:就是封装了一段可以被重复执行调用的代码块。目的:就是让大量函数能够重复使用。一、声明函数:1.利用函数关键字自定义函数(命名函数)function 函数名(){ //函数体 }2.函数表达式(匿名函数)var 变量名 = function(){ //函数体 }二、调用函数:函数名();三、arguments对象中储存了传递的所有实参。

- 阅读全文 -

JS数组

一、数组(Array) 1.数组就是一组数据的集合,存储在单个变量下的优雅方式。 2.利用new 创建数组 var arr = new Array(); //创建了一个空的数组。 3.利用数组字面量创建数组[] var arr = []; //创建了一个空的数组。 4.获取数组元素 数组名[索引号] 5.遍历数组:就是把数组的元素从头到尾访问一次 for (var i = 0; i <

- 阅读全文 -

JS流程控制

一.分支控制 1.if语句 if(条件表达式){ //执行语句 } 2.if else双分支语句 if(条件表达式){ //执行语句1 } else { //执行语句2 } 3.if else if多分支语句 if(条件表达式1){ //执行语句1 } else if (条件表达式2) { //执行语句2 } else if (条件表达式3) { //执行语句3 } e

- 阅读全文 -

原生Js实现轮播图

效果演示HTML代码<div class="container-slider"> <!-- Slider Container with images... --> <div class="slides"></div> <!-- Previous Button

- 阅读全文 -

JS字符串检测长度、检测类型、类型转换

//1.检测获取字符串的长度 变量.length num.length //2.检测变量的数据类型 typeof 变量 typeof numnum.length //3.把其他型转换为字符串型 //3.1.变量.toString() num.toString() //3.2.String(变量) String(num) //3.3..利用 + 拼接字符串的方法实现转换效果 隐式转换 num+''

- 阅读全文 -

编写优雅 TypeScript 代码的 7 个技巧

能跑的代码并不意味着就是干净的代码。干净的代码指的是组织整齐、易于阅读、易于理解且易于维护的代码。今天我们要介绍的是如何在React中实现干净代码的7个技巧,以便我们可以轻松地维护代码!1. 为所有值提供显式类型在使用TypeScript时,很多人常常会忽略提供显式类型的过程,从而错过了TypeScript所能提供的强大特性。代码库中经常可以看到这样的代码:错误示例01:const Compone

- 阅读全文 -