vue相关面试题

vue.js 的两个核心是什么

数据驱动和组件化。

vue 的双向绑定的原理是什么

vue 数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。具体实现过程： 我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监 听器 Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者 Watcher 看是 否需要更新。对每个节点元素进行扫描和解析，将相关指令对应初始化 成一个订阅者 Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者 Watcher 接收 到相应属性的变化，就会执行对应的更新函数，更新视图。

vue 生命周期钩子函数有哪些，生命周期

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

请问 v-if 和 v-show 有什么区别

相同点： 两者都是在判断 DOM 节点是否要显示。
不同点：
a.实现方式： v-if 是根据后面数据的真假值判断直接从 Dom 树上删除或重建元素节点。 v-show 只是在修改元素的 css 样式，也就是 display 的属性值，元素始终在 Dom 树上。
b.编译过程：v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事 件监听和子组件； v-show 只是简单的基于 css 切换；
c.编译条件：v-if 是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真 时才开始局部编译； v-show 是在任何条件下（首次条件是否为真）都被编译，然后被缓存， 而且 DOM 元素始终被保留；
d.性能消耗：v-if 有更高的切换消耗，不适合做频繁的切换； v-show 有更高的初始渲染消 耗，适合做频繁的额切换。

数据响应(数据劫持)

数据响应的实现由两 部分构成: 观察者( watcher ) 和 依赖收集器( Dep )，其核心是 defineProperty 这个方法，它 可以 重写属性的 get 与 set 方法，从而完成监听数据的改变。 Observe (观察者)观察 props 与 state o 遍历 props 与 state，对每个属性创建独立的监听器( watcher ) 使用 defineProperty 重写每个属性的 get/set(defineReactive） oget: 收集依赖 Dep.depend() watcher.addDep() oset: 派发更新

Proxy 相比于 defineProperty 的优势

数组变化也能监听到，
不需要深度遍历监听

vuex

state: 状态中心
mutations: 更改状态
actions: 异步更改状态
getters: 获取状态
modules: 将 state 分成多个 modules，便于管理

vue 中 key 值的作用

使用 key 来给每个节点做一个唯一标识
key 的作用主要是为了高效的更新虚拟 DOM。另外 vue 中在使用相同标签名元素的过渡切换 时，也会使用到 key 属性，其目的也是为了让 vue 可以区分它们，
否则 vue 只会替换其内部属性而不会触发过渡效果。

Vue 组件中 data 为什么必须是函数

在 new Vue() 中，data 是可以作为一个对象进行操作的，然而在 component 中，data 只 能以函数的形式存在，不能直接将对象赋值给它。 当 data 选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的 data 不会相互影响，是独立的

至少 4 种 vue 当中的指令和它的用法

v-if(判断是否隐藏)
v-for(把数据遍历出来)
v-bind(绑定属性)
v-model(实现双向绑定)

vue 中子组件调用父组件的方法

第一种方法是直接在子组件中通过 this.$parent.event 来调用父组件的方法。
第二种方法是在子组件里用 $emit 向父组件触发一个事件，父组件监听这个事件就行了。 第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法。

vue 中父组件调用子组件的方法

父组件利用 ref 属性操作子组件方法。
父：
子：method: {
test() {
alert(1)
}
}
在父组件里调用 test 即 this.$refs.childMethod.test()

vue 页面级组件之间传值

1.使用 vue-router 通过跳转链接带参数传参。
2.使用本地缓存 localStorge。
3.使用 vuex 数据管理传值。

说说 vue 的动态组件。

多个组件通过同一个挂载点进行组件的切换，is 的值是哪个组件的名称，那么页面就会显示 哪个组件。 主要考查面试这 component 的 is 属性。

怎么定义 vue-router 的动态路由？怎么获取传过来的 值？

动态路由的创建，主要是使用 path 属性过程中，使用动态路径参数，以冒号开头，如下：
{ path: ‘/details/:id’
name: ‘Details’
components: Details }
访问 details 目录下的所有文件，如果 details/a，details/b 等，都会映射到 Details 组件上。 当匹配到/details 下的路由时，参数值会被设置到 this.$route.params 下，所以通过这个属性 可以获取动态参数 this. $route.params.id

vue-router 有哪几种路由守卫?

路由守卫为：
全局守卫：beforeEach
后置守卫：afterEach
全局解析守卫：beforeResolve
路由独享守卫：beforeEnter

$route 和 $router 的区别是什么？

$router 为 VueRouter 的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。 $route 是路由信息对象||跳转的路由对象，每一个路由都会有一个 route 对象，是一个局部 对象，包含 path,params,hash,query,fullPath,matched,name 等路由信息参数。

vue-router 响应路由参数的变化

(1)用 watch 检测
(2)组件内导航钩子函数

vue-router 传参

(1) 使用 Params: 只能使用 name，不能使用 path 参数不会显示在路径上 浏览器强制刷新参数会被清空
（2）使用 Query： 参数会显示在路径上，刷新不会被清空 name 可以使用 path 路径

vuex 有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module。

vuex 的 State 特性是？

一、Vuex 就是一个仓库，仓库里面放了很多对象。其中 state 就是数据源存放 地，对应于与一般 Vue 对象里面的 data
二、state 里面存放的数据是响应式的，Vue 组件从 store 中读取数据，若是 store 中的数据发生改变，依赖这个数据的组件也会发生更新 三、它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

vuex 的 Getter 特性是？

一、getters 可以对 State 进行计算操作，它就是 Store 的计算属性 二、 虽然在组件内也可以做计算属性，但是 getters 可以在多组件之间复用 三、 如果一个状态只在一个组件内使用，是可以不用 getters

组件之间的传值？

父组件与子组件传值
父组件通过标签上面定义传值
子组件通过 props 方法接受数据
子组件向父组件传递数据
子组件通过$emit 方法传递参数

vue 如何实现按需加载配合 webpack 设置

webpack 中提供了 require.ensure()来实现按需加载。以前引入路由是通过 import 这样的方 式引入，改为 const 定义的方式进行引入。 不进行页面按需加载引入方式：
import home from ‘…/…/common/home.vue’ 进行页面按需加载的引入方式： const home = r => require.ensure( [], () => r (require(’…/…/common/home.vue’)))

vue 路由的钩子函数

第一种：全局导航钩子 router.beforeEach(to,from,next)，
作用：跳转前进行判断拦截。
第二种：组件内的钩子； beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave
第三种：单独路由独享组件。 beforeEnter 每个钩子方法接收三个参数：
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参 数。

watch 和 computed 区别

区别一： watch 可以允许你没有返回值，对数据做一些处理， 但是 computed 必须要有返回值，他才能根据返回值，知道你函数依赖的是谁，当哪个数据 改变的时候，触发该方法。
区别二： computed 可以函数依赖很多值，但是 watch 只能依赖一个值。

自定义组件

全局注册
vue.directive(‘focus’,{
// 指令选项
})
//局部注册

 var app = new vue({
	el: '#app'，
	directives: {
		focus: {
			// 指令选项
		}
	}
})

自定义指令的选项是由几个钩子函数，每个都是可选的
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以定义一个 在绑定时 执行一次初始化的动作

update：被绑定元素所在的模版更新时调用，而不论绑定值是否变化，通过比较更新后的绑定值，可以忽略不必要的模版更新。

componentUpdated：被绑定元素所在模版完成一次更新周期时调用。

unbind：只调用一次，指令与元素解绑时调用。

兄弟组件传值

一. 子传父，父传子。
二.兄弟之间传递数据需要借助于事件车bus，通过事件车的方式传递数据
2、创建一个Vue的实例，让各个兄弟共用同一个事件机制。
3、传递数据方，通过一个事件触发bus. $ emit(方法名，传递的数据)。
4、接收数据方，通过mounted(){}触发bus.$ on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数。

递归组件

组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。 首先我们要知道，既然是递归组件，那么一定要有一个结束的条件，否则就会使用组件循环 引用，最终出现“max stack size exceeded”的错误，也就是栈溢出。那么，我们可以使用 v-if="false"作为递归组件的结束条件。当遇到 v-if 为 false 时，组件将不会再进行渲染。

在 Vue 中使用插件的步骤

在 Vue 中使用插件的步骤 采用 ES6 的 import … from …语法或 CommonJSd 的 require()方法引入插件 使 用 全 局 方 法 Vue.use( plugin ) 使 用 插 件 , 可 以 传 入 一 个 选 项 对 象 Vue.use(MyPlugin, { someOption: true })

介绍一下 promise

Promise 是一个对象，保存着未来将要结束的事件，她有两个特征:
1、对象的状态不受外部影响，Promise 对象代表一个异步操作，有三种状态， pending 进行中，fulfilled 已成功，rejected 已失败，只有异步操作的结果， 才可以决定当前是哪一种状态，任何其他操作都无法改变这个状态，这也就是 promise 名字的由来
2、一旦状态改变，就不会再变，promise 对象状态改变只有两种可能，从 pending 改到 fulfilled 或者从 pending 改到 rejected，只要这两种情况发生，状态就 凝固了，不会再改变，这个时候就称为定型 resolved, Promise 的基本用法， let promise1 = new Promise(function(resolve, reject){ setTimeout(function(){ resolve(‘ok’) },1000) })

vue 使用 slot （插槽）

组件需要组合使用，混用父组件的内容与子组件的模板，就会用到slot
作用域 ,编译的作用域

<child-component>
	{{message}}
</child-component>

message 就是slot 绑定的是父元素的数据 ，而不是组件 < chlid- component >
具名插槽 name
作用域 插槽使用可以复用的模板替换 已渲染元素
$slot 访问slot

vue 是否可以使用 jsx，怎么使用

可以用，webpack 里配置插件 Babel-plugin-transform-vue-js,