![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
面试
文章平均质量分 67
小曲曲
这个作者很懒,什么都没留下…
展开
-
vue及react原理方面总结
旧虚拟 DOM 找到和新虚拟 DOM 相同的 key: 若内容没变,直接复用真实 DOM;若内容改变,则生成新的真实 DOM,替换页面中之前的真实DOM。旧虚拟 DOM 未找到和新虚拟 DOM 相同的 key:根据数据创建新的真实 DOM ,渲染到页面。原创 2023-06-09 09:57:30 · 134 阅读 · 0 评论 -
微信小程序上传图片去重——MD5
点击上传图片,根据url生成图片唯一标识hexHash在上传接口给后台接口成功返回给前端存储提交图片时判断hexHash是否重复引入js文件var sMD5 = require('../../utils/spark-md5.js')上传<van-uploader use-before-read max-count="2" bind:before-read="beforeRead" preview-full-image="true" file-list="{{ fileList }原创 2023-05-06 17:10:58 · 865 阅读 · 0 评论 -
es6的 Set 和 Map 数据结构
字典-----是一些元素的集合。每个元素有一个称作key 的域,不同元素的key 各不相同。集合-----是由一堆无序的、相关联的,且不重复的内存结构【数学中称为元素】组成的组合。返回整个 Map 结构,可采用链式写法。返回整个 set 结构,可采用链式写法。key重复值会被覆盖。原创 2022-12-15 10:05:20 · 482 阅读 · 0 评论 -
react 初体验
react笔记快捷定义组件如何开启服务运行项目打包后的dist包全局安装 serve serve 文件夹名 父子组件传值父传子:子组件this.props接收子传父:父组件定义方法接收参数,将方法传给子组件;子组件在合适时机调取改方法并传参任意组件通信——订阅发布机制安装库 需要接收信息的组件订阅消息发送数据的组件在合适实际发布订阅消息spa 单页面应用(vue、react)原创 2022-12-05 14:19:56 · 505 阅读 · 0 评论 -
css有关知识总结
定义以--变量名值;使用var(--变量名).element{width200px;height200px;#000;color#fff;}原创 2022-07-29 10:00:22 · 951 阅读 · 0 评论 -
屏幕通用适配方案flexible.js
简介是一个终端设备适配的解决方案。根据宽度的不同设置不同的字体大小,样式间距都使用rem作为单位,不同屏幕大小适配不同的样式。下载使用修改flexible.js文件中原创 2022-05-24 13:47:18 · 393 阅读 · 0 评论 -
若依——防止按钮重复点击
axios的封装文件中request.js请求拦截函数里首先判断是post 或 put 请求,因为get请求无需处理(本身很快获取下次且不影响逻辑)将本次请求的url、参数、当前时间戳组合为一个对象 requestObj获取session中存储的对象 sessionObj,如果没有就将本次请求的对象存入session;如果本地存储有对象,则取出备用,同时设置一个防重复点击的间隔时间将本地取出的对象与本地请求的对象做对比,如果url和data都相同,说明是两次一样的请求,然后判断现在的时间戳与上次原创 2022-05-11 16:48:53 · 1364 阅读 · 0 评论 -
递归——获取tree结构默认第一个满足条件的id
// 获取树 getTree() { houseTree().then((res) => { this.data = res.data; // 首次进来获取默认的楼栋id if (!this.buildId) { this.getId(this.data, this.buildIdArr); console.log(this.buildIdArr); if (this....原创 2022-04-01 11:19:42 · 765 阅读 · 0 评论 -
深拷贝与浅拷贝
基本概念数据分为基本数据类型(String, Number, Boolean, Null, Undefined,Symbol)和对象数据类型。基本数据类型的特点:直接存储在栈(stack)中的数据引用数据类型的特点:真实的数据存放在堆内存里,在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同原创 2022-03-30 17:45:48 · 1055 阅读 · 0 评论 -
nuxt.js笔记
介绍 基于 Vue.js 的通用应用框架。 SSR 服务端渲染。在服务端生成html发送至客户端 特性:异步数据加载、中间件支持、布局支持等。 优点:有利于SEO,加载速度快,自动配置路由 依赖 node 和 npm npx(npx在NPM版本5.2.0默认安装)初始化项目 $ npx create-nuxt-app <项目名> (Nuxt.js团队创建了脚手架工具 create-nuxt-app) $ npm run dev (http://localhost:300原创 2020-07-04 18:53:19 · 1014 阅读 · 0 评论 -
H5与原生安卓和ios交互
单独的一个完整的判断的方法// **支付方法**function goToPay(query) { console.log(query); var data = { 'type': pay_type_code, 'query': query }; var u = ...原创 2019-04-12 12:04:44 · 1209 阅读 · 0 评论 -
vue——自定义指令
Vue.directive指令(自定义指令)全局apiVue.directive指令自定义指令的生命周期全局api概述全局api并不在构造器里面,而是先声明全局变量或者直接在vue中定义一些新功能,VUE内置了一些全局api,说简单点就是在构造器外面用vue提供给我们的api函数来定义新的功能.Vue.directive 指令我们在第一季学习了内部指令,但是我们想要定义一个v-hello的指令,作用就是让文字变成绿色.在开始之前先写一个小DEMO,页面上有一个数字是10,数字的下面有一个原创 2022-03-07 14:43:24 · 218 阅读 · 0 评论 -
vuex的使用
vuex的用法export可以使用多次,引入需要加{}export default 一个页面只能使用一次,可以直接引入npm i vuex//store/index.jsimport Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex)export const store = new Vuex.Store({ state: { todos: [ { id: 1, text: '...', done: true原创 2020-08-14 18:15:08 · 108 阅读 · 0 评论 -
数组循环方法以及数组去重总结
ES6新增的循环方法,没有索引,它可以正确响应break、continue和return语句,for-in循环虽然可以循环数组,但是会有好多坑,它主要用于循环对象。没有返回值,对原数组没有影响,不支持IE,break无法跳出循环,retrun只能跳出当前循环,无法终止循环。只要有一项符合条件,就跳出循环,返回第一个符合条件的元素,否则返回undefined。只要有一项符合条件,就跳出循环,返回true,否则返回false。返回新数组,不会改变原数组,新数组由符合条件的数组组成。...原创 2022-01-27 14:53:12 · 2285 阅读 · 0 评论 -
前端性能优化 - 使用内容分发网络CDN
为什么使用CDN当引入的组件越来越多时,运用 webpack 打包后的 app.js 文件容易变得过大,对首屏加载很不友好。使用CDN的第三方资源的JS代码,将不再打包到本地服务的JS包中。减小本地JS包体积,提高加载速度。-给网页加载提速Vue项目打包的时候,默认会把所有代码合并生产新文件,其中包括各种库导致打包出来很大。如果使用cdn的话,会更利于程序的加载速度。在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开原创 2022-01-25 10:23:36 · 902 阅读 · 0 评论 -
角色权限控制合集
后端返回角色标识前提条件已知固定两种角色已知每种角色需要展示的菜单思路步骤登录获取角色标识根据角色在vuex中存储该权限拥有的权限数组[{ path: '/foo', name:'foo', redirect:'', meta: { icon: "weibo", title: "首页", }, children: [], component: Foo }]根据路由数组生成路由文件和菜单数组// 路由文件引入所有文件原创 2022-01-20 10:29:50 · 192 阅读 · 0 评论 -
路由——路由守卫
全局守卫://全局守卫写在main中//router对象调用 //.beforeEach((进入到哪一个路由,从哪一个路由离开,对应的函数)=>{}) router.beforeEach((to,form,next) =>{ //如果进入到的路由是登录页或者注册页面,则正常展示 if(to.path == '/login' || to.path == '/re...原创 2019-06-26 11:19:00 · 6625 阅读 · 2 评论 -
路由——嵌套路由
配置子路由const user = () => import('./user.vue')const router = new VueRouter({ routes: [ { path: '/user', component: user, redirect:'默认子路由path', children: [ { path: '', name: 'use原创 2022-01-04 17:41:10 · 640 阅读 · 0 评论 -
reduce详解
基本语法([]代表可有可没有)reduce(callback(accumulator, currentValue[, index, array])[,initialValue])reduce 接受两个参数,回调函数和初识值,初始值是可选的。回调函数接受4个参数:积累值、当前值、当前下标、当前数组。如果有初始值,那么积累值一开始是初始值;如果没有初始值,那么积累值一开始是数组中第一个元素。然后在每一次迭代时,返回的值作为下一次迭代的 accumulator 积累值。使用案例求和和乘法原创 2021-11-25 15:37:06 · 2095 阅读 · 0 评论 -
单点登录三种实现方式
前言在 B/S 系统中,登录功能通常都是基于 Cookie 来实现的。当用户登录成功后,一般会将登录状态记录到 Session 中,或者是给用户签发一个 Token,无论哪一种方式,都需要在客户端保存一些信息(Session ID 或 Token ),并要求客户端在之后的每次请求中携带它们。在这样的场景下,使用 Cookie 无疑是最方便的,因此我们一般都会将 Session 的 ID 或 Token 保存到 Cookie 中,当服务端收到请求后,通过验证 Cookie 中的信息来判断用户是否登录 。原创 2021-11-19 18:18:34 · 4305 阅读 · 0 评论 -
vue3组合式API - 尚硅谷
Vue3快速上手1.Vue3简介2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王)耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的tags地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.02.Vue3带来了什么1.性能的提升打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%…2.源码的升级使用Proxy原创 2021-11-01 10:32:30 · 2160 阅读 · 3 评论 -
vue中事件修饰符.native
v-model的修饰符.lazy在输入框中,v-model 默认是同步数据,使用 .lazy 会转变为在 change 事件中同步 ,也就是在失去焦点 或者 按下回车键时才更新.number.number 修饰符可以将 输入的值转化为Number类型 ,否则虽然你输入的是数字,但它的类型其实是String,在数字输入框中比较有用.trim.trim 修饰符会自动过滤掉输入的首尾空格<input type="text" v-model.lazy="val"><in原创 2021-09-09 09:10:28 · 532 阅读 · 0 评论 -
vue根据角色动态路由的实现方式
思路一:路由文件,分为静态路由和动态路由登录成功,判断角色,addRoutes添加动态路由根据路由生成菜单栏方法一:直接获取路由this.router.options.routes,但是addRoutes添加的动态路由使用该方法获取不到解决方法:在addRoutes添加动态路由前,手动拼接静态和动态路由,赋值给options。this.router.options.routes,但是addRoutes添加的动态路由使用该方法获取不到 解决方法:在addRoutes添加动态路由前,手动拼接静态和动原创 2021-09-02 18:29:34 · 2895 阅读 · 0 评论 -
一劳永逸的组件注册
通常在组件使用前,需要引入后再注册,但如果高频组件多了,每次都这样做,不仅新增很多代码,效率还低!我们应该如何优化呢?其实,我们可以借助一下webpack的require.context() 方法来创建自己的(模块)上下文,从而实现自动动态require组件。我们先在components文件夹(这里面都是些高频组件)添加一个叫global.js的文件,在这个文件里使用require.context 动态将需要的高频组件统统打包进来,然后在main.js文件中引入global.js的文件。// glo原创 2021-07-19 13:37:31 · 93 阅读 · 0 评论 -
小程序架构搭建
1、新建小程序小程序管理工具——新建小程序2、装包vantcomputedstoreaxiosnpm i @vant/weapp -S --productionnpm install --save miniprogram-computednpm install --save mobx-miniprogram mobx-miniprogram-bindingsnpm install axios构建npm(设置使用npm模块)3、vant配置将 app.json 中的 “s原创 2021-06-16 16:28:48 · 1103 阅读 · 0 评论 -
微信小程序版本自动更新问题
公司的小程序项目上线, 后期还会有小型的版本迭代. 为了让用户能在我们进行版本迭代后及时使用最新版本的功能. 做了以下优化…知识点1: 当用户点击左上角关闭,或者按了设备Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台,只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。知识点2: 小程序的启动分为"冷启动" 和 “热启动”。热启动是指: 小程序打开后,在一段时间内(目前:5分钟)再次被打开,此时会将后台的小程序切换到前原创 2021-05-17 09:44:13 · 1775 阅读 · 0 评论 -
Vue中的provide/inject
使用场景解决跨层级传递属性的不方便而设立的,看一个最简单的例子,从祖辈组件中拿到传入下来的颜色值它可以是一个对象,比如provide: { color: "green"}访问this:一般还是用函数的方式,返回一个传入的对象provide() { return { color: this.color, };} inject: ["color"],不是响应式color不是响应式的,就是说如果我在祖辈组件里选择另外一个颜色,在孙子组件里是拿不到更新后的原创 2021-05-12 14:17:28 · 384 阅读 · 1 评论 -
父组件中引入弹窗子组件三种写法
1、props和$emit控制弹窗显示隐藏父组件<template> <div class="about"> <a-button type="primary" @click="show = true"> 打开弹窗 </a-button> <popup :show="show" @change="show = false"></popup> </div></template>&l原创 2021-05-11 14:14:42 · 606 阅读 · 0 评论 -
组件的深入理解
第一个vue小程序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t原创 2021-04-30 17:24:33 · 320 阅读 · 2 评论 -
vue之插槽slot详解
1、基本用法(单个插槽)在公共组件中内容不固定的地方写上slot标签在父组件调用时,在组件标签中间写入内容,即可替代公共组件的slot标签公共组件share中定义 slot<template> <div class="share"> <p>首页</p> <slot></slot> </...原创 2019-05-10 16:56:07 · 1302 阅读 · 0 评论 -
npm和yarn的使用
异同点npm 是 Node.js 官方提供的包管理工具,他已经成了 Node.js 包的标准发布平台,用于 Node.js 包的发布、传播、依赖控制。npm 提供了命令行工具,使你可以方便地下载、安装、升级、删除包,也可以让你作为开发者发布并维护包。npm 的背后,是基于 couchdb 的一个数据库,详细记录了每个包的信息,包括作者、版本、依赖、授权信息等。它的一个很重要的作用就是:将开发者从繁琐的包管理工作(版本、依赖等)中解放出来,更加专注于功能的开发。在 Node 生态系统中,依赖通常安装在原创 2021-04-20 11:21:22 · 666 阅读 · 0 评论 -
网络优化面试篇
1:HTML页面进行重绘和重排浏览器是如何对页面进行渲染的当我们在浏览器中打开一个HTML页面时,浏览器的渲染引擎首先会解析标签,渲染成DOM树;然后解析css样式,构建渲染树;然后从根节点递归调用,计算每一个元素的大小、位置等,并且计算每一个节点的坐标;最后遍历渲染树,绘制每一个节点,这就完成了页面的渲染。所谓重绘就是当元素的外观例如color,background-color等改变时会引起浏览器重新绘制这些元素,使之呈现新的外观。所谓重排(重构/回流)就是当元素的大小、位置等改变或显示原创 2021-04-13 18:20:55 · 1658 阅读 · 0 评论 -
ES6面试篇
ES6新增let、const、块级作用域、箭头函数、模板字符串、BigInt,Symbol数据类型解构赋值(数组、对象)字符串新增方法数组新增方法(扩展运算符)对象新增方法新的数据结构Set 和 MapProxyPromiseasync和awaitlet、const、块级作用域let声明的变量没有变量提升,必须先声明后使用;暂时性死区。let声明的变量只能在当前块级作用域内使用let不允许在同一作用域重复声明同一个变量;const声明常量,声明就必须赋值,切不原创 2021-04-13 18:19:27 · 245 阅读 · 0 评论 -
H5\C3面试篇
HTML基础块级元素:独占一行,对宽高的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽;包含p、div、ul、ol、li、dl、dt、dd、h1~h6、form行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高!包含a、span、em、strong、b、i、label、br;padding和margin上下属性设置是无效的,左右是有效的行内块元素:结合的行内和块级的有点,不仅可以对宽高属性值生效,还可以多个标签存在一行显示;img,原创 2021-04-13 18:18:54 · 182 阅读 · 0 评论 -
nuxt.js面试篇
介绍 基于 Vue.js 的通用应用框架。 SSR 服务端渲染。在服务端生成html发送至客户端 特性:异步数据加载、中间件支持、布局支持等。 优点:有利于SEO,加载速度快,自动配置路由 依赖 node 和 npm npx(npx在NPM版本5.2.0默认安装)SSR的优势更利于SEO。不同爬虫工作原理类似,只会爬取源码,不会执行网站的任何脚本(Google除外,据说Googlebot可以运行javaScript)。使用了React或者其它MVVM框架之后,页面大多数DOM元素都原创 2021-04-13 18:17:42 · 3221 阅读 · 0 评论 -
vue3.0面试篇
1. Vue 3.0 性能提升主要是通过哪几方面体现的?1.响应式系统提升vue2在初始化的时候,对data中的每个属性使用definepropery调用getter和setter使之变为响应式对象。如果属性值为对象,还会递归调用defineproperty使之变为响应式对象。vue3使用proxy对象重写响应式。proxy的性能本来比defineproperty好,proxy可以拦截属性的访问、赋值、删除等操作,不需要初始化的时候遍历所有属性,另外有多层属性嵌套的话,只有访问某个属性的时候,才会递归原创 2021-04-13 18:16:55 · 493 阅读 · 0 评论 -
vue2.0面试篇
$nextTick的使用答:当你修改了data的值然后马上获取这个dom元素的值,是不能获取到更新后的值,你需要使用$nextTick这个回调,让修改后的data值渲染更新到dom元素之后在获取,才能成功。data为什么必须是一个函数组件中的data写成一个函数,这样每次复用组件的时候,都会返回一份新的data,相当于每个组件实例都有自己私有的数据空间,它们只负责各自维护的数据,不会造成混乱。而单纯的写成对象形式,就是所有的组件实例共用了一个data,这样改一个全都改了。delete和Vue原创 2021-04-13 18:16:22 · 385 阅读 · 0 评论 -
路由——模式
路由两种模式hash模式:vue-router默认的是hash模式。使用URL的hash来模拟一个完整的URL,于是当URL改变的时候,页面不会重新加载,也就是单页应用了。对于hash模式会创建hashHistory对象,在访问不同的路由的时候,会发生两件事:HashHistory.push()将新的路由添加到浏览器访问的历史的栈顶,和HasHistory.replace()替换到当前栈顶的路由history模式:window.history对象打印出来可以看到里边提供的方法和记录长度。利用了原创 2021-04-13 18:09:48 · 115 阅读 · 0 评论 -
短路原理JavaScript中“&&”和“||”操作符
||1、只要“||”前面为false,结果取决于后边,返回“||”后面的值。2、只要“||”前面为true,结果就是true,返回“||”前面的值。&&1、只要“&&”前面是false,结果是false,返回“&&”前面的值;2、只要“&&”前面是true,结果取决于后边,返回“&&”后面的值;!!!!的作用是把一个其他类型的变量转成的bool类型...原创 2021-04-09 18:12:24 · 100 阅读 · 0 评论 -
computed和watch简介与异同
computed计算属性和watch侦听器例子 <h2>计算属性和侦听器</h2> <input type="text" class="flex_l mt-20" v-model="name1" /> <input type="text" class="flex_l mt-20" v-model="name2" /> <input type="text" class="flex_l mt-20" v-model="name" /原创 2021-02-27 15:29:08 · 101 阅读 · 0 评论