面试题笔记

面试题总结

1、vue的特点是什么?

1.国人开发的一个轻量级框架。

2.双向数据绑定，在数据操作方面更为简单。

3.视图，数据，结构分离，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作。

4.组件化，方便封装和复用。

5.虚拟DOM: dom操作是非常耗费性能的，不再使用原生的dom操作节点，极大解放dom操作。
2、父子组件是如何传值的？
父组件引入子组件：

路由配置:使用children属性实现路由嵌套，嵌套的组件关系就是父子组件关系

代码示例：

{
    path: '/father',
    name : 'father ',
    component: father,
    children: [
	{
		path: 'son '，
		name : ' son',
		component: son
		}
	]
}

组件传值-父组件向子组件传值
第一步:父组件在引用子组件时，通过属性绑定(v-bind: )的形式，把需要传递给子组件的数据，传递到子组件内部，供子组件使用

父组件: father.vue

第二步:把父组件传递过来的数据，在props数组中定义一下

1.组件中的所有props 中的数据，都是通过父组件传递给子组件的

2.props 中的数据都是只读的，无法重新赋值

第三步:在该子组件中使用props数组中定义好的数据

子组件: son.vue

组件传值-父组件把方法传递给子组件

第一步:父组件向子组件传递方法，使用事件绑定机制v-on，自定义一个事件属性，传递给子组件

父组件: father.vue

第二步:在子组件中定义一个方法，在方法中，利用$emit触发.父组件传递过来的，挂载在当前实例上的事件，还可以传递参数

第三步:在子组件中调用定义的那个方法，就可以触发父组件传递过来的方法了
子组件: son.vue
组件传值-子组件通过事件调用向父组件传值

在子组件中，利用$emit触发父组件传递过来的方法的时候，可以将子组件的数据当做参数传递给父组件

父组件: father.vue
3、v-show和v-if指令的共同点和不同点?

共同点:都能控制元素的显示和隐藏。

不同点:实现本质方法不同。

v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次;v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。

总结:如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用v-if (初始渲染开销较小，切换开销比较大)
4、说出几种vue当中的指令和它的用法?

v-model双向数据绑定;
v-for循环;
v-if v-show显示与隐藏;
v-on事件;
v-once:只绑定一次

5、vue-loader是什么?使用它的用途有哪些?
vue文件的一个加载器，将template/js/style转换成js模块。用途: js可以写es6、style样式可以scss或less、template可以加jade
6、axios是什么?怎么使用?
请求后台资源的模块。
npm install axios --save装好，js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中。
7、单页面应用和多页面应用区别及优缺点
单页面应用(SPA)，通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html,js,css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写(页面片段)，然后在交互的时候由路由程序动态载入。

多页面(MPA)，就是指一个应用中有多个页面，页面跳转时是整页刷新。

单页面的优点:用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小;前后端分离;页面效果会比较炫酷（比如切换页面内容时的专场动画)。

单页面缺点:不利于seo;导航不可用，如果一定要导航需要自行实现前进、后退。

8、谈谈你对MVVM开发模式的理解

MVVM分为Model、View、ViewModel三者。

Model:代表数据模型，数据和业务逻辑都在Model层中定义;

View:代表UI视图，负责数据的展示;

ViewModel:负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作;

Mode1和view并无直接关联，而是通过viewModel来进行联系的，Mode1和viewode1之间有着双向数据绑定的联系。因此当Mode1中的数据改变时会触发view层的刷新，view中由于用户交互操作而改变的数据也会在Model中同步。

这种模式实现了Model和View的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作dom。
9、前端如何优化网站性能?
1、减少HTTP请求数呈

在浏览器与服务器进行通信时，主要是通过HTTP进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限〈不同浏览器允许并发数)，一旦HTTP请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少HTP的请求数量可以很大程度上对网站性能进行优化。

可以通过精灵图、合并css和js文件、懒加载等方式来减少http请求。
cSs Sprites

国内俗称css精灵，这是将多张图片台并成─张图片达到减少HTTP请求的一种解决方案，可以通过css的backgr oundN性来访问图片内容。这种方案同时还可以减少图片总字节数。

合并CSS和JS文件

现在前端有很多工程化打包工具，如: grunt、gulp、webpack等。为了减少HTTP请求数量，可以通过这些工具再发布前将多个CSS或者多个35合并成一个文件。

采用lazyLoad

俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内客。这样就控制了网页资源—次性请求数量。

2、控制资源文件加载优先级

浏览嚣在加载HTML内容时，是将HTML内容从上至下依次解析，解析到1ink或者script标签就会加载href或者sr c对应链接内容，为了第一时间展示页面给用户，就需要将CSs提前加载，不要受JS加载影响。

一般情况下都是CSS在头部，JS在底部。
3、利用浏览器缓存

浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。

4、减少DOM操作(vue这种减少操作DOM)

5、图标使用lconFont替换image标签

**

10.vue中样式绑定语法

**

1.对象方法v-bind:class="{‘orange’ :isRipe,‘green’:isNotRipe}"

2.数组方法v-bind:class="[class1,class2]"

3.行内v-bind:style="{color:color ,fontSize:fontSize ‘p×’]”

**

2021.4.5面试题

**
JS中的call()和apply()方法和区别
一、方法定义：

• apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。
• call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法

上面的定义看一遍是很懵的，不过自己遍写例子遍反复读的时候，会有种拨开云雾的感觉。

call 与 apply 的相同点：

• 方法的含义是一样的，即方法功能是一样的；
• 第一个参数的作用是一样的；

call 与 apply 的不同点：两者传入的列表形式不一样

• call可以传入多个参数；

• apply只能传入两个参数，所以其第二个参数往往是作为数组形式传入

存在的意义：实现（多重）继承

JS闭包

我们首先知道闭包有3个特性：

• ①函数嵌套函数
• ②函数内部可以引用函数外部的参数和变量
• ③参数和变量不会被垃圾回收机制回收

最后总结一下闭包的好处与坏处

好处

①保护函数内的变量安全 ，实现封装，防止变量流入其他环境发生命名冲突
②在内存中维持一个变量，可以做缓存（但使用多了同时也是一项缺点，消耗内存）
③匿名自执行函数可以减少内存消耗

坏处

①其中一点上面已经有体现了，就是被引用的私有变量不能被销毁，增大了内存消耗，造成内存泄漏，解决方法是可以在使用完变量后手动为它赋值为null；
②其次由于闭包涉及跨域访问，所以会导致性能损失，我们可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响
**

正则表达式

**

i  是一个修饰符 (搜索不区分大小写)。
search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
exec() 方法用于检索字符串中的正则表达式的匹配。

该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

使用 RegExp 对象
在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。