面试题
酱芈芈
这个作者很懒,什么都没留下…
展开
-
mixin&extend
一、官方定义Mixin 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时,所有 mixin 对象的选项将被“混合”进入该组件本身的选项二、认识minxin(1)、组件之间有时候会存在相同的代码逻辑,这时候会对相同的代码逻辑进 行抽取(2)、在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成(3)、Minxin提供了一种非常的方式,来分发Vue组件中的可复用功能(4)、一个Mixin对象可原创 2022-02-24 21:15:16 · 439 阅读 · 0 评论 -
async、await
特点1、asayc的用法,它作为一个关键字放到函数前面,这样普通函数就变为了异步函数2、异步async函数调用,跟普通函数的使用方式一样3、异步async函数返回一个promise对象4、async函数配合await关键字使用(阻塞代码往下执行)是异步方法,但是阻塞式的async/await的优点1、方便级联调用,即调用依次发生的场景;2、同步代码编写方式,更符合代码编写习惯;3、多个参数传递, Promise的then函数只能传递一个参数,async/await没有这个限制,可以定义块级原创 2022-02-23 20:08:23 · 174 阅读 · 0 评论 -
Promise
1、promise异步编程的一种解决方案特点1、有三个状态分别是 pending初始状态、fulfilled成功状态、rejected失败状态2、Promise的状态一旦改变,就不会再变,任何时候都可以得到这个结果,状态不可逆,只能由pending变成fulfilled或者由pending变成rejected2、使用new来创建一个promise对象Promise接受一个「函数」作为参数,该函数的两个参数分别是resolve和reject。这两个函数就是就是「回调函数」resolve函原创 2022-02-23 20:03:59 · 176 阅读 · 0 评论 -
vue修改数据页面不重新渲染
直接添加属性的问题<template> <div> <p v-for="(value,key) in item" :key="key"> {{ value }} </p> <button @click="addProperty">动态添加新属性</button> </div></template><script>export default { data:()=&原创 2022-02-17 16:20:28 · 1120 阅读 · 0 评论 -
this.$nextTick 相关
一、官方说明在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM二、原理this.$nextTick()将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它,然后等待DOM更新。它跟全局方法Vue.nextTick一样,不同的是回调的this自动绑定到调用它的实例上三、简单来说因为Vue的异步更新队列,$nextTick是用来知道什么时候DOM更新完成的四、 实例有一个div,默认用v-if隐藏,点击按钮之后,改变v-if的值让它显示出来,并原创 2022-02-17 15:54:51 · 149 阅读 · 0 评论 -
vue的prop
Prop1.prop 大小写// 小写的prop 用来接收父传子接收的数据props:['msg']2.单项数据流单项数据流不允许修改在组件中修改 prop 传递过来的数据 Vue 会发出警告所以有两种常见的用法去修改 prop 传递过来的值本地data中定义属性,并将 prop 作为初始值data() { return { msg_data: this.msg }}使用computed 将prop 的值进行处理computed:{ ms原创 2022-02-16 20:01:40 · 367 阅读 · 0 评论 -
vue使用keep-alive缓存页面优化项目
一、概念keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。二、作用在组件切换过程中 把切换出去的组件保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性三、原理在 created钩子函数调用时将需要缓存的 VNode 节点保存在 this.cache 中/在 render(页面渲染) 时,如果原创 2022-02-15 18:55:22 · 176 阅读 · 0 评论 -
后台管理上传图片
一、后台管理上传图片 // 在页面中添加upload组件,并设置对应的事件和属性 // action 指定图片上传的地址 // :on-preview 当点击图片时会触发该事件进行预览操作,处理图片预览 // :on-remove 当用户点击图片右上角的X号时触发执行 // :on-success 当用户点击上传图片并成功上传时触发 // list-type 设置预览图片的方式 // :headers 设置上传图片的请求头<el-upload :action原创 2022-02-14 20:06:11 · 1290 阅读 · 0 评论 -
vue路由、路由传参(parmas,query)
一、Vue路由基础用法1 .安装 npm install vue-router --save2 .main.js中//Vue路由:引入import VueRouter from 'vue-router'Vue.use(VueRouter)//Vue路由:引入并创建组件import BYHome from './components/BYHome.vue'import BYNews from './components/BYNews.vue'import HelloWorld from原创 2022-02-14 19:03:49 · 480 阅读 · 0 评论 -
vue之filter
一、vue之filter过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种:局部过滤器和全局过滤器全局过滤器// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' })原创 2022-02-13 19:53:36 · 213 阅读 · 0 评论 -
vue自定义指令的应用场景
一、使用自定义指令背景代码复用和抽象的主要形式是组件。当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令但是,对于大幅度的 DOM 变动,还是应该使用组件二、常用案例1、 输入框自动聚焦// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时 inserted: function (el) { // 聚焦元素 el.focus() }})<input v-fo原创 2022-02-13 19:01:05 · 94 阅读 · 0 评论 -
vue自定义指令
一、什么是自定义指令我们看到的v-开头的行内属性,都是指令,不同的指令可以完成或实现不同的功能,对普通 DOM元素进行底层操作,这时候就会用到自定义指令。除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令指令使用的几种方式://会实例化一个指令,但这个指令没有参数 `v-xxx` // -- 将值传到指令中`v-xxx="value"` // -- 将字符串传入到指令中,如`v-html="'<p>内容</p>'原创 2022-02-13 18:52:30 · 130 阅读 · 0 评论 -
vue组件化开发
面试官常问到的题:1、你封装过组件吗??2、说一下组件封装????3、你在项目中是如何封装组件的?????我用vue开发的所有项目,都是采用组件化的思想开发的。一般我在搭建项目的时候,会创建一个views目录和一个commen目录和一个feature目录,views目录中放页面级的组件,commen中放公共组件(如:head(公共头组件),foot(公共底部组件)等),feature目录内放功能组件(如:swiper(轮播功能组件),tabbar(切换功能组件)、list(上拉加载更多功能组件))原创 2022-02-11 20:11:23 · 674 阅读 · 0 评论 -
vue中的修饰符
一、事件修饰符.stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不原创 2022-02-11 19:45:08 · 109 阅读 · 0 评论 -
mvvm和mvc
mvvm(是 Model-View-ViewModel 的缩写)概念:分别对应着:数据,视图,视图模型。Model是我们应用中的数据模型,View是我们的UI视图层, 通过ViewModle,可以把我们Modle中的数据映射到View视图上,同时,在View层修改了一些数据,也会反应更新我们的Modle。简单理解就是双向数据绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。以vue为例:view 对应 template,vm 对应 new Vue({原创 2022-02-11 19:04:53 · 78 阅读 · 0 评论 -
vue中Computed、Methods、Watch区别
一、methods、watch、computed的区别computed 属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算,主要当作属性来使用;methods 方法表示一个具体的操作,主要书写业务逻辑;watch 一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是 computed 和 methods 的结合体;计算属性的getter与setter计算属性默认只有get,在需要的时候也可以设置set方法fullN原创 2022-02-10 15:44:48 · 1782 阅读 · 0 评论 -
vue监听和深度监听watch
watch可以让我们监控一个值的变化,从而做出相应的反应<div id="app"> 用户名:<input type="text" v-model='person.name'> <button @click='person.age++'>+</button> <p>你的名字是:{{person.name}}</p> <p>你的年龄是:{{person.age原创 2022-02-07 19:05:29 · 74 阅读 · 0 评论 -
vuex面试题总结
1.什么是vuexVuex是一个专为 Vue.js 应用程序开发的状态管理模式,它由五部分组成:分别是:state,actions,mutations,getters,modules2.vuex由五部分组成state: 数据actions:可以包含异步操作mutations: 唯一可以修改state数据的场所getters: 类似于vue组件中的计算属性,对state数据进行计算(会被缓存)modules:模块化管理store(仓库),每个模块拥有自己的 state、mutation、a原创 2022-02-07 18:59:58 · 3639 阅读 · 0 评论 -
Vue组件通信
一、父组件传到子组件父组件是通过props属性给子组件通信的数据是单向流动 父—>子(子组件中修改props数据,是无效的,会有一个红色警告)父组件parent.vue代码如下: <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰-->原创 2022-02-07 18:41:50 · 106 阅读 · 0 评论 -
vue中的diff算法
一、什么是diff算法diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。简单来说:diff的过程就是调用名为patch的函数,比较新旧节点,一边比较一边给真实的DOM打补丁二、diff算法的特点比较只会在同层级进行, 不会跨层级比较在diff比较的过程中,循环从两边向中间比较diff 算法的在很多场景下都有应用,在 vue 中,作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较三、d原创 2022-02-07 09:11:08 · 5484 阅读 · 0 评论 -
Vue中的虚拟dom
一、什么是虚拟DOM(1)、通过js创建一个Object对象来模拟真实DOM结构,这个对象包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性,通过vue中的render()函数把虚拟dom编译成真实dom,在通过appendChild()添加到页面中。(2)、创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中,所以虚拟DOM对象的节点与真实DOM的属性一一照应虚拟dom可以简单的用一句话概括就是用普通js对象来描述DOM结构,因为不是真实DOM,所原创 2022-02-07 08:59:29 · 503 阅读 · 0 评论 -
为什么组件的data必须是一个函数
1、实例和组件定义data的区别vue实例中的data属性既可以是一个对象,也可以是一个函数const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }组件中定义data属性,只能是一个函数如果为组件data直接定义为一个对象,就会出现警告原创 2022-01-28 16:11:23 · 122 阅读 · 0 评论 -
v-if与v-show的区别
1、相同点都可以动态控制着dom元素的显示隐藏2、区别v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除v-show:控制DOM的显示是为DOM元素添加css的样式display,设置none或者是block,DOM元素是还存在的3、性能对比v-if有更高的切换消耗;v-show有更高的初始渲染消耗4、使用场景v-if适合运营条件不大可能改变的场景下;v-show适合频繁切换;例如:v-if:在请求后台接口,用接口返回数据渲染生成多个元素的时候,由于网速太慢,导致数据原创 2022-01-28 15:37:48 · 395 阅读 · 0 评论 -
for···in和for···of的区别
for in 和 for of的区别首先一句话:(for···in去key,for···of取value)①从遍历数组角度来说,for···in遍历出来的是key(即下标),for···of遍历出来的是value(即数组的值);var arr = [99,88,66,77];for(let i in arr){ console.log(i); //0,1,2,3}for(let i of arr){ consoel.log(i); //99,88,66,77}②原创 2022-01-24 19:40:50 · 73 阅读 · 0 评论 -
数组的排序
1、冒泡排序(每一趟找出最大的)//性能一般let arr=[1,5,7,9,16,2,4];//冒泡排序,每一趟找出最大的,总共比较次数为arr.length-1次,每次的比较次数为arr.length-1次,依次递减let len = arr.length;for(let k = 0; k < len - 1; k++) { for(let m = 0; m < len - k - 1; m++) { if(arr[m] > arr[m+1]){原创 2022-01-24 17:19:40 · 459 阅读 · 0 评论 -
JS数组去重
1、ES6~set去重使用ES6中的set是最简单的去重方法 function mmj1(arr) { //Set数据结构,它类似于数组,其成员的值都是唯一的 return Array.from(new Set(arr)); // 利用Array.from将Set结构转换成数组 } console.log(mmj1([1, 2, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // 结果是[1,原创 2022-01-24 16:59:10 · 530 阅读 · 0 评论 -
js异步之宏任务和微任务
面试题写出console.log的输出顺序console.log(100); // 1setTimeout(()=>{ console.log(200); // 4})setTimeout(()=>{ console.log(201); // 5})Promise.resolve().then(()=>{ console.log(300); // 3})console.log(400); // 2// 100 400 300 200 2原创 2022-01-22 16:35:13 · 159 阅读 · 0 评论 -
js垃圾回收和内存泄漏
垃圾回收机制浏览器的Javascript具有自动垃圾回收机制(GC:Garbage Collecation)原理:垃圾收集器会定期(周期性)找出那些不在继续使用的变量,然后释放其内存(这个过程不是实时的,因为其开销比较大并且GC时停止响应其他操作,所以垃圾回收会按照固定的时间间隔周期性的执行)只有函数内的变量才可能被回收function fn1() { var obj = {name: 'hanzichi', age: 10};}function fn2() { var obj原创 2022-01-22 15:18:16 · 66 阅读 · 0 评论 -
ES3~ES7的数组方法
ES3~ES7的数组方法学习JavaScript数组方法总结(1)、push(): 给数组的末尾添加元素。格式:数组.push(参数,参数…)(2)、pop(): 删除数组最后一个元素。格式:数组.pop()(3)、shift(): 删除数组的第一个元素。格式:数组.shift()(4)、unshift(): 给数组 首位添加元素。格式:数组.unshift(参数,参数…)(5)、concat(): 数组合并。 格式:数组1.concat(数组2)(6)、slice(): 数组截原创 2022-01-20 18:51:16 · 869 阅读 · 0 评论 -
js数据类型判断
数据类型的判断大概有四种方法:typeof、instanceof、constructor、Object.prototype.toString.call()、jquery.type()typeof(1)、Number、String、Boolean、undefined以及引用数据类型中Function,可以使用ypeof检测数据类型,分别对应的数据类型小写字符(2)、用typeof检测构造函数创建的Number,String,Boolean都返回object(3)、引用数据类型:Array、Obje原创 2022-01-20 16:30:16 · 475 阅读 · 0 评论 -
vue路由导航守卫
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。分为:全局、单个路由独享、组件级的1、 全局守卫都是在main.js中去写的(1)、全局前置守卫 router.beforeEach(2)、全局解析守卫 router.beforeResolve(3)、全局后置钩子 router.afterEach全局前置守卫你可以使用 router.beforeEach 注册一个全局前置守卫(在router/index.js)router.beforeEach((to, fr原创 2022-01-12 15:52:15 · 595 阅读 · 0 评论 -
常见浏览器兼容性问题
不同浏览器的内核不尽相同,所以各个浏览器对网页的解析存在一定的差异浏览器内核主要分为两种,一是渲染引擎,另一个是js引擎所以浏览器兼容性问题一般指:css兼容,js兼容浏览器内核(渲染引擎)Chrome谷歌之前Webkit,已改Blink内核FireFox火狐GeckoSafari苹果WebkitIETridentOpera欧朋现已改用Google Chrome的Blink内核一、 css兼容1、不同浏览器的标签默认的margin和pad原创 2022-01-12 15:42:07 · 174 阅读 · 0 评论 -
link与@import的区别
应用场景 <head> <!-- link是标签,引入外部样式表 --> <link rel="stylesheet" href="./a.css"> <style> /* @import 在css环境中 导入外部css */ @import url('./b.css'); .box{ width: 100px; height: 100px;原创 2022-01-11 16:38:05 · 77 阅读 · 0 评论 -
src与href的区别
href是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接例子:css外部样式的链接,a标签超链接的使用src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。..原创 2022-01-11 16:35:24 · 589 阅读 · 0 评论 -
HTML5和css3新特性
css3新特性(1)、选择器(2)、背景和边框(3)、文本效果(4)、2D/3D转换——变形(transform)、过渡(transtion)、动画(animation)1、选择器常规选择器: :last-child //选择元素最后一个孩子 :first-child //选择元素第一个孩子 :nth-child(1) //按照第几个孩子给他设置样式 :nth-child(even)//按照偶数 :nth-child(odd) //按照奇数 :disabled //选择每个禁用原创 2022-01-11 16:26:58 · 99 阅读 · 0 评论 -
CSS Hack
什么是CSS Hack一般来说是针对不同的浏览器写不同的CSS,就是CSS Hack.CSS Hack常见的有三种形式:属性Hack、选择符Hack、条件注释Hack,Hack主要针对IE浏览器1、条件Hack条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览器下被当作注释而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等<!--[if IE]> <p>你在非IE中将看不到我的身影</p><![endif]-原创 2022-01-11 13:39:07 · 145 阅读 · 0 评论 -
行内元素、块级元素、空元素
CSS规范,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,比如div默认display属性值为“block”,成为“块级”元素;span默认display属性值为“inline”,是“行内”元素。行内元素span a b i img input select strong块级元素div p h1~h6 table from ul ol li dl dt dd…空元素(没有内容)<br> <hr>原创 2022-01-11 10:43:06 · 340 阅读 · 0 评论 -
Flex布局
阮一峰总结:Flex 一、flex布局是什么? Flex 是 Flexible Box 的缩写,意为“弹性布局”(容器),用来为盒模型提供最大的 灵活性,它的所有子元素自动成为容器成员 容器默认存在两根轴:水平的轴(main axis)和垂直的交叉轴(cross axis) (1)、任何一个容器都可以指定为Flex布局 (2)、行内元素也可以使用Flex布局 (3)、Webkit 内核的浏览器,必须加上 -webkit 前缀 ** .box{ display: -w原创 2022-01-08 15:46:23 · 97 阅读 · 2 评论 -
元素水平、居中
让一个元素垂直水平// dom结构<div class='box'> <div class='small_box'></div></div>方法一: 子绝父相,top:50%,left:50%,子需要移动本身宽度和高度的一般.box { width:400px; height:400px; background:red; position:relative} .small_box { width:200px;原创 2022-01-07 20:26:17 · 73 阅读 · 0 评论 -
position定位属性值
position的含义是指定位类型,取值类型可以有:static、relative、absolute、fixed、inherit、和sticky,这里sticky是css3新发布的一个属性。1、position:staticstatic(没有定位)是position的默认值,元素设置相对于原本位置的定位,元素并不脱离文档流,因此元素原本的位置会被保留,其他的元素位置不会受到影响2、position:relativerelative(相对定位)是指给元素设置相对于原本位置的定位,元素并不脱离原创 2022-01-07 14:40:34 · 1748 阅读 · 1 评论