VUE经典面试题总结（一）

数据双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来给各个属性添加setter，getter并劫持监听，在数据变动时发布消息给订阅者，触发相应的监听回调。就必须要实现以下几点：
1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图

9.computed,methods,watch的区别

computed是计算属性，是基于它们的依赖进行缓存的，必须要有返回值，只执行一次，

methods是方法，只要发生发生渲染，都会执行该函数。

watch是监听器，侦听一个特定的值，当该值变化时执行特定的函数。例如分页组件中，我们可以监听当前页码，当页码变化时执行对应的获取数据的函数。

什么情况下分别使用computed、watch、methods

（1）数据量大，需要缓存的时候用computed；每次确实需要重新加载，不需要缓存时用methods。
（2）尽量用computed计算属性来监视数据的变化，因为它本身就这个特性，用watch没有computed“自动”，手动设置使代码变复杂。
（3）虽然计算属性在大多数情况下是非常适合的，但是在有些情况下我们需要自定义一个watcher，在数据变化时来执行异步操作，这时watch是非常有用的。

10.Vuex是什么

Vuex是Vue的状态管理工具，集中数据之间的共享；管理共享的数据，易于开发和后期维护；存储在Vuex的数据是响应式的，能够实时保持页面和数据的同步；

应用场景有：单页应用中，组件之间的状态，音乐播放、登录状态、加入购物车等。

Vuex重要核心属性包括：state,mutations,action,getters,modules.

state:存数据状态

mutations:动态修改Vuex 的 store 中的状态或数据。

actions:异步操作数据,调用mutations里数据的方法

getters：对state数据进行预处理（类似vue的计算属性）

modules：项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

11.为什么 Vuex 的 mutation 中不能做异步操作？

每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。

12.组件间的通信有哪些

1.父传子：props
父组件通过 props 向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed

2.父传子孙：provide 和 inject
父组件定义provide方法return需要分享给子孙组件的属性，子孙组件使用 inject 选项来接收指定的我们想要添加在这个实例上的属性；

3.子传父：通过事件形式
子组件通过 $emit()给父组件发送消息，父组件通过v-on绑定事件接收数据。

4.父子、兄弟、跨级：eventBus.js
这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心）,用它来（e m i t ）触发事件和（ emit）触发事件和（emit）触发事件和（on）监听事件，巧妙而轻量地实现了任何组件间的通信。

5.通信插件：PubSub.js

6.vuex
vuex 是 vue 的状态管理器，存储的数据是响应式的。只需要把共享的值放到vuex中，其他需要的组件直接获取使用即可；

13.axios 是什么，其特点和常用语法

请求后台资源的模块。npm install axios -S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中

常用语法：
axios(config): 通用/最本质的发任意类型请求的方式
axios(url[, config]): 可以只指定 url 发 get 请求
axios.request(config): 等同于 axios(config)
axios.get(url[, config]): 发 get 请求
axios.delete(url[, config]): 发 delete 请求
axios.post(url[, data, config]): 发 post 请求
axios.put(url[, data, config]): 发 put 请求
axios.defaults.xxx: 请求的默认全局配置
axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器
axios.create([config]): 创建一个新的 axios(它没有下面的功能)
axios.Cancel(): 用于创建取消请求的错误对象
axios.CancelToken(): 用于创建取消请求的 token 对象
axios.isCancel(): 是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求
axios.spread(): 用来指定接收所有成功数据的回调函数的方法

14.vue-loader是什么？使用它的用途有哪些？

解析.vue文件的一个加载器，跟template/js/style转换成js模块。用途：js可以写es6、style样式可以scss或less、template可以加jade等

15.做过哪些Vue的性能优化？

编码阶段

尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
v-if和v-for不能连用
如果需要使用v-for给每项元素绑定事件时使用事件代理
SPA 页面采用keep-alive缓存组件
在更多的情况下，使用v-if替代v-show
key保证唯一
使用路由懒加载、异步组件
防抖、节流
第三方模块按需导入
长列表滚动到可视区域动态加载
图片懒加载

SEO优化

服务端渲染SSR
预渲染
打包优化

压缩代码

Tree Shaking/Scope Hoisting
使用cdn加载第三方模块
多线程打包happypack
splitChunks抽离公共文件
sourceMap优化

16.Vue中常用的一些指令

v-if：判断是否隐藏；

v-else：和v-if搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来

v-for：数据循环出来；

v-bind:class：绑定一个属性；

v-model：实现双向绑定；

v-on：简写为@，基础事件绑定；

v-once：执行一次；

v-show：取值为true/false，分别对应着显示/隐藏

17.Vue 事件修饰符

.prevent 阻止默认事件
.stop 阻止冒泡过
.self 当前元素自身时触发处理函数时
.once 只触发一次

18.Sass、Less区别？

是CSS预处理器,变量符不一样，less是@，而Sass是$;Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持;Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器

19.怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

在router目录下的index.js文件中，对path属性加上/:id。使用router对象的params.id。

20.vue-router有几种钩子函数？

1.全局路由
全局导航钩子主要有两种钩子：前置守卫(beforeEach)、后置钩子(afterEach)
2. 路由独享的钩子
单个路由独享的导航钩子，它是在路由配置上直接进行定义的

21.$nextTick的理解

在下次DOM更新循环结束之后执行延迟回调，nextTick主要使用了宏任务和微任务，根据执行环境分别常尝试采用。

Promise
MutationObserver
setImmediate
如果以上均不行就采用setTimeout
定义了一部方法，多次调用nextTick会将方法存到队列中，通过异步方法清空当前队列。

22.hash路由和history路由原理

location.hash的值实际就是URL中#后面的东西。

history实际采用了HTML5中提供的API来实现，主要有history.pushState()和history.replaceState()

23.router和route的区别

router存储的是与路由相关的方法，经常用的跳转链接就可以用this.$router.push，this.$router.go和router-link跳转一样。

route存储的是与路由相关的属性，相当于当前正在跳转的路由对象。可以从里面获取name,path,params,query等

24.Vue.set 改变数组和对象中的属性

在一个组件实例中，只有在data里初始化的数据才是响应的，Vue不能检测到对象属性的添加或删除，没有在data里声明的属性不是响应的,所以数据改变了但是不会在页面渲染；
解决办法：
使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上

25.vm.$set(obj, key, val) 做了什么？

由于 Vue 无法探测对象新增属性或者通过索引为数组新增一个元素，所以这才有了 vm.s e t ，它是 V u e . s e t 的别名。 v m . set，它是 Vue.set 的别名。 vm.set，它是Vue.set的别名。vm.set 用于向响应式对象添加一个新的 property，并确保这个新的 property 同样是响应式的，并触发视图更新。

为对象添加一个新的响应式数据：调用 defineReactive 方法为对象增加响应式数据，然后执行 dep.notify 进行依赖通知，更新视图
为数组添加一个新的响应式数据：通过 splice 方法实现

26.页面渲染为什么使用 key？

当有相同标签名的元素切换时，为避免渲染问题，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

27.对MVVM开发模式的理解：

Model 代表数据模型，数据和业务逻辑都在Model层中定义；
View 代表UI视图，负责数据的展示；
ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作
Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步