关于vue的常见面试题

1.谈谈你对vue的认识

vue概念：是一个构建用户界面的渐进式框架，典型的MVVM框架。

注：模型（Model）只是普通的JavaScript对象，修改它则视图（View）会自动更新。这种设计让状态管理变得非常简单而直观。

vue作用：响应式的数据绑定和组合的视图组件

vue原理：数据双向绑定     模板编译和虚拟dom

Vue实现数据双向绑定的效果，需要三大模块：

1. Observer：能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2. Compile：对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3. Watcher：作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图。

• Observer的核心是通过Obeject.defineProperty()来监听数据的变动，这个函数内部可以定义setter和getter，每当数据发生变化，就会触发setter。这时候Observer就要通知订阅者，订阅者就是Watcher。

• Watcher订阅者作为Observer和Compile之间通信的桥梁，主要做的事情是：

1. 在自身实例化时往属性订阅器(dep)里面添加自己
2. 自身必须有一个update()方法
3. 待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调

• Compile主要做的事情是解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。

vue生命周期：vue 实例从创建到销毁的过程，就是Vue 的生命周期，即开始创建、初始化数据、编译模板、挂载Dom→渲染、                            更新→渲染、卸载等一系列过程。总共分为8个阶段：

• beforeCreate—-创建前 组件实例更被创建，组件属性计算之前，数据对象data都为undefined，未初始化。
• created—-创建后 组件实例创建完成，属性已经绑定，数据对象data已存在，但dom未生成，$el未存在
• beforeMount—挂载前 vue实例的$el和data都已初始化，挂载之前为虚拟的dom节点，data.message未替换
• mounted—–挂载后 vue实例挂载完成，data.message成功渲染。
• beforeUpdate—-更新前 当data变化时，会触发beforeUpdate方法
• updated—-更新后 当data变化时，会触发updated方法
• beforeDestory—销毁前 组件销毁之前调用
• destoryed—销毁后 组件销毁之后调用，对data的改变不会再触发周期函数，vue实例已解除事件监听和dom绑定，但dom结构依然存在 。

vue的优点：低耦合、可重用、性独立开发、可测试 。

vue和其他框架的对比：

前期借鉴了angular和react的一些优秀思想，比如虚拟dom、指令操作等

more

2.MVVM框架是什么？他和其他框架（jQuery）有什么区别，使用场景

MVVM框架：一个model+view+view-model的框架，model 是数据模型，view是视图，view-model连接数据和视图。

视图的输入框绑定了v-model, 用户输入后会改变data；Model改变也会同步视图更新相关的依赖, 双向绑定就是vm起了作用。

区别：vue数据驱动，通过数据来显示视图层而不是节点操作。

使用场景：数据操作比较多的场景更加方便快捷。

3.MVC框架和MVVM框架的区别

mvc和mvvm都是一种设计思想，主要是mvc中Controller演变成mvvm中的viewModel。

mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验，以及当 Model 频繁发生变化，开发者需要主动更新到View，这些问题。

4.vuex是什么，它的原理

vuex：状态管理器，实现组件间的数据共享。

原理：一个应用可以看作是由View, Actions,State三部分组成,数据的流动也是从View => Actions => State =>View 以此达到数据的单向流动。但是项目较大的, 组件嵌套过多的时候, 多组件共享同一个State会在数据传递时出现很多问题.Vuex就是为了解决这些问题而产生的.Vuex可以被看作项目中所有组件的数据中心,我们将所有组件中共享的State抽离出来,任何组件都可以访问和操作我们的数据中心。

一个实例化的Vuex.Store由state, mutations和actions三个属性组成:

• state中保存着共有数据
• 改变state中的数据有且只有通过mutations中的方法,且mutations中的方法必须是同步的
• 如果要写异步的方法,需要些在actions中, 并通过commit到mutations中进行state中数据的更改。

注：官网https://vuex.vuejs.org/

5.列举vue的指令及用法

v-for：遍历循环

v-html、v-text：文本信息

v-model：实现双向绑定

v-if、v-show:  判断是否隐藏显示

v-bind:class  绑定属性

@click    绑定事件

6.vue里面的自定义指令是什么，其中的钩子函数有哪些？

vue.directive,可以写在组件内部，也可以写在外部作为全局的使用。

它的钩子有bind，inserted，update等

7.vue组件之间如何传值通信

父到子：

•  子组件在props中创建一个属性，用来接收父组件传过来的值；
• 在父组件中注册子组件；       
• 在子组件标签中添加子组件props中创建的属性；   
• 把需要传给子组件的值赋给该属性 

子到父：

• 子组件中需要以某种方式（如点击事件）的方法来触发一个自定义的事件；
• 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应事件的方法；
• 在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。 

平行组件：

• $emit推送，$on接收

8.vue组件之间如何跳转

  路由配置好之后，可以使用下面三总方式进行组件的跳转展示

 ① 直接修改地址栏的路由路径

 ② 用router-link标签的to属性配置path即可

 ③通过js编程方式，在事件里面调用this.$router.push(“/home”)实现

9.vue中跨域问题如何解决

  ① 后台更改header：

• header(‘Access-Control-Allow-Origin:*’);    //允许所有来源访问   
• header(‘Access-Control-Allow-Method:POST,GET’); //允许访问的方式 

  ② 使用JQuery提供的jsonp :  发起ajax请求，设置dataType为jsonp

  ③ 使用http-proxy-middleware 代理解决

10.es6和es5对比，有何改变

     es6常用语法：

•  变量声明const和let
•  import导入模块、export导出模块
•  class类 
•  promise
•  箭头函数
•  模板字符串