muzidigbig的博客_CSDN博客-vuejs,js问题锦囊,nodejs领域博主

原创 Vue生命周期(keep-alive缓存特殊activated(组件激活时)、deactivated(组件停用时))、父子组件的执行顺序

随着对 vue 的不断了解，会越来越发现它生命周期的重要性，只有了解了它的生命周期，才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件，即很好的控制页面。一、什么是 vue 生命周期Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。下面是官网中的生命周期照片二、生命周期函数Vue 的生命周期主要共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/

2021-01-16 12:24:24 13407 7

原创 js编程黑科技，装逼指南，高逼格代码，让你惊叹不已

1.如何装逼用代码骂别人SB(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]2.如何用代码优雅的证明自己NB([][[]]+[])[+!![]]+([]+{})[!+[]+!![]]3.另外一种undefinedvar data = void 0; // undefined4.论如何优雅...

2019-04-03 16:56:36 6751

原创前端好用工具推荐

1.图片处理工具Jinaconvert工具网站地址：https://jinaconvert.com/cn/这款图片处理工具也相当的强大，想要的各种各样的格式（JPG, PNG, GIF, BMP, TIFF, ICO, SVG和更多图片格式）都可以转换，在编程和生活中都可以用得到，赶紧收藏起来吧。2.代码在线测试工具 https://tool.lu/可以对js、css、...

2019-04-03 12:20:17 833

原创 js-函数（闭包、私有、递归、自调）、变量(隐士)和作用域

JavaScript 函数将脚本编写为函数，就可以避免页面载入时执行该脚本。打印定义的函数名就相当于打印这整个函数函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的 .js 文件，那么甚至可以从其他的页面中调用）。创建函数的语法：function 函数名(var1,var2,...,var...

2018-06-21 16:51:05 1774 1

原创 pc端和移动端默认样式重置(rem布局)

首先说一下，为何要用重置样式除了省心之外，还有两个好处1.方便设计师/程序员发挥白纸的感觉确实好。各种margin，padding，border的为0。。。2.便于发现前端代码的遗漏用了reset后，如果“blockquote、ol、ul、hn等语义元素在没有赋以其他合理的样式”，会非常扎眼（任何人都看得出来），开发者第一反应会是“卧槽忘了写”并迅速补救。并迅速补救。但如果没r...

2018-06-05 19:20:31 1270 1

原创 vue.js 三种方式安装(vue-cli)

Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。下面介绍三种 Vue.js 的安装方法： 1.独立版本我们可以在Vue.js的官网上直接下载vue...

2018-05-29 07:49:05 269902 113

原创文本在盒子中水平、垂直居中（图片与文本居中）、多行文本垂直居中

在样式布局中，我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单：对文本，只需要对其父级元素设置text-align: center;，而对div等块级元素，只需要设置其left和right的margin值为auto。要实现元素的垂直居中，有人会想到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，例如表格元素中的<td>、<t...

2018-05-23 10:37:12 25017 2

原创 html默认css样式的标签及去除(全局)

1.标签的默认样式和清除默认样式（统一全局样式）的代码大多数标签都有自己的默认样式，比如遇到的body默认外边距，另外本例中ul前的圆点及左侧的内边距，另h1-h6字体大小各不相同，em默认为斜体，strong表示粗体。正因为有这些默认样式，一个设计合理的页面，即使没有加载样式，也能让用户很容易阅读。但此时这些默认样式对我们没用，所以需要清除掉，为了方便，建议用标签重定义方式，这样可以很简单地...

2018-05-19 09:27:11 37265

转载 Vue的双向数据绑定原理

Vue的双向数据绑定原理先说面试答案：答：vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过来劫持各个属性的，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步：需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步compile(模板解析器)解析模板指令，将模板中的变量替换成数据，然后初始化。

2023-03-27 15:09:48 4

原创 Vuex页面刷新数据丢失的问题

为什么说刷新页面vuex的数据会丢失刷新页面vuex的数据会丢失属于正常现象，(vuex的数据并不是弄丢了，而是初始化了，回到初始值，回到原点了).因为JS的数据都是保存在浏览器的堆栈内存里面的，刷新浏览器页面，以前堆栈申请的内存被释放，这就是浏览器的运行机制，那么堆栈里的数据自然就清空了。

2023-03-20 16:17:50 273

原创 JavaScript：反转数组的四种方法

在上面的代码中，我们使用Math.floor向下舍入( i < Math.floor(arr.length/2) ) i < Math.floor(arr.length/2)给定数组的一半元素。reverseArray1函数将一个数组( arr )作为参数，并通过向后循环遍历给定的数组，以相反的顺序创建一个相同元素的新数组( newArr )( let i = arr.length - 1;数组的最后一个元素将是循环的起点(arr.length — 1) ，它将一直运行直到到达数组的起点(i ≥ 0)

2023-03-14 16:05:48 355

原创 js对url进行编码解码（三种方式）

js对url进行编码解码

2022-11-08 15:02:22 6536

原创后端一次给你10万条数据，如何优雅展示，到底考察我什么?

后端一次给你10万条数据，如何优雅展示，到底考察我什么?requestAnimationFrame文档碎片 + requestAnimationFrame懒加载

2022-07-22 10:31:15 801

原创 $forceUpdate的使用详解

$forceUpdate官网的定义是——迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。官网地址学习👉vm.$forceUpdate()1、主要用来解决强制刷新视图和数据。2、结合vue生命周期，调用$forceUpdate后会触发beforeUpdate和updated这两个钩子函数，不会触发其他钩子函数。使用场景：1、数据层次太多，数据修改了，但页面没有重新渲染；2、如果在vue的data中没有进行声明，给没声明的属性赋值（即非响应式的

2022-04-18 13:20:12 2853

原创刨析 JS 中的forEach、for in、for of三类循环原理和性能

一、for 循环和 while 循环的性能对比优点：程序简洁，结构清晰，循环初始化，循环变量化，循环体和循环条件位置突出循环是可以中断循环（利用break语句或return语句）。缺点：结构比while循环复杂，容易出编码错误let arr = new Array(999999).fill(1)console.time('forTime')for(let i = 0; i< arr.length; i++){}console.timeEnd('forTi...

2022-04-01 16:14:57 2812 4

原创 npm安装机制

说在前面我们在开发前端项目的时候经常会用到诸如 npm install来初始化依赖，这个过程中究竟发生了哪些事情，每次都需要从网络端重新下载依赖吗？安装依赖时，总会有一些莫名其妙的报错，这个时候我们只要删除package-lock.json，然后删除node_modules重新下载依赖，这样就能顺利安装依赖了，到底是为什么呢？让我们带着疑问一起往下走。经常使用npm的小伙伴应该知道，项目中用到的依赖，大部分都不是全局安装的，两个不同的项目，即使依赖的包完全一致，初始化都需要重新执行一遍 np

2022-03-27 22:44:33 1595

原创浏览器缓存、HTTP缓存（强缓存、协商缓存），浏览器缓存和CDN的关系

一、什么是浏览器缓存？浏览器将请求过的资源（html、js、css、img）等，根据缓存机制，拷贝一份副本存储在浏览器的内存或者磁盘上。如果下一次请求的url相同时则根据缓存机制决定是读取内存或者磁盘上的数据还是去服务器请求资源文件。缓存通过url来判断，如果url不同则是新的资源。所以我们开发时前端会将一些js、css等文件在后面加hash值来避免资源更新时浏览器仍读取缓存文件，导致需要刷新才能获取新的资源的问题。这种做法虽然解决了js、css等文件的更新，这种加hash的就不在这篇文章说了，

2022-02-28 13:17:39 1110

原创 JavaScript：彻底理解同步、异步和事件循环(Event Loop)

一. 执行栈JS运行的环境称之为宿主环境。执行栈：call stack，一个数据结构，用于存放各种函数的执行环境，每一个函数执行之前，它的相关信息会加入到执行栈。函数调用之前，创建执行环境，然后加入到执行栈；函数调用之后，销毁执行环境。（单线程不容易冲突，但是效率低）浏览器执行线程浏览器是多进程的，浏览器每一个 tab 标签都代表一个独立的进程，其中浏览器渲染进程（浏览器内核）属于浏览器多进程中的一种，主要负责页面渲染，脚本执行，事件处理等。浏览器宿主环境中包含5个线程：...

2022-02-23 11:23:12 350 1

原创 vue核心之虚拟DOM(vdom)与真实DOM页面渲染过程

vue核心之虚拟DOM(vdom)与真实DOM页面渲染过程一、真实DOM和其解析流程？浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。第三步，将DOM树和样式表，关联起来，构建一颗Render树(这一过程又称为A

2022-02-23 10:52:51 916

原创 git rebase和merge区别

一、概述merge和rebase标题上的两个命令：merge和rebase都是用来合并分支的。这里不解释rebase命令，以及两个命令的原理，详细解释参考这里。下面的内容主要说的是两者在实际操作中的区别。1.1 什么是分支分支就是便于多人在同一项目中的协作开发。比方说：每个人开发不同的功能，在各自的分支开发过程中互不影响，完成后都提交到develop分支。极大的提高了开发的效率。1.2 合并分支每个人创建一个分支进行开发，当开发完成，需要合并到develop分支的时候，就需要

2022-01-16 10:49:12 7482 1

转载一份不可多得的 TS 学习指南

一、TypeScript介绍TypeScript 由微软开发的自由和开源的编程语言。TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。TypeScript使用现有的JavaScript代码，包括流行的JavaScript库，并从JavaScript代码中调用TypeScript代码。TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。TypeScrip

2022-01-10 10:10:33 781

原创 JS中String、string和““的区别

1、new String()var str = new String("csdn"); //类型为object表示类型引用，构造函数新建对象，在运行时创建2、String()var str = String("csdn"); //类型为string表示类型转换，类比的还有Number、Boolean、Object ..String()与 .toString()都是可以转换为字符串类型，但是String()与 .toString()的还是有区别：.toString()可以将所有

2022-01-07 13:32:06 1200

原创 git cherry-pick的使用教程

对于多分支的代码库，将代码从一个分支转移到另一个分支是常见需求。这时分两种情况：一种情况是，你需要另一个分支的所有代码变动，那么就采用合并（git merge）；另一种情况是，你只需要部分代码变动（某几个提交），这时可以采用 Cherry pick。一、基本用法git cherry-pick命令的作用，就是将指定的提交（commit）应用于其他分支。git cherry-pick <commitHash>上面命令就会将指定的提交com...

2022-01-05 14:15:33 6049

原创 Vue---实例属性$options(获取data外面的数据和方法)

一、概述大家都知道如何在Vue创建一个实列const vm = new Vue(options)在这里把Vue的实例命名为vm，这是尤雨溪的习惯，我们沿用vm对象封装了对视图的所有操作，包括数据读写、事件绑定、DOM更新...vm的构造函数是Vue，按照ES6的说法，vm所属的类是Vueoptions是 new Vue 的参数，我们一般称之为选项或者构造选项，用于当前 Vue 实例的初始化选项。二、那么options里面有什么呢？options的五类属性：数据：data

2021-12-24 14:32:42 2455

原创 Vue性能提升之Object.freeze()

一、序在 Vue 的文档中介绍数据绑定和响应时，特意标注了对于经过 Object.freeze() 方法的对象无法进行更新响应。因此，特意去查了 Object.freeze() 方法的具体含义。二、含义Object.freeze() 方法用于冻结对象，禁止对于该对象的属性进行修改（由于数组本质也是对象，因此该方法可以对数组使用）。在 Mozilla MDN 中是如下介绍的：可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修

2021-12-24 10:38:50 3226 2

原创 Vue---如何更好的封装组件？几个小技巧助你成为组件封装达人，让我们封装的组件更加优雅易用

在进行组件通信时，经常会遇到这样的需求：父组件A给子组件B传值，B组件又继续传递给C，最终执行的是C。也就是说，B只是中间起了传递作用，啥也没干。如果是这样的需求，按父子组件的通信的规则，B得接收信息，并继续传递，对B组件来说是冗余；而用vuex呢？那更是大材小用杀鸡用牛刀了。那咋办呢？如何能快速达到目的、而且代码不拖沓？$attrs和$listeners就派上了用场。一、$attrs正常情况下，Vue推荐用props向子组件参数。但是在特定场景下，使用$attrs 会更方便。

2021-12-21 15:04:30 766

原创面试题---Set和Map的区别；Map和Object 的区别

一、Set和Map的区别简述：Set 和 Map 主要的应用场景在于数据重组和数据储存。 Set 是一种叫做集合的数据结构，Map 是一种叫做字典的数据结构。集合与字典的区别：共同点：集合、字典可以储存不重复的值不同点：集合是以 [value, value]的形式储存元素，字典是以 [key, value] 的形式储存集合（Set）：ES6 新增的一种新的数据结构，类似于数组，成员唯一（内部元素没有重复的值）。且使用键对数据排序即顺序存储。Set 本身是一种构

2021-12-17 15:26:18 3824 2

原创 Ajax与Axios的区别

一、Axiosaxios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中特点：从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求支持 Promise API 拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF二、AjaxAjax 是 Asynchronous JavaScript and X...

2021-12-15 22:36:48 323

原创 Vue hash和history两种模式的区别、history模式部署后刷新报404

项目本地运行时候，首页子页面刷新均无问题。部署到服务器之后，刷新页面报错、出现404。当vue项目的vue-router的mode为history路由模式时，若未进行相应的配置，可能会发生这种情况。前端路由，即由前端来维护一个路由规则。实现有两种，一种时利用url的hash，也就是常说的锚点(#)，JS通过hashChange事件来监听url的改变，IE7及以下需要轮询；另一种是HTML5的History模式，它使url看起来像普通网站那样，以“/”分割，没有#，但页面并没有跳转，不过使用这种模式需

2021-12-12 19:57:17 3749 5

空空如也

空空如也