vue常问面试题

css（面试题）

实现垂直居中的方式：

1. flex布局：设置父元素为display:flex; 使用 justify-content:center; align-item:center;来进行居中
2. 块级盒子使用：margin: 0 auto;
3. 行内元素：使用： text-align:center line-height:父级高度
4. 使用位移：transform: translate(50%,50%)
5. 使用定位：子绝父相 来进行定位

pc端如何实现响应式布局：

1. 可以通过px和rem的转换来进行
2. 在vue中可以通过插件postcss-pxtorem px2rem-loader lib-flexible来进行
3. 通过 vh vw %来进行 媒体查询

js(面试题)

ES6的都有哪些新特征呢？

1. let和const
   let和const: 不存在变量提升;只能声明一次，不能重复声明； 遇到大括号会有块级作用域；
   变量声明出来存在VO或者AO,不会给window中增加属性。
   var: 有变量提升 在全局中声明的变量，会给window增加一个属性
2. 实现了数组的结构赋值和对象的结构赋值
3. 展开运算符
4. map和set和filter
   map和filter的区别是 ：map是会进行改变原数组的，而filter的话，只是进行元素的筛选，不会改变元素的个数。
   5箭头函数
   6模板字符串

深拷贝和浅拷贝都有哪些？ 区别是什么？
浅拷贝：

1.Object.assign() ：把两个对象合并成一个对象。
如果使用Object.assign（）也算是只有一层算是深拷贝。
有子级的情况下是算浅拷贝。
2展开运算符：进行的就是浅拷贝
3slice()
4concat() 方法也算是浅拷贝
使用concat来进行对象的话是一个深拷贝
深拷贝
1JSON.stringify()或者JSON.parse
用json会出现的问题： 它不可以拷贝 undefined , function, RegExp等类型。
2通过for in
3递归
4concat(数组的深拷贝) 使用concat合并数据，会返回一个新的数组。

可枚举

1. 我们可以通过for in和 Object.keys等方式列举出来的属性，被称之可枚举的属性。
   判断数据类型

2. typeof [value]
   检测的原理是：数据在计算机底层二进制 值来进行检测，检测的速度快
   null 在计算机存储是64个0，typeof检测前三位是0的对象类型，null会被检测成对象，typeof检测对象类型不会细 分，正则，function（函数），[ ] (数组) 都是Object

3. instanceof : 检测当前实例是不是属于类的
   底层机制： 实例 instanceof 构造函数
   先检测 构造函数 是否拥有 Symbol.hasInstance 方法[Es6+之后,在function中 增加这个方法]

4. constructor

5. Object.prototype.toString.call()

闭包

谈谈闭包的理解：定义的作用域和执行的作用域不是一个作用域，就产生了闭包。
也就是属性或者return出去的对象，被使用着，进行了压栈的这种情况。闭包的缺点：
会导致内存泄漏，我们可以通过使用null来解决。

vue(面试题)

1v-modle实现的原理？

@1通过v-bind来动态绑定value
@2通过@input来做表单事件来实现的动态的绑定

2组件中的data为什么要写成一个函数？

@1 因为组件是要进行复用的，js中的对象是引用关系，如果data写成一个对象的话，在合并的渲染的时候，会造成环境污染，所以data要写成函数的形式。所以一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝,new vue实例时不会被复用的。

3scope样式私有化的原理?

@1 当我们给style加上scope后，会给每个组件加上唯一id属性的[data-v-hash]，来确保样式的私有性。 在vue2中我们可以使用 /deep/来进行穿透 vue3中的我们 :deep()进行穿透

4v-if和v-show的区别是什么?

@1 v-if是判断是否符合条件进行展现，销存比较大
@2 v-show也是用于判断，一般用于组件频繁渲染的时候进行的使用的
@3场景： 在一般电商管理的app中分类的选项库，频繁切换我们使用，
v-show我们使用，一般在做只渲染一次或者销毁的我们采用，v-if来做的权限的动态登录来进行的。

5如何让data中的数据不实现响应式的呢？

@1我们可以通过define.freedz来进行冻结。
@2我们可以写在data外面
@3我们可以写在create()或者式 v-once执行一次来进行

6组件的封装

1 组件封装的四要素
+props + slot +$emit + $refs

7实现路由懒加载的原理是?

明天继续更新 vue中实现响应式的原理 vuex中的通信 vue-router中的 路由懒加载

8vue项目中封装axios?主要封装哪些方面? *****

1公共的URL
2设置请求超时的时间
3设置请求拦截器，自动添加token
4设置响应拦截器 对响应的状态或者数据来进行格式化。
5增加请求队列，实现loading效果
6 维护取消token,在页面切换或者通过导航守卫可以取消上一个界面发送的请求。
localstation和sesstation. localstation是给浏览器存一份，sesstation给页面存一份。

vue2实现响应式的原理

 通过Object.defineProperty()来做getters和setters做劫持的。

vue的优化

v-if和 v-show的使用场景
computed和watch区分使用的场景
v-for遍历必须为item添加key,且避免同时使用if
如果我们使用index作为唯一值会出现什么问题？
我们调整了数据的顺序[或者删除/新增了中间的某一项]
图片的懒加载和路由的懒加载
长列表的性能优化
事件的销毁
第三方插件的按需引入
服务器端渲染SSR or 预渲染
（2）Webpack层面的优化
Webpack对图片进行压缩
减少ES6转ES5的代码
提取组件的公共的css样式
优化SourceMaps
(3) 基础的Web技术的优化
开启gzip压缩
浏览器缓存
CDN的使用
使用 Chrome Performance查找性能瓶颈

vue的生命周期

1首先是常用的 在 created()中我们进行发数据请求，来尽快展开页面或者是在dispath中去执行
2在mounted中：页面进行加载完成后，我们可以进行获取dom元素后，可以设置定时器，自己的自定义的事件来进行
3updated中我们是来进行数据的更新，但是update是只要触发就会执行。我们更多使用的是nextick来进行dep收集依赖然后在进行触发某个生命周期的
4beforeDestroy中来进行自己的自定义事件和定时器的销毁。因为在vue中它只会销毁自己的组件，不会清除我们写的自定义的事件，所以我们需要手动释放自己的自定义事件。
其他的钩子函数就是：beforecreate beforeMount beforeuodate desroyed这个几个生命周期的钩子函数来进行的

封装公共的组件哪些

1Inout输入框
2Table表格
3Tree树形控件
4button按钮
5Pagination分页
6Echarts图表
7Dialog对话框

防抖和节流

防抖做了什么？延迟了函数的执行 应用的场景： 疯狂点击按钮 页面的resize事件，表单的提交
防抖的步骤： 1 定义变量我们进行存储变量timer
2 每次触发事件的时候，先清除上一次的定时器，以本次为准
3开启定时器，间隔时间之后在触发事件处理函数
节流做了什么？ 以固定的频率来执行函数 应用场景：发送短信验证码 (例如微信的频繁加好友),输入框的联想发送请求，scroll单位时间后计算一次滚动位置。
节流的步骤： 可以通过定时器也可以通过时间戳来进行
1 声明变量存储本次触发的时间time
2每一次触发的时候,使用当前时间 - time,判断两次间隔是否超过 节流时间
超过：本次触发时间。

vuex页面刷新数据丢失的问题

这个我们可以通过存在localStore中，当接口返回的数据保存在vuex的store里，当你改变vuex中的状态，组件就会检测到改变，而localStorage则不会，页面刷新才能看到改变，所以vuex中的状态从得到，这样就可以实现响应式的变化。

ES6新特征

vue2和vue3有什么区别?

小程序

小程序的范围大概是多少?

nextTick
如果同一个watcher被多次触发，只会被推入到队列中一次，
如果加入nextTick的意思就是你先不要管我nextTick里面的东西，先去渲染渲染完在来更新我nextTick的东西
this.$nextTick(callback) :在状态更改，视图更新后，触发回调函数执行，晚触发于update();
每一次的更改都是异步操作，：修改完状态，并没有立即执行"更新逻辑"而是要等到当前上下文中，同步事件处理，再去开启更新流程
这样设计的好处：同时更改多个状态，也不会一次次触发更新，而是统一批处理，只更新一次，大大提升性能，

vscode常用快捷键总结

Ctrl + G 跳转到指定的行数
Ctrl + H 要进行替换的内容

项目中遇到的问题

1 ui使用的设计字体是piangfangyahei 办法：自己下载字体，在main.js来引入苹方雅黑
2进行query的传参的时候，id是一个中文字段，不同浏览器会乱码 办法通过encodeURIComponent来进行编码， decodeURIComponent来解码来解决。
3在componment 中是放通用组件的，页面的的话我们需要全部放在views中.
图片的话我们自己是需要图片的文件夹
4