面试题
文章平均质量分 74
PicriL@Shmily
努力努力再努力!!!
展开
-
vue中如何自定义指令directive
自定义指令的理解.我们看到的v-开头的行内属性,都是指令,不同的指令可以完成或实现不同的功能,对普通 DOM元素进行底层操作,这时候就会用到自定义指令。除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令如何自定义指令注册一个自定义指令有全局注册与局部注册全局注册注册主要是用过Vue.directive方法进行注册Vue.directive第一个参数是指令的名字(不需要写上v-前缀),第二个参数可以是对象数据,也可以是一个指令函数// 注册一个全局自定义原创 2021-06-28 09:14:44 · 234 阅读 · 0 评论 -
vm.$nextTick 是干什么用的?为什么用?
简单粗暴的回答this.$nextTick是一个回调函数,这个回调函数会在下次 DOM 更新结束之后执行。Vue的数据更新是采用延迟异步更新的,就是说当我们修改了数据之后,页面并不会马上就更新,如果这个时候我们通过DOM操作来获取数据的话,获取的还是之前的旧的数据,这个时候我们就可以使用$nextTick方法,因为这个方法知道什么时候DOM更新完成。使用场景Vue的生命周期函数created()执行的时候DOM 其实并未进行任何渲染,这个时候我们可以要进行DOM操作的代码放到Vue.nextTic原创 2021-06-21 18:54:14 · 1502 阅读 · 0 评论 -
vue中data为什么是一个函数
vue中的data是一个对象类型,对象类型的数据是按引用传值的,这就会导致所有组件的实例都共享同一份数据,这是不对的,我们要的是每个组件实例都是独立的为了解决对象类型数据共享的问题,我们需要将 data 定义成一个函数,每个实例需要通过调用函数生成一个独立的数据对象总结根实例对象data可以是对象也可以是函数(根实例是单例),不会产生数据污染情况组件实例对象data必须为函数,目的是为了防止多个组件实例对象之间共用一个data,产生数据污染。采用函数的形式,initData时会将其作为工厂函数都会返原创 2021-06-21 14:40:56 · 1442 阅读 · 0 评论 -
函数防抖和函数节流
使用节流防抖函数(性能优化)那么在 vue 中怎么使用呢:在公共方法中(如 untils.js 中),加入函数防抖和节流方法// 防抖export function _debounce(fn, delay) { var delay = delay || 200; var timer; return function () { var th = this; var args = arguments; if (timer) {原创 2021-06-18 07:50:38 · 200 阅读 · 0 评论 -
双向数据绑定原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。具体步骤:第一步: 需要observer的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化第二步: compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并.原创 2021-06-16 19:34:13 · 270 阅读 · 0 评论 -
iframe优缺点
iframe的优点:iframe能够原封不动的把嵌入的网页展现出来。如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。iframe的缺点:会产生很多页面,不容易管理。iframe框架结构有时会让人感到迷惑,如果框架个数多原创 2021-06-14 18:45:29 · 175 阅读 · 0 评论 -
项目中如何修改element-ui的默认样式
项目中如何修改element-ui的默认样式?原因是因为我们在使用vue编写css样式时,会在style添加scoped属性添加了scoped的组件无法修改的样式,去掉scoped就可以了。vue中的scoped属性的效果主要通过PostCSS转译实现,那么有没有办法在不改变原来写好的css样式的情况,修改默认的element-ui样式呢?解决方法在样式外新增一个样式不添加scoped<style> .my{ margin: 20px; } .my .原创 2021-06-10 19:21:52 · 416 阅读 · 0 评论 -
Vue之ElementUI Form表单校验
表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基础用法进行整理说明首先对el-form标签中的几个关键属性进行说明,ref: 当前表单的唯一标识model: 表单绑定的对象rules: 字段校验规则而最关键的一点是el-form-item标签中的prop属性,属性值必须与绑定的字段名称保持一致。rules字段用来定义各个字段具体的校验规则,用法请查阅开篇的demo示例,其中required标识字段是否必填,message为校验提.原创 2021-06-07 20:08:25 · 3903 阅读 · 0 评论 -
Nginx的安装以及访问
参考文章: https://www.runoob.com/w3cnote/nginx-setup-intro.html.序言Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的。从2004年发布至今,凭借开源的力量,已经接近成熟与完善。Nginx功能丰富,可作为HTTP服务器,也可作为反向代理服务器,邮件服务器。支持FastCGI、SSL、Virtual Host、URL Rewrite、Gzip等功能。并且支持很多第三方的模块扩展。Nginx的稳定性原创 2021-06-07 11:30:28 · 2302 阅读 · 0 评论 -
webpack打包优化
webpack打包原理把所有依赖打包成一个 bundle.js 文件,通过代码分割成单元片段并按需加载。webpack的优势(1) webpack 是以 commonJS 的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。(2)能被模块化的不仅仅是 JS 了。(3) 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。(4)扩展性强,插件机制完善webpack优化方法:1.移除插件某些包,减少插件体积比如说通用原创 2021-06-04 16:00:08 · 2183 阅读 · 0 评论 -
使用keep-alive缓存项目
缓存整个项目在 App.vue 里面如果需要缓存整个项目,则如下设置(直接包裹根router-view即可):<template> <div id="app"> <keep-alive> <router-view/> </keep-alive> </div></template>使用keepAlive后生命周期发生了哪些变化<script>export defa原创 2021-06-03 16:54:03 · 158 阅读 · 0 评论 -
vant-ui的按需引用
首先安装vant-ui插件如果你想按需引入一定要安装按需加载的配置#先安装vant-uicnpm install vant-ui --save # 再安装按需引入的插件cnpm i babel-plugin-import -Dbabel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式在babel.config.js中添加配置plugins: [ ['import', { libraryNa原创 2021-06-03 16:21:32 · 235 阅读 · 0 评论 -
axios拦截,api统一管理
简介axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护。在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库axios封装步骤1.安装axios npm install axi原创 2021-06-03 15:17:29 · 149 阅读 · 0 评论 -
多环境变量配置
package.json 里的 scripts 配置 serve stage build,通过 --mode xxx 来执行不同环境通过 npm run serve 启动本地 , 执行 development通过 npm run stage 打包测试 , 执行 staging通过 npm run build 打包正式 , 执行 production"scripts": { "serve": "vue-cli-service serve --open", "stage": "vue-cli原创 2021-06-02 17:05:12 · 141 阅读 · 0 评论 -
去哪儿项目开发流程
1. 确定项目技术栈vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack2. 搭建项目yarn,npm(cnpm) 包管理工具yarn add axios -Scnpm install axios -S-S: --save-dev 生产环境的依赖 (dependencies)-D: --dev 开发环境的依赖 (devDependencies)2.1 从0搭建指令vue crea原创 2021-06-02 13:52:52 · 185 阅读 · 0 评论 -
css中过渡transition
定义过渡transition是一个复合属性,包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果transition-property: 过渡属性(默认值为all)transition-duration: 过渡持续时间(默认值为0s)transiton-timing-function: 过渡函数(默认值为ease函数)t原创 2021-06-01 19:43:56 · 469 阅读 · 0 评论 -
keep-alive缓存
概念keep-alive 是vue的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和transition相似,keep-alive 是一个抽象组件:它自身不会渲染成一个DOM元素,也不会出现在父组件链中作用在组件切换过程中把切换出去的组件保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验。原理在 created钩子函数调用时将需要缓存的 VNode 节点保存在 this.cache 中/在 render(页面渲染) 时,如果 VNode 的 name 符原创 2021-06-01 19:02:53 · 1006 阅读 · 0 评论 -
js中的事件委托
一张图看懂事件委托概念事件委托,又名事件代理。事件委托就是利用事件冒泡,就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡,那么委托也就没法实现了。为什么要用事件委托:一般来说,dom需要有事件处理程序,我们都会直接给它设事件处理程序就好了,那如果是很多的dom需要添加事件处理呢?比如我们有100个li,每个li都有相同的click点击事件,可能我们会用for循环的方法,来遍历所有的li,然后给它们添加事件,那这么做会存在什么影响呢?在JavaScript中,添加到页面上的原创 2021-05-28 20:51:57 · 118 阅读 · 0 评论 -
js中闭包知识点
如何产生闭包(closure)上传代码:// 函数作为返回值function create() { const a = 100 return function () { console.log(a) }}const fn = create()const a = 200fn() // 100// 函数作为参数被传递function print(fn) { const a = 200 fn()}const a = 100fu原创 2021-05-28 19:42:58 · 155 阅读 · 0 评论 -
js中let、const、var的区别
在ES5中,声明变量只有var和function两种形式。但是因为var声明的变量会有一定的缺点,ES6提出了使用let和cinst声明变量,弥补了ES5中var的缺点1.是否存在变量提升?var声明的变量存在变量提升(将变量提升到当前作用域的顶部)。即变量可以在声明之前调用,值为undefinedlet 和 const不存在变量提升。即它们所声明的变量一定要在声明后使用,否则报ReferenceError错console.log(f) //undefinedvar f = 1 ;原创 2021-05-28 18:55:57 · 110 阅读 · 0 评论 -
作用域、作用域链、自由变量、变量提升
作用域及作用域链何为作用域任何编程语言都有作用域的概念,简单来说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期js的作用域是靠函数来形成的,也就是说一个函数的变量在函数外不可以访问。作用域种类js中首先有一个最外层的作用域,全局作用域;js中可以通过函数来创建一个独立作用域称为函数作用域,函数可以嵌套,所以作用域也可以嵌套;es6中新增了块级作用域(大括号,比如:if{},for(){},while(){}…);全局作用域任何地方都能访问到的对象拥有原创 2021-05-27 20:23:23 · 127 阅读 · 0 评论 -
this指向问题、new的过程
this的指向: 谁调用就指向谁 事件监听函数内部,this指向绑定事件监听的那个元素节点 构造函数内部,this指向创建的新对象 对于箭头函数,由于没有自身变量,this指向环境中的this 一个函数没有前缀调用(被引用),也就是普通调用,this指向全局变量。在严格模式下,this为undefine.实例代码// 全局下的this指向window console.log(this); // var a = 100; // window.a = 100; // this.a原创 2021-05-27 19:39:41 · 92 阅读 · 0 评论 -
js中this与call/apply/bind的关系
简单总结在浏览器里,在全局范围内this 指向window对象;在函数中,this永远指向最后调用他的那个对象;构造函数中,this指向new出来的那个新的对象;call、apply、bind中的this被强绑定在指定的那个对象上;箭头函数中this比较特殊,箭头函数this为父作用域的this,不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来;apply、call、bind都是js给函数内置的一些API,调用他们可以原创 2021-05-26 20:47:25 · 95 阅读 · 0 评论 -
原型与原型链
javascript原型与原型链原型每个函数都有一个prototype属性,被称为显示原型 function fn() { } console.log(fn.prototype);每个实例对象都会有_ _proto_ _属性,其被称为隐式原型每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype每个prototype原型都有一个constructor属性,指向它关联的构造函数。原型链获取对象属性时,如果对象本原创 2021-05-26 18:54:38 · 88 阅读 · 0 评论 -
数组学习方法
ES3~ES7的数组方法学习参考文章:数组方法1、数组方法2JavaScript数组方法总结1.push()可以接受一个或者多个参数,将参数追加到数组的尾部,返回添加后的数组的长度,原数组会发生改变。2.pop()从数组尾部删除一个元素,返回这个被删除的元素,原数组发生改变。3.unshift()可以接受一个或者多个参数,将参数放到数组的头部,返回添加后的数组的长度,原数组会发生改变。4.shift()从数组头部删除一个元素,返回这个被删除的元素,原数组发生改变。5.s原创 2021-05-25 21:03:06 · 239 阅读 · 0 评论 -
js中的argument参数
参考文献:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments1.简介在JavaScript中,arguments是对象的一个特殊属性。arguments对象就像数组,但是它却不是数组。 argument 对象包含了函数调用的参数数组,通过这种方式你可以很方便的找到最后一个参数的值 :arguments是收到的实参副本 在词法分析中, 首先按形参形成AO的属性,值为undefi原创 2021-05-25 20:31:28 · 1028 阅读 · 0 评论 -
js数据类型判断
五种方法typeof、instanceof、constructor、Object.prototype.toString.call()、jquery.type()简单了解:typeof typeof对于基本数据类型判断是没有问题的,但是遇到引用数据类型(如:Array)是不起作用 instanceof 判断 new关键字创建的引用数据类型不考虑 null和 undefined(这两个比较特殊)以对象字面量创建的基本数据类型 constructor似乎完全可以应对基本数据类型和引用数...原创 2021-05-24 19:43:41 · 115 阅读 · 0 评论 -
js数据类型
js数据类型有哪些基本数据类型(值类型):Number、String、Boolean、Undefined、Null、Symbol(es6新增独一无二的值)和BigInt(es10新增); 引用数据类型:Object。包含Object、Array、 function、Date、RegExp。 备注:基本数据类型,又称值类型。1. 常见的值类型:2.常见的引用类型: 说明:因typeof 检测null返回object,故有些地方也成null为特殊引用类型。但我们最好...原创 2021-05-24 19:03:21 · 157 阅读 · 0 评论 -
深拷贝与浅拷贝
1. 什么是深拷贝深拷贝: 创建一个新的对象和数组,将原对象的各项属性的“值”(数组的所有元素)拷贝过来,是“值”而不是“引用”2.为什么要使用深拷贝?在改变新的数组(对象)的时候,不改变原数组(对象)3.理解值类型与引用类型值类型:number,string,boolean,undefined,null ,symbol(简单数据类型,每次赋值是)第1步a=100;第2步b=a;第2步a=200;引用类型:对象,函数(复杂数据类型,每次赋值是指向变量内存地址)..原创 2021-05-23 21:44:16 · 189 阅读 · 0 评论 -
vue-router知识点
1. 路由的概念 通过改变 URL,在不重新请求页面的情况下,更新页面视图。2. vue-router 两种路由模式 更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现 Hash — 默认值,利用 URL 中的hash("#") history-- 利用URL中的路径(/home)3. 如何设置路由模式const router=new VueRouter({ mode:'history', routes:[...]})...原创 2021-05-23 21:09:52 · 308 阅读 · 1 评论 -
vuex
1.什么是vuex?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex背后的基本思想,就是前面所说的单向数据流它由五部分组成,分别是:state,actions,mutations,getters,modules2.vuex的五大核心:state: 所有的数据都存储在state中, state是一个对象 mutations: 唯一可以修改state数据的场所 actions:可以包含异步操作只能调用mutations的方法 getters: 类似于vue组...原创 2021-05-23 20:10:15 · 320 阅读 · 0 评论 -
vue生命周期钩子函数有哪些
每个vue实例从创建到销毁的过程就是vue的一个生命周期,每个阶段都有对应的钩子函数,当我们想在vue的不同时期操作vue实例是,就可以在不同的钩子函数中进行vue有8种生命周期函数:beforeCreate(实例创建前)官方解释:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 说明:这个时候this还不能使用,data中的数据、methods中的方法,以及watcher中的事件都不能获得。created(实例创建后)原创 2021-05-20 21:31:56 · 1218 阅读 · 0 评论 -
使用promise封装wx:requset()
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言 一、使用promise封装wx:requset()? 总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、promise是什么? promise(首字母小写)对象指的是“Promise实例对象” Promi..原创 2021-05-07 20:10:16 · 172 阅读 · 0 评论 -
不同组件之间是如何通信的
不同组件之间是如何通信的?请永远牢记vue是单向数据流①props / $emit父组件通过props的方式向子组件传递数据,而通过$emit子组件可以向父组件通信。1. 父组件向子组件传值:接下来我们通过一个例子,说明父组件如何向子组件传递值:在子组件 Users.vue 中如何获取父组件 App.vue 中的数据 users:["Henry","Bucky","Emily"]App.vue父组件<template> <div id="app">.原创 2021-05-19 21:04:31 · 282 阅读 · 0 评论 -
promise generator aysnc/await的区别
前端面试题JavaScript一、promise当面试官问你:什么是promise? 你对promise的理解? promise用过吗? ------------------------------------------------------------------------------------------------------------------什么是promise解决地狱回调 可以链式调用 有三种状态。 promise有哪些API. 应用场景:封装aja原创 2021-05-07 21:31:31 · 309 阅读 · 0 评论