5 Carol小朋友

尚未进行身份认证

我要认证

正在努力成为一名优秀的前端程序媛~

等级
TA的排名 10w+

Vue中v-for为什么必须要key?为什么不能用index作为key?

首先要知道Vue以及React都使用了虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而他们都是通过diff算法来对比虚拟DOM前后的变化,从而更新节点。在交叉对比中,当新节点跟旧节点头尾交叉对比没有结果时,会根据新节点的key去对比旧节点数组中的key,从而找到相应旧节点(这里对应的是一个key => index 的map映射)。如果没找到就认为是一个新增节点。而如果没有key,那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射,另一种是遍历查找。相比而言。.

2020-07-31 15:34:12

虚拟DOM和diff算法

虚拟DOM(Virtual dom),也就是我们常说的虚拟节点,它是通过JS的Object对象模拟DOM中的节点,然后再通过特定的render方法将其渲染成真实的DOM的节点。为什么要使用虚拟DOM呢,因为操作真实DOM的耗费的性能代价太高,频繁的操作DOM,会大量的造成页面的重绘和回流,出于性能优化的考虑,我们应该减少重绘和回流的操作。对虚拟节点的DOM操作,并不会触发重绘和回流,把处理后的虚拟节点映射到真实DOM上,只触发一次重绘和回流。我们都知道Vue是基于数据驱动的,数据变化之后,不会像jQue

2020-07-30 15:41:56

require和import的区别

node编程中最重要的思想就是模块化,import和require都是被模块化所使用。遵循规范require 是 AMD规范引入方式import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法调用时间require是运行时调用,所以require理论上可以运用在代码的任何地方import是编译时调用,所以必须放在文件开头本质require是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个变量import是解构过程,但是目

2020-07-30 14:31:19

vue中通过v-for获取img src的问题

一开始我写法错误,想当然的认为应该是这样写:{ id:'1', src:'../assets/123.jpg') }但这样写我发现图片死活加载不出来,但是在网页调试中又看到路径是正确的,很疑惑。然后我就上网查原因,发现是src写法不正确,应该是下面这样写:{ id:'1', src:require("../assets/123.jpg") }...

2020-07-22 10:55:38

前端命名规范(待完善)

项目命名全小写,用_隔开例: my_project_name文件命名小写开头、驼峰命名例:apiUtil.html目录命名全小写CSS命名1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background..

2020-07-16 15:38:43

Vue项目报错:Uncaught SyntaxError: Unexpected token <

这个是我在index.html中引入一些JS库文件时产生的错误,当时我的JS文件放在了src目录下,后面查阅相关资料发现,Vue引入静态文件时,不能放在src目录下,需要放在与之同级的目录下,例如static,因为src目录下的资源只能import或require。...

2020-07-15 16:22:37

VUE项目中引入JS文件的几种方法

在开发Vue项目的时候,有时需要使用一些非ES6格式的没有export的js库,可以有如下方法实现:1.在index.html页面使用script标签引入当然也可以使用cdn的地址。这样引入后的内容是全局的,可以在所有地方使用。<!DOCTYPE html> <html> <head> <title>Map</title> <meta charset="utf-8"> <meta

2020-07-15 15:15:14

一些好用的插件

主题插件Atom One Dark Theme好看的主题Atom One Light Theme护眼主题通用插件Bookmarks代码标记,方便查找指令:shift + cmd + kBracket Pair Colorizer 2相邻括号颜色不同,方便查找代码作用域范围,可以与任何主题使用Code Runner代码运行,支持大部分语言Code Spell Checker单词拼写提醒,错误单词纠正Debugger for Chrome调试必备Git Historygit提

2020-07-08 16:01:31

Router-Link详解

<router-link>组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址,默认渲染为带有正确连接的<a>标签,可以通过配置tag属性生成别的标签。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的css类名组件的属性有:to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class1、to(必选参数):类型string/location表示目标路由的链接,该

2020-07-08 15:06:48

Sass在Vue项目中的使用

简介Sass 是一个 CSS 预处理器。Sass 是 CSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间。Sass 完全兼容所有版本的 CSS。Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承、内置函数等等特性。Sass 生成良好格式化的 CSS 代码,易于组织和维护。Sass 文件后缀为 .scss。安装1. 安装依赖包vue的webpack项目中需要安装上node-sass、sass-loader和style-loadernpm install --

2020-07-08 14:17:54

四种常见的登录方案

1.Cookie + Session 登录HTTP 是一种无状态的协议,客户端每次发送请求时,首先要和服务器端建立一个连接,在请求完成后又会断开这个连接。这种方式可以节省传输时占用的连接资源,但同时也存在一个问题:每次请求都是独立的,服务器端无法判断本次请求和上一次请求是否来自同一个用户,进而也就无法判断用户的登录状态。为了解决 HTTP 无状态的问题,Lou Montulli 在 1994 年的时候,推出了 Cookie。Cookie 是服务器端发送给客户端的一段特殊信息,这些信息以文本的方式存放在

2020-07-08 10:22:33

Java栈的基本操作

创建Stack<Integer> stack = new Stack<>(); 进栈stack.push(Object);//返回的是入栈的内容stack.add(Object);//返回的是true或false出栈stack.pop();//输出并删除栈顶元素stack.peek();//输出不删除栈顶元素判断栈是否为空stack.isEmpty(...

2020-04-04 16:41:18

为什么H5中只需要规定doctype

html5不基于SGML(标准通用置标语言),因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照他们应该的方式来运行)而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。...

2019-02-24 15:55:55

JS——合并两个有序数组

LEETCODE 88. 合并两个有序数组题目:给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 成为一个有序数组。说明:初始化 nums1 和 nums2 的元素数量分别为 m 和 n。 你可以假设 nums1 有足够的空间(空间大小大于或等于 m + n)来保存 nums2 中的元素。示例:输入: nums1 = [1,2,...

2019-02-17 17:28:01

懒加载

1.懒加载概念对于页面有很多静态资源的情况下(比如网商购物页面),为了节省用户流量和提高页面性能,可以在用户浏览到当前资源的时候,再对资源进行请求和加载。2.懒加载实现原理2.1监听onscroll事件判断资源位置首先为所有懒加载的静态资源添加自定义属性字段,比如如果是图片,可以指定data-src为真实的图片地址,src指向loading的图片。然后当资源进入视口的时候,将src属性值...

2019-02-16 19:10:36

打乱数组

sort排序法(最简单)原理:利用sort用法:arr.sort(compareFunction)如果 compareFunction(a,b) 返回的值大于 0 ,则 b 在 a 的前边;如果 compareFunction(a,b) 返回的值等于 0 ,则a 、b 位置保持不变;如果 compareFunction(a,b) 返回的值小于 0 ,则 a 在 b 的前边。let...

2019-02-16 17:37:20

移动端字体适配小结

rem首先,rem是相对根元素html字号的相对单位,一般默认字号是16px,那么1rem=16px1.先设置header里面的meta标签:<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">2.用JS来计算适应用户屏幕的根元素字号<script type=...

2019-02-15 11:04:34

js中各种长度的含义

offsetWidth //返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)offsetHeight //返回元素的高度(包括元素高度、内边距和边框,不包括外边距)clientWidth //返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)clientHeight //返回元素的高度(包括元素高度、内边距,不包括边框和外边距...

2019-02-15 09:46:26

从一个无序,不相等的数组中,选取N个数,使其和为M实现算法

function getCombBySum(array,sum,tolerance,targetCount){ var util = { /* get combination from array arr: target array num: combination item length return: one array that c...

2019-02-14 23:48:39

async/await执行顺序面试题

async function async1 () { console.log('async1 start') await async2(); console.log('async1 end')} async function async2 () { console.log('async2')} console.log('script start') setTimeo...

2019-02-14 23:35:43

查看更多

勋章 我的勋章
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv2
    勤写标兵Lv2
    授予每个自然周发布4篇到6篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。