Vue+Node常见面试题（个人理解）

对于MVVM的理解

MVVM就是Model-View-ViewModel的简写，其中model表示数据模型，还可以再model中定义数据修改和操作的业务逻辑，View是UI组件，负责将数据模型传换成UI展示出来。ViewModel是Model和View之间的一个桥梁，view和model并不直接交互，ViewModel通过双向数据绑定将view和model连接起来

Vue的生命周期

• 创建前（beforeCreate）：构造函数生成了Vue实例，事件和生命周期钩子的初始化
• 创建后（created）：已经完成数据的初始化，methods方法可以使用，但是$el还不存在
• 载入前（beforeMount）：相关的一些render函数首次被调用，此时已经完成编译模板，根据data里面的数据和模板生成html，但是此时并没有将html挂载到页面
• 载入后（mounted）：挂载dom，将html渲染到页面上
• 更新前（beforeUpdate）：在数据更新之前
• 更新后（updated）：数据更新完，虚拟dom渲染完之后
• 销毁前（beforeDestroy）
• 销毁后（destroyed）
• 什么是Vue的生命周期：vue实例创建到销毁的一个过程。包括开始创建、初始化数据、编译模板、挂载dom然后渲染、更新dom然后渲染、销毁等过程

Vue的双向数据绑定原理

• 在vue中使用v-model实现双向数据绑定，其原理是采用数据劫持加上发布者-订阅者模式（观察者设计模式），通过Object.defineProperty()方法来劫持各个属性的getter和setter，在数据变动时发布信息给订阅者，触发相应的监听回调。
• defineProperty（）中第一个参数是监听的对象，第二个参数是要劫持的属性，第三个是一个包含get方法和set方法的对象，当监听到数据变动时会被此对象中的get和set方法截取，在此方法中可对数据进行处理

Vue组件间的参数传递

• 父子通信
  1.父到子：子组件通过props接受数据（父组件v-bind：子组件中props中的数据名 = 父组件现有的数据名 ； 子组件通过props中的同名数据对象接受，此中可写明数据类型）
  2.子到父：子组件通过$emit方法传递参数（子组件通过this.$emit(父组件事件名，传递的数据),父组件通过v-on:事件名 = “事件相应函数”，method中定义事件相应函数，其中的第一个参数就是传过来的数据

v-if和v-show的区别

v-if根据条件判断是否渲染，v-show根据条件设置display，如果是隐藏则设置display为none，如果需要经常切换状态的话使用v-show，否则用v-if

$route和$router的区别

$route是当前路由的信息对象，包括path、params等路由信息参数，而$router是一个全局的路由实例对象，包括了很多属性和方法，其中最常使用的就是路由的跳转方法this.$router.push，而通过控制台打印发现route是Object类型，router是VueRouter类型

路由的钩子函数

一般比较常用的就是全局的钩子beforeEach和afterEach，他们有三个参数，to，from，next，要往下跳转一定要调用next（）

Vuex是什么？

官方说Vuex是一个专为vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有的组件状态。按我理解就是在vue应用中有一些数据要经常在不同组件中用到，而每次通过父子通信等方式来使用这些数据太过麻烦，这时候就需要将这些数据抽离到一个公共的区域来管理，这样不论是父组件还是子组件亦或是后代组件都能很方便的使用到这些数据

• 使用vuex的方法
  import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.store({})
• vuex主要包括四部分：
  1. state：store储存的各种状态
  2. getters：相当于Vue的computed属性
  3. mutations：定义一些同步操作的方法，用来改变store的状态
  4. actions：定义一些异步操作的方法，其实际也是调用mutation的方法

Vue如何自定义一个过滤器

• 在data的同级里添加一个filters对象，在该对象里定义不同的过滤器
• 也可以直接Vue.filter(“过滤器名”,过滤器的操作函数)创建全局的过滤器

对keep-alive的了解

keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或者避免重复渲染。在Vue2.1.0版本之后，vue-alive加入了两个新属性，include（包含的组件缓存）和exclude（排除的组件不缓存）

vue.js的两个核心是什么？

数据驱动和组件系统

Vue常见的修饰符

• .stop:阻止单击事件冒泡
• .once：事件只会执行一次
• .capture：与事件冒泡相反，事件的捕获由外向内
• .self：只会自己范围内的事件，不包括子元素
• .prevent:阻止事件的默认行为

Vue中key的作用

key也就是唯一标识，在Vue中当更新已经渲染过的元素列表时，虚拟dom的diff算法默认使用的是“就地复用”的策略，也就是更新前后的节点类型相同时，并不会重新创建节点，而只是修改节点的属性来实现节点的更新。假设有一个列表，在这个列表的第三个节点前面插入一个节点，diff算法默认是将原第三个节点渲染成新节点，原第四个节点渲染成原第三个节点，以此类推最后生成一个节点渲染成原最后一个节点，这样的效率会很差，如果添加了key之后，每个节点都是唯一的，新的节点只是在原节点前面新生成一个节点，所以key的作用就是为了更好地更新虚拟dom。但是这有一个坑，就是不能使用index作为key

什么是Vue的计算属性？

有时候我们可以需要对数据进行一些逻辑操作，如果这些逻辑操作放在模板里会给人感觉特别臃肿，所以就有了计算属性，在计算属性中可以完成各种操作，最后只要返回一个结果就可以了，计算属性可以依赖于很多数据，当只要有一个数据改变，计算都会重新执行，比如在购物车的结算功能就要用到计算属性

axios封装

• 他是一个基于promise的http库，首先在src下建一个文件夹叫request，在里面添加一个http.js文件用于封装，首先导入axios，然后定义一个导出的函数，在函数中首先使用axios的create方法创建一个axios实例，create需要传入一个对象参数，参数可以是baseURL和timeout之类的，然后可以为axios配置请求和响应的拦截器，最后将axios作为函数的结果返回

Node如何加载xx模块

var xx = require("xx");

Node如何创建服务器，写出代码？

var http = require('http');
var server = http.createServer(function(req,res){
  业务逻辑
}).listen(3000,function(err){
  错误处理
})

浏览器请求 ‘/favicon.ico’表示什么？如何做出响应？

表示浏览器（客户端）请求页面图标
if(rep.url == '/favicon.ico'){
  fs.readFile('图标地址',function(err,data){
    res.write(data);
    res.end();
  })
}

fs模块如何异步读取一个文件(文件路径为：’./file.json’)？

fs.readFile('./file.json','utf-8',function(err,data){
  if(!err){
    data为读取的内容
  }
})

fs如何同步读取文件（文件的路径为：‘./file.json’）？

fs.readFileSync('./file.json','utf-8');

#node服务器如何设置跨域请求和中文乱码？
res.writeHeader(200,{
‘content-type’:‘application/json;charset=utf-8’,
‘Access-Control-Allow-Orign’:’*’
})

npm怎么下载包？

npm install 包名@版本号 或者 npm install 包名