vue/js总结合集

vuex的五大核心

内容作用映射位置调用其它
state设置状态mapStatecomputed
getters获取内容mapGetterscomputed计算数据后返回
mutations修改数据mapMutationsmethodscommit可以异步(不建议)不利于调试
actions异步操作mapActionsmethodsdispatch
modules模块拆分namespaced(命名空间)
plugins插件辅助

method/computed/watch区别

比较项methodcomputedwatch
触发多次多次触发一次计算每次触发
主被动主动调用被动调用主动监控
有无缓存
能否异步
立即监控immediate,深度监控deep

Vue 的生命周期钩子函数 

生命周期主要分成三个阶段,包括:创建、更新以及销毁阶段 

Vue 的生命周期钩子函数:
1. beforeCreate(): 在实例初始化之后调用 , data methods 都还没有初始化完成 , 通过 this 不能访问
2. created(): 此时 data methods 都已初始化完成 , 可以通过 this 去操作 , 可以在此发 ajax 请求
3. beforeMount(): 模板已经在内存中编译 , 但还没有挂载到页面上 , 不能通过 ref 找到对应的标签对象
4. mounted(): 页面已经初始显示 , 可以通过 ref 找到对应的标签 , 也可以选择此时发 ajax 请求
5. beforeUpdate(): 在数据更新之后 , 界面更新前调用 , 只能访问到原有的界面
6. updated(): 在界面更新之后调用 , 此时可以访问最新的界面
7. beforeDestroy(): 实例销毁之前调用 , 此时实例仍然可以正常工作
8. destroyed(): Vue 实例销毁后调用 , 实例已经无法正常工作了
9. deactivated(): 组件失活 , 但没有死亡
10. activated(): 组件激活 , 被复用
11. errorCaptured(): 用于捕获子组件的错误 ,return false 可以阻止错误向上冒泡 ( 传递 )

普通函数和箭头函数在 JavaScript 中区别 

普通函数和箭头函数在 JavaScript 中区别:

  1. 语法:

    • 普通函数使用 function 关键字声明,例如:function add(a, b) { return a + b; }
    • 箭头函数使用箭头符号 => 来声明,例如:(a, b) => a + b
  2. this 的指向:

    • 在普通函数中,this 的指向取决于函数被调用时的上下文;
    • 在箭头函数中,this 的指向是词法上的,它会捕获所在上下文的 this 值。
  3. arguments 对象:

    • 在普通函数中,可以使用 arguments 对象获取所有传入的参数;
    • 在箭头函数中,没有自己的 arguments 对象,需要使用 rest 参数 ...args 来获取所有参数。
  4. 构造函数:

    • 普通函数可以作为构造函数使用并创建新对象;
    • 箭头函数不能用作构造函数,不能使用 new 关键字调用。
  5. 返回值:

    • 如果箭头函数的函数体只有一行,且不需要额外处理,可以省略花括号和 return 关键字;
    • 普通函数则需要显式使用 return 返回值。

总的来说,箭头函数主要用于匿名函数和回调函数的简洁书写,而普通函数则更灵活,适用于更多的场景。

普通函数和箭头函数在内存中的存储方式区别 

在 JavaScript 中,普通函数和箭头函数在内存中的存储方式是有所不同的。

普通函数:

  • 普通函数会被存储在堆内存中,并且会在代码执行阶段被解析和存储。
  • 普通函数会创建自己的执行上下文,并且会在调用时动态生成 this 和 arguments 对象。

箭头函数:

  • 箭头函数则不同,它们的定义是固定的,由于箭头函数没有自己的执行上下文,它们会捕获定义时的上下文。
  • 箭头函数并不会创建自己的 this,而是继承外层作用域的 this 值。

因此,由于箭头函数的特性,它们在内存中的存储方式可能更为简单,不需要额外存储执行上下文,而普通函数则需要更多的内存空间来存储函数自身的信息以及执行上下文

常用的数组操作方法 

JavaScript 中有许多用于操作数组的方法,这些方法可以帮助你对数组进行增删改查等操作。常用的数组操作方法:

  1. push():向数组末尾添加一个或多个元素,并返回新的长度。

  2. pop():删除并返回数组的最后一个元素。

  3. shift():删除并返回数组的第一个元素。

  4. unshift():向数组的开头添加一个或多个元素,并返回新的长度。

  5. concat():用于合并两个或多个数组,不会修改原数组,返回一个新数组。

  6. slice():从原数组中返回选定的元素,不会修改原数组。

  7. splice():向/从数组中添加/删除项目,然后返回被删除的项目。

  8. forEach():对数组中的每个元素执行指定操作。

  9. map():对数组中的每个元素执行指定操作,并返回一个新数组。

  10. filter():通过指定函数测试数组中的每个元素,并返回符合条件的元素组成的新数组。

  11. find():返回数组中满足提供的测试函数的第一个元素的值,否则返回 undefined。

  12. indexOf():返回数组中指定元素的第一个索引,如果不存在则返回 -1。

  13. includes():判断数组中是否包含指定元素,返回 true 或 false。

  14. some():测试数组中的某些元素是否通过了指定函数的测试。

  15. every():测试数组的所有元素是否通过了指定函数的测试。

mapforEach 区别 

mapforEach 都是 JavaScript 中用于遍历数组的方法,它们之间的区别在于返回值和使用方式:

  1. 返回值:

    • map 方法会返回一个新数组,新数组的每个元素是对原数组中的相应元素调用函数处理后的结果。
    • forEach 方法不返回任何值(undefined),它只用于遍历数组并对每个元素执行指定操作。
  2. 使用方式:

    • map 方法通常用于需要对数组中的每个元素进行处理并生成一个新数组的情况。例如,将数组中的每个元素乘以 2 并返回新的数组。
    • forEach 方法用于遍历数组,并在遍历过程中执行指定的操作,但它不会返回新数组。通常用于对数组元素进行遍历操作,而不需要生成新的数组。

举例来说,如果我们有一个数组 [1, 2, 3],我们想要将每个元素都加倍并得到一个新的数组,我们可以使用 map 方法:

javascript复制代码

const arr = [1, 2, 3]; 
const doubledArr = arr.map((num) => num * 2); // doubledArr 现在是 [2, 4, 6]

如果我们只是想简单地对数组中的每个元素进行打印操作,那么可以使用 forEach 方法:

javascript复制代码

arr.forEach((num) => { console.log(num); }); // 依次打印出 1, 2, 3

因此,根据需要选择合适的方法来操作数组,如果需要生成新的数组并对每个元素进行处理,则使用 map 方法;如果只是遍历数组并对每个元素执行某些操作,则使用 forEach 方法。

Vue 事件修饰符 

在 Vue.js 中,事件修饰符是用来在处理 DOM 事件时提供额外控制的方式。Vue.js 提供了一些内置的事件修饰符

常用的 Vue 事件修饰符:

  1. .stop:阻止事件冒泡。

    <a @click.stop="doSomething">阻止冒泡</a>
  2. .prevent:阻止事件默认行为。

    <form @submit.prevent="onSubmit">阻止默认提交行为</form>
  3. .capture:事件将在捕获阶段触发。

    <div @click.capture="doSomething">捕获阶段触发</div>
  4. .self:只当事件是从事件源(而不是子元素)触发时触发回调。

    <div @click.self="doSomething">只有点击该 div 元素本身时触发</div>
  5. .once:事件只触发一次。

    <button @click.once="doSomething">只触发一次</button>
  6. .passive:指示浏览器不要调用 preventDefault()。

    <div @touchmove.passive="handleTouchMove">passive 修饰符</div>
  7. .native:监听组件根元素的原生事件。

    <my-component @click.native="handleClick">监听组件根元素的 click 事件</my-component>

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

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

相关文章

Docker 中安装 Redis

要在 Docker 中安装 Redis&#xff0c;你可以按照以下步骤进行操作&#xff1a; 拉取 Redis 镜像&#xff1a;在命令行中执行以下命令&#xff0c;从 Docker Hub 上拉取 Redis 镜像&#xff1a; docker pull redis 运行 Redis 容器&#xff1a;执行以下命令来在 Docker 中运行…

一文速通自监督学习(Self-supervised Learning):教机器自我探索的艺术

一文速通自监督学习&#xff08;Self-supervised Learning&#xff09;&#xff1a;教机器自我探索的艺术 前言自监督学习是什么&#xff1f;自监督学习的魔力常见的自监督学习方法1. 对比学习2. 预测缺失部分3. 旋转识别4. 时间顺序预测 结语 &#x1f308;你好呀&#xff01;…

蓝桥杯单片机快速开发笔记——特训1 LED闪烁和数码管同步显示

一、示例题目&#xff1a; 在CT107D单片机综合训练平台上&#xff0c;通过I/O模式编写代码&#xff0c;实现以下功能&#xff1a; 系统上电后&#xff0c;初始状态为关闭蜂鸣器、继电器、全部指示灯和数码管&#xff0c;然后进入循环&#xff0c;实现灯光闪烁和数码管计数。数…

代码随想录Day32

Day 32 贪心算法 Part03 今日任务 1005.K次取反后最大化的数组和 加油站 分发糖果 代码实现 1005.K次取反后最大化的数组和 这题有点思路&#xff0c;和题解也差不多&#xff0c;但是没完全通&#xff0c;感觉很复杂&#xff0c;无法下手 public int largestSumAfterKNeg…

Docker新手攻略:编辑Dockerfile、构建镜像、启动容器全攻略

万能dockerfile编写模板文件 FROM openjdk:11.0 as builder WORKDIR application ARG JAR_FILEtarget/*.jar COPY ${JAR_FILE} application.jar RUN java -Djarmodelayertools -jar application.jar extractFROM openjdk:11.0 WORKDIR application COPY --frombuilder applica…

Springboot项目结构

1. 一个正常的企业项目里一种通用的项目结构和代码层级划分的指导意见&#xff1a; 一般分为如下几层&#xff1a; 开放接口层 终端显示层 Web 层 Service 层 Manager 层 DAO 层 外部接口或第三方平台 2. 以当下非常火热的Spring Boot典型项目结构为例&#xff0c;创建出…

typeScript3(数组类型)

类型[ ] let arr: number[] [1,2,3] //数字类型的数组 let arr:string[] [1, 2] //字符串类型的数组 let arr:any[] [1,2,false] //任意类型的数组 数组泛型 Array<类型> let arr:Array<number> [1,2,3] 接口表示数组 //只要索引的类型是数字时&#xff0c;那…

Java基础---IO流习题

使用对象IO流简单练习一个图书管理系统 Book类&#xff08;书类&#xff09; package day2024_03_21.pojo;import java.io.Serializable;public class Book implements Serializable {private static final long serialVersionUID 1L;private Integer BookId;private Stri…

import * as的使用

import * as 是将一个模块的所有导出内容作为一个命名空间对象导入到当前模块中&#xff0c;其中 * 表示导入该模块中的所有导出内容&#xff0c;而 as 则用于指定导入的命名空间对象的名称。 例如&#xff1a;在 formatter 文件中有两个方法导出 const a () > {console.…

代码随想录算法训练营第三十四天 |1005. K 次取反后最大化的数组和 、134. 加油站、135. 分发糖果

代码随想录算法训练营第三十四天 |1005. K 次取反后最大化的数组和 、134. 加油站、135. 分发糖果 1005. K 次取反后最大化的数组和题目解法 134. 加油站题目解法 135. 分发糖果题目解法 感悟 1005. K 次取反后最大化的数组和 题目 解法 考虑绝对值 class Solution { public…

亚马逊广告八大打法,新手卖家须知

在亚马逊平台上&#xff0c;商家们可以利用各种广告产品来推广他们的商品和品牌。今天给大家分享亚马逊上常见的八种广告打法&#xff01; 亚马逊广告八大打法 一、Coupon白帽刷广告法 1️⃣ 发布大额优惠券&#xff1a;在产品详情页提供引人注意的大额优惠券&#xff08;打折幅…

图像分类的实战案例

图像分类是计算机视觉领域的一个基本任务&#xff0c;它在许多实际应用中都有广泛的应用。以下是一些图像分类的实战案例&#xff1a; 人脸识别&#xff1a; 应用&#xff1a;安全监控、身份验证、社交媒体面部标记。实例&#xff1a;使用深度学习模型识别和验证图像中的人脸&…

前端理论总结(css3)——css动画与js动画区别 // 选择器/优先级

一、 css动画与js动画区别 1&#xff1a;js是逐帧动画&#xff0c;css是补间动画。 2&#xff1a;js动画控制能力很强可以在动画播放过程中对动画进行控制&#xff1a;开始、暂停、回放、终止、取消都是可以做到的 3&#xff1a;js动画使用CPU运算&#xff0c;会阻…

真机笔记(3) 真机需求讲解

目录 拓扑分析&#xff1a; 设计理念&#xff1a; 1. 生产区交换需求&#xff1a; 2. 生产区交换需求&#xff1a; 3. 服务器区交换需求&#xff1a; 4. 路由设计 5. 地址规划&#xff1a; 拓扑分析&#xff1a; 蓝色&#xff1a;网线 红色&#xff1a;多模光纤 黄色&am…

【SpringBoot框架篇】37.使用gRPC实现远程服务调用

文章目录 RPC简介gPRC简介protobuf1.文件编写规范2.字段类型3.定义服务(Services) 在Spring Boot中使用grpc1.父工程pom配置2.grpc-api模块2.1.pom配置2.2.proto文件编写2.3.把proto文件编译成class文件 3.grpc-server模块3.1.pom文件和application.yaml3.2.实现grpc-api模块的…

Rust 语言中 Vec 的元素的删除方法

在 Rust 中&#xff0c;Vec&#xff08;向量&#xff09;提供了多种删除元素的方法。以下是一些常用的删除方法&#xff1a; remove: 这是最常用的删除方法&#xff0c;它接受一个索引作为参数&#xff0c;并移除该索引处的元素&#xff0c;同时返回被移除的元素。所有后面的元…

Java贪心算法(含面试大厂题和源码)

贪心算法是一种在每一步选择中都采取在当前状态下最好或最优&#xff08;即最有利&#xff09;的选择&#xff0c;从而希望导致结果是全局最好或最优的算法策略。贪心算法解决问题的过程中&#xff0c;每一步都做出一个看似最优的决定&#xff0c;它永远不会回溯&#xff0c;这…

洛谷刷题 | B3623 枚举排列

枚举排列 题目描述 今有 n n n 名学生&#xff0c;要从中选出 k k k 人排成一列拍照。 请按字典序输出所有可能的排列方式。 输入格式 仅一行&#xff0c;两个正整数 n , k n, k n,k。 输出格式 若干行&#xff0c;每行 k k k 个正整数&#xff0c;表示一种可能的队…

2-Flume之Sink与Channel

Flume Sink HDFS Sink 将数据写到HDFS上。数据以文件形式落地到HDFS上&#xff0c;文件名默认是以FlumeData开头&#xff0c;可以通过hdfs.filePrefix来修改 HDFS Sink默认每隔30s会滚动一次生成一个文件&#xff0c;因此会导致在HDFS上生成大量的小文件&#xff0c;实际过程…