- 一.在不知元素宽高的情况下,如何让块状元素自动居中?
-
方式1: <!--给元素加入定位元素--> position::absolute; <!--给元素设置距离: 距离上下各 50%--> left:50%; top:50%; <!--设置元素的相对于⾃身的偏移度为负50%(也就是元素⾃身尺⼨的⼀半)--> transform:translate(-50%,-50%); 方式2: <!--把元素变成定位元素--> position:absolute; <!--设置元素的定位位置,距离上、下、左、右都为0--> left:0; right:0; top:0; bottom:0; <!--设置元素的margin样式值为 auto--> margin:auto;
- 二.var,let,const 这些有啥区别:
-
1. var 具有变量提升,⽽const和let没有 2. const和let都是块级局部变量 3. 同⼀个作⽤域下 const和let不可以声明同⼀个变量 var是可以的const在使⽤的时候不可以修改值
- 三.普通函数和箭头函数的区别
-
⼀.外形不同:箭头函数使⽤箭头定义,普通函数中没有 ⼆.箭头函数都是匿名函数: 普通函数可以有匿名函数,也可以有具体名函数,但是箭头函数都是 匿名函数。 三.箭头函数不能⽤于构造函数,不能使⽤new命令,否则报错 普通函数可以⽤于构造函数,以此创建对象实例。 四.箭头函数中this的指向不同: 箭头函数的外层如果有普通函数,那么箭头函数的 this 就是外层普通函数的this 箭头函数的外层如果没有普通函数,那么箭头函数的 this 就是全局变量window
- 四.闭包的含义,用途,缺点:
-
闭包:是指有权访问另⼀个函数作⽤域中的变量的函数,当函数可以记住并访问所在的词法作⽤域时,就产⽣了 闭包(即使函数是在当前词法作⽤域之外执⾏) 闭包用途: 能够访问函数定义时所在的词法作⽤域(阻⽌其被回收) 私有化变量 模拟块级作⽤域 创建模块 闭包缺点: 会导致函数的变量⼀直保存在内存中,过多的闭包可能会导致内存泄漏
- 五. TCP请求方式的过程
-
建⽴TCP连接->发送请求⾏->发送请求头->(到达服务器)发送状态⾏->发送响应头->发送响应数据->断TCP连接
- 六.回流和重绘
-
重排(也称回流): 当DOM的变化影响了元素的⼏何信息(DOM对象的位置和尺⼨⼤⼩),浏览器需要重新计算元素 的⼏何属性,将其安放在界⾯中的正确位置,这个过程叫做重排(回流)。 触发:添加或者删除可⻅的DOM元素,元素尺⼨改变(边距、填充、边框、宽度和⾼度) 重绘:当⼀个元素的外观发⽣改变,但没有改变布局,重新把元素外观绘制出来的过程,叫做重绘 触发:改变元素的color、background、box-shadow等属性 回流(重排)优化建议: 分离读写操作 样式集中修改 缓存需要修改的DOM元素 尽量只修改position:absolute或fixed元素,对其他元素影响不⼤ 动画开始GPU加速,translate使⽤3D变化
- 七.原型链:
-
当我们访问⼀个对象的属性时,如果这个对象内部不存在这个属性,那么它就会去它的原型对象⾥找这个属性,这个原型对象⼜会有⾃⼰的原型,于是就这样⼀直找下去,也就是原型链的概念
- 八.什么是生命周期,他的作用,过程
-
vue的⽣命周期:每个Vue实例在创建时都会经过⼀系列的初始化过程 作用:在vue生命周期的不同阶段通过对应的钩子函数来实现 组件数据管理 和 DOM渲染 两大重要功能 过程: 1.创建阶段(create阶段): beforecreate: vue实例已经初始化,但不能获取DOM节点 (无 data /无el ) created: vue实例已经创建,但是仍然不能获取dom节点 (有data /无el ) 2.载入阶段(mount阶段): beforeMount: 模板编译完成,但是未挂载到界面上 (有data /有el ) mounted: 编译好的魔板已经挂载到了界面中(数据和dom节点已经渲染出来了) 3.更新阶段(update阶段): beforeupdate: 数据发生变化立即调用,此时data中的数据时最新的,但是页面上的数据还是旧的(检测到数据更新时,但dom更新前执行) updataed: 更新结束后执行,此时data中的值与页面上的值都已经是最新的 4.销毁阶段(destroy阶段): beforedestroy: (实例被销毁前)当要销毁vue实例时,在销毁之前执行 destroy: (实例被销毁前)在销毁vue实例前执行
- 九.created和mounted的区别
-
created :实例已经创建, 但不能获取DOM节点 mounted :模板已经挂载到页面上了,可以操作dom元素
- 九. 如果在实例创建之后添加新的属性到实例上,它会不会触发视图更新
-
不会,同时vue官方给我们提供了两种方法: vue.set() 和 this.$set()
- 十. Vue组件通信
-
⽗⼦组件通信 ⽗->⼦ props ⼦->⽗ $on、$emit 获取⽗⼦组件实例 parent、children Ref 获取实例的⽅式调⽤组件的属性或者⽅法 Provide、inject 官⽅不推荐使⽤,但是写组件库时很常⽤ 兄弟组件通信(bus总栈) Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue() Vuex 跨级组件通信 $attrs、$listeners Provide、inject
- 十一. 监听器与计算属性的区别:
-
1).计算属性 需要依赖多个属性的情况 侦听器只依赖一个属性的情况 2).计算属性缓存结果时每次都会不断重新创建变量,而侦听器是直接计算,不会创建变量保存结果 3)计算属性有缓存, 监听没有缓存 4).computed计算属性的结果是通过return返回的,而watch不需要return。 5).watch监听中的参数可以得到侦听属性改变的最新结果,而computed函数没有这种参数。
- 十二.$route与$router的区别
-
router: 是VueRouter的⼀个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到⼀个router的实例对象,这个对象中是⼀个全局的对象,他包含了所有的路由包含了多关键的对象和属性。 route: 是⼀个跳转的路由对象,每⼀个路由都会有⼀个route对象,是⼀个局部的对象,可以获取对应的name,path,params,query等 两者的⼀些属性是不同的。
- 十三.导航守卫:
-
全局: beforeEach 局部: afterEach 导航守卫的执行顺序: beforeRouteLeave --> beforeEach : 全局前置守卫(三个参数) to :即将进入的路由对象 from :当前导航正要离开的路由 next :下一步 -->路由独享守卫 (beforeEnter) -->组件内进入(beforeRouteEnter) --> 全局解析守卫(beforeResolve) --> 全局后置守卫(afterEach) --> beforecreate --> created -->失活组件的销毁(destory)-->当前的组件的beforeMout -->mounted
- 十四.第一次页面加载会触发哪几个钩子函数?
-
beforeCreate created beforeMount mounted
- 十五.双向绑定实现原理
-
当⼀个Vue实例创建时 Vue会遍历data选项的属性,⽤Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖, 在属性被访问和修改时通知变化。每个组件实例都有相应的watcher 程序实例, 它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调⽤时 会通知 watcher重新计算,从⽽致使它关联的组件得以更新
- 十六.vuex是什么?它的核心概念是什么?
-
Vuex是一个专为vue.js应用程序开发的状态管理模式 状态管理(五个属性) :state,getters,mutation,action,modules 状态就是数据,它相当于一个仓库,是用于存放数据用的,它可以把存储的数据共享给其他组件 详细五个概念: state 负责状态管理,类似于vue中的data,用于初始化数据 mutation 存放的是动态修改Vuex的state中保存的数据状态的方法,通过commit触发 action 可以处理异步,通过dispatch触发,不能直接修改state,首先在组件中通过dispatch触发action,然 后在action函数内部commit触发mutation,通过mutation修改state状态值,将mutations里面处里数据的方法变成可异步的处理数据的方法,简单的说就是异步操作数据 getter Vuex中的计算属性,相当于vue中的computed,依赖于state状态值,状态值一旦改变,getter会重新计算,也就是说,当一个数据依赖于另一个数据发生变化时,就要使用getter module 模块化管理
- 十七.axios 是⼀个基于Promise ⽤于浏览器和 nodejs 的 HTTP 客户端
- 十八.vue组件中的data 定义为何必须是一个函数?
因为data是对象的话,由于对象是引用类型,组件被复用的话,就会创建多个实例.本质上,这些实例用的都是同一个构造函数。这样就会影响到所有的实例,所以为了保证组件不同的实例之间data不冲突,data必须是一个函数
十九.什么是声明式路由? 什么是编程式路由 ?
-
声明式: <router-link to='跳转的路径'></router-link> 编程式跳转: 就是js写法 即this.$route.push('跳转的路径') //不带参数推荐直接跳转 // this.$router.push('跳转的路径') //如需带参数: 推荐使用路由的name属性 let myname = this.$route.params.id; this.$router.push( {name:'logo',params:{m:myname} });
二十.使用vue的v-for时,为什么要绑定:key? 如何不绑定会有什么效果?
-
key :可以给组件的添加唯一的标识性,为了更好的区别各个组件,更好的查找和单个渲染 不绑定会导致所有列表Dom重新渲染