Vue面试题持续更新......

1.Vue的特点是什么？

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

2、双向数据绑定，在数据方面更为简单

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

4、组件化、方便封装和服用

5、虚拟dom：dom操作时非常消耗性能的，不再使用原生的dom操作节点，极大的解放了dom操作

2.Vue中父子组件时如何传值的？

1、子组件通过事件调用向父组件传值

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

2、父组件向子组件传值

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

第二步：把父组件传递过来的数据，在 props数组中定义一下
组件中的所有props 中的数据，都是通过父组件传递给子组件的
props 中的数据都是只读的，无法重新赋值

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

3、父组件把方法传递给子组件

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

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

第三步：在子组件中调用定义的那个方法，就可以触发父组件传递过来的方法了

3.v-show和v-if的共同点和不同点？

相同点：都能控制元素显示和隐藏

不同点;实现方式不同
v-show是通过display：none/block来控制显示和隐藏的

v-if是通过删除和增加DOM元素来实现显示和隐藏的。

v-if不断地创建添加DOM和删除DOM非常消耗性能，如果需要频繁切换建议使用v-show。

4、说出几种Vue当中的指令和它的用法

v-model双向绑定

v-for循环

v-on绑定事件可缩写为@

v-show，v-if显示与隐藏

v-once只能绑定一次

v-html可解析html：

v-bind属性绑定

5、v-loader是什么？使用它的用途是什么

v-loader是vue里面的加载器，用于加载vue文件将template/js/style转换为js模块。

6、axios是什么？怎么使用？

axios是请求后台资源的模块.

使用方法可以使用npm i axios
也可以使用cdn节点：

javascript"><script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用举例

1、执行get请求

javascript">向具有指定ID的用户发出请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

也可以通过 params 对象传递参数
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2、执行post请求

javascript">axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

7、单页面应用和多页面应用的区别及优缺点

单页面：是只有一个主页面（html），切换页面内容时通过路由程序动态载入，且js/css/html会一次性同时加载完毕
多页面：是有多个html组成，js/css/html会根据访问页面来一次加载，页面跳转时需要刷新页面

单页面的优点：切换内容快不需要重新加载整个页面、用户体验好、服务器压力较小、前后端分离、页面炫酷

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

vue_140">8、简述一下vue常用的修饰符和作用？

一、v-model修饰符

1、.lazy：

输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开input框才会更新数据：

<input type="text" v-model.lazy="value">

2、.trim：

输入框过滤首尾的空格：

<input type="text" v-model.trim="value">

3、.number：

先输入数字就会限制输入只能是数字，先字符串就相当于没有加number，注意，不是输入框不能输入字符串，是这个数据是数字：

<input type="text" v-model.number="value">

二、事件修饰符

4、.stop：

阻止事件冒泡，相当于调用了event.stopPropagation()方法：

<button @click.stop='test'>test</button>

5、.prevent：

阻止默认行为，相当于调用了event.preventDefault()方法，比如表单的提交、a标签的跳转就是默认事件：

<a @click.prevent='test'>test</button>

6、.self：

只有元素本身触发时才触发方法，就是只有点击元素本身才会触发。比如一个div里面有个按钮，div和按钮都有事件，我们点击按钮，div绑定的方法也会触发，如果div的click加上self，只有点击到div的时候才会触发，变相的算是阻止冒泡：

<div @click.self='test'>test</div>

7、.once：

事件只能用一次，无论点击几次，执行一次之后都不会再执行

<div @click.once='test'>test</div>

8、.capture：

事件的完整机制是捕获-目标-冒泡，事件触发是目标往外冒泡

9、.sync

对prop进行双向绑定

10、.keyCode：

监听按键的指令，具体可以查看vue的键码对应表

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

MVVM分别是model、view、viewModel三者

model:代表数据模型，数据和业务逻辑都在model层中定义
view：代表ui视图，负责数据的展示
viewmodel：负责监听model中的数据的改变并且控制试图的更新，处理用户交互操作

model和view无直接关联他们是通过viewmodel来关联起来的

这种模式实现了model和view的数据自动同步，开发者只需要专注对数据的维护操作即可。

10、前端如何优化网站性能

1、减少 HTTP 请求数量

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

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

CSS Sprites

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

合并 CSS 和 JS 文件

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

采用 lazyLoad

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

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

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

一般情况下都是CSS在头部，JS在底部。

3、利用浏览器缓存

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

vueDOM_264">4、减少 DOM 操作（vue这种减少操作DOM）

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

vue_270">11.vue中样式绑定语法

1、对象绑定法v-bind:
class='{'orange':'isRipe','green':'isNotRipe'}'
2、数组方法v-bind：
class='{class1,class2}'
3、行内v-bind:
style='{color:color,fontSize:fontSize+'px'}'

vue_283">12.简述vue中每个生命周期具体适合那些场景？

什么是生命周期：

生命周期是一个vue实例从创建到销毁的一个过程，就是生命周期。
就是从开始创建实例、初始化数据、编译模板、挂在dom->渲染、卸载等一系列过程。成为vue的生命周期

生命周期钩子=生命周期函数=生命周期事件

这是前四个生命周期钩子。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KdhoxRoK-1616067805851)(C:\Users\Administrator\Desktop\生命周期.png[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SS3Nw2nR-1616067806433)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210317203044515.png)]]

总共有八个阶段；

分别为创建前、创建后、载入前、载入后、更新前、更新后、撤销前、撤销后

13.如何避免回调地狱

模块化：将回调函数换位独立的函数
使用流程控制库，例如【aync】
使用Promise
使用aync/await

14.使用npm有哪些好处

通过Npm，你可以安装和管理项目的依赖，并且指明依赖项的具体版本号
对于node应用的开发而言，你可以通过package.json文件夹来管理项目信息，配置脚本，以及指明依赖的具体版本

npm的一些知识：

npm install xx -S写入dependencies对象（生产环境），npm install -D 写入devDependencies插件只用于开发不用于上线。
在项目转换的时候不会把node_modules包发过去，通过npm install 安装所有依赖

. 使用Promise
4. 使用aync/await

14.使用npm有哪些好处

通过Npm，你可以安装和管理项目的依赖，并且指明依赖项的具体版本号
对于node应用的开发而言，你可以通过package.json文件夹来管理项目信息，配置脚本，以及指明依赖的具体版本

npm的一些知识：

npm install xx -S写入dependencies对象（生产环境），npm install -D 写入devDependencies插件只用于开发不用于上线。
在项目转换的时候不会把node_modules包发过去，通过npm install 安装所有依赖