Vue经典面试题

Vue 经典面试题

一，vue是什么

vue是一套用于构建用户界面的渐进式框架，它的很大的特点是，vue被设计为自底向上逐层应用，vue的核心库只关注视图层，不仅易于上手，还便于与第三方库和已有项目整合

二，对于MVVM的理解

mvvm 是model-view-viewModel 的简写

model代表数据模型， 也可以在model中定义数据修改和操作的业务逻辑

view代表视图 它动态的将数据结合页面展示给用户

viewModel监听数据的变化，控制页面的渲染，在view和model搭建联系实现数据的双向绑定，解放了开发者的生产力，开发者可以专注开发逻辑，操作dom的任务交予vm处理。
ie

三，vue的生命周期钩子

1. beforeCreate : 创建前，在数据观测和初始化事件以前
2. created ： 创建后，完成数据初始化，属性和方法的运算，初始化事件，el挂载还没有显示
3. beforeMount：载入前，在挂载开始以前调用，相关的渲染函数首次被调用，vue实例完成了 编译模板、把data数据和模板生成html，但是还没有将html挂载到页面上
4. mounted : 载入后 将渲染成功的页面挂载到实例上 ，同时进行ajax交互
5. beforeUpdate ： 更新前 在数据更新前调用，发生在虚拟dom重新渲染和打补丁之前，不会触发附加的重渲染
6. updated： 更新后 由于数据的更改导致虚拟的dom重新渲染和打补丁之后调用，调用时dom已经更新，所以可以执行有关dom的操作， 该钩子在服务器渲染过程中不被调用
7. beforeDestroy : 销毁前 ，在实例销毁之前调用，实例仍然可用
8. destroyed 销毁后，在实例销毁后调用，调用后所有的事件监听器会被移除，所欲子实例被销毁，该钩子在服务器端渲染器不仅调用

四，Vue实现数据双向绑定的原理

vue实现双向绑定的原理 主要是 采用数据劫持 结合发布订阅着模式，通过Object.defineProperty（）

来劫持各个属性的setter 和getter ，在数据发生变化时，发布者将消息传给订阅者，并且执行相应的函数，实现视图的更新

五，vue组件的参数传递

1.父组件传值给子组件

父组件 传递给子组件 通过props方法接受数据

子组件传递给父组件，通过$emit方法传递参数

2.非父子组件的数据传递

项目小： 创建一个bus对象，当做事件中心，即中转站 用来传递事件和接受事件

项目大： 用vuex的stroe存储数据

六， 请求数据的方式

1.axios： vue中的ajax 用于向后台发起请求，其特点有从浏览器中创建XMLHttpRequests 、从node.js创建http请求 、支持Promise API ，

2.fetch : 属于w3c标准 需要舒勇两次then函数获取数据

七.vue的路由实现，hash模式和history模式

hash模式，标志在路径中有# #后面的字符称之为hash 用window.location.hash读取

​ 特点： hash虽然在url中但是不被包括在http请求中，用来指导服务器动作，但对服务器安全没用 hash不会重载页面

**history模式：**history采用了html5的新特性，并且提供了两个方法pushState（） 和replace（）

可以对浏览器历史记录栈修改，在此模式下前端的url必须和实际向后端请求的url地址一样

八、vuex

是一个专门为vue，js应用程序开发的状态管理模式，可以帮助管理全局的数据

主要有五个核心特性

1.state ：

放置项目所需的数据 在组件上调用命令 $store.state

2.mutation

放置操作state数据方法的的集合 在组件上调用 命令 $store.commit(‘方法名’)

3.action

害怕异步进行操作出错，将state中的数据搞乱。所以使用action来进行异步操作。

4.getters

可以对state中的数据复杂化传递给外界

5.module

当项目比较大，状态非常多时，采用模块化管理模式，vuex允许我们将store分成module 每个模块又有其自己的state，mutation action getterske

九，keep-alive的作用

当用keep-alive包裹动态组件时，会缓冲组件实例，可以保留组件状态，不用销毁，也就节省资源，当再次切换到该组件时，直接从缓冲中加载。

十、导航钩子有哪些？以及导航过程

1全局导航钩子

全局前置钩子：beforeEach(（to,from,next)=>{})

to,:router 代表进入的目标路由

from: router 代表从哪个路由来

next ：离开本路由必须调用的方法，执行需要使用next的参数

全局后置钩子afterEach(（to,from)=>{})

没有next

2.单个路由专享

beforeEnter

3、组件级导航

beforeRouterEnter 、 beforeRouterUpdate、 beforeRouterLeave

导航过程

1. 导航被触发
2. 在失活的组件里调用离开守卫
3. 调用全局的beforeEach守卫
4. 在重用的组件里调用beforeRouterUpdate
5. 在路由配置中调用beforeEnter
6. 解析异步路由组件
7. 在被激活的组件中调用beforeRouterEnter
8. 调用全局的beforeResolve 守卫
9. 导航被确认
10. 调用全局afterEach钩子
11. 触发dom更新
12. 在创建好的实例调用beforeRouterEnter守卫中传给next回调函数

十一、vue.js和angular 以及react的区别

1.与angularJS的区别

相同点：

1. 都支持指令： 内置指令和自定义指令
2. 都支持过滤器： 内置过滤器和自定义过滤器
3. 都支持双向数据绑定
4. 都不支持低端浏览器

不同点：

1. AngularJS的学习成本高，比如增加了Dependency ,Injection 的特性，而 Vue.js本身提供的API都比较直观，简单
2. 在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢 vue是基于依赖对数据追踪的观察并且只用异步队列更新，所有的数据都是独立触发的 。 对于庞大的应用来说，这个优化差异还是比较明显的

2.与React的区别

相同点：

1. react采用特殊的JSX语法，Vue在组件开发中也推崇编写vue特殊文件格式，对文件内容有一定的约定，要编译后使用
2. 中心思想相同，一切都是组件，组件实例之间可以嵌套
3. 都提供合理的钩子函数，可以让开发者定制化地去处理请求
4. 都不内置列数AJAX Route 等功能核心包，而是以插件的方式加载
5. 在组件开发中都支持mixins的特性

不同点：

react 依赖Virtual DOM 而vue使用的是dom模板，react采用的VirtualDOM 会对渲染出来的结果做脏检查，vue在模板中提供了指令，过滤器，非常方便的操作DOM

十二、关于vue 的 render 谈谈你的理解

Vue一般使用template来创建html，然而我们也会用到原生js来创建dom，这时候我们就需要render函数，render函数会返回一个createElement 组件中的子元素存储在组件实例中$solts.default 中在createElement中包含的信息会告诉vue页面怎么渲染节点 这些节点也就是虚拟DOM