面试常问的vue面试题集锦（一）

面试题一、请你简述vue的生命周期钩子函数
beforeCreate 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。这里没有$el。beforeMount在挂载开始之前被调用：相关的render函数首次被调用。mountedel被新创建的vm.$el 替换，并挂载到实例上去之后调用该钩子。
beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
钩子函数中该干的事情：
created 实例已经创建完成，因为它是最早触发的原因可以进行一些数据，资源的请求。
mounted 实例已经挂载完成，可以进行一些DOM操作。
beforeUpdate 可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
updated 可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。 该钩子在服务器端渲染期间不被调用。
destroyed 可以执行一些优化操作,清空定时器，解除绑定事件。
面试题二、vue组件间通信常用方式
首先明确一点，组件化的好处：方便维护，易于扩展、减少DOM操作。
1、使用props传递参数（属性在组件标签上需要使用短横线命名法，在组件中声明需要采用驼峰命名法；通过带有校验，通过type指明外界传递过来的数据是什么类型，其中，对象和数组类型如果给出默认值时需要返回一个工厂函数）
2、子组件中使用$emit触发父组件中的方法，通过回调的方式讲修改的内容传递给父组件3、.sync的形式，触发的事件名update:(绑定.sync属性的名字)--属于固定写法<Son1:mny.sync="mny"></Son1><button@click="$emit(‘update:mny’,200)">更改
4、v-model，子组件触发的事件名称只能是input，接受到的属性名只能叫value
5、使用$parent、$children，可以获取到父组件或者子组件中的属性和方法。如果层级很深，就会出现$parent.$parent，可以封装一个$dispatch方法向上进行派发，或者封装一个$broadcast向下派发
6、$attrs、$listeners 使用$attrs属性，可以将属性继续向下传递；使用$listeners将方法继续向下传递
7、Provide和Inject，向任意子组件中可以注入父级数据，使用inject接收到值以后，会将数据挂载在当前实例上
8、使用ref 可以获取组件的实例，实例上的属性和方法随机可以获取到
9、使用eventBus进行跨组件通信
面试题三、简单聊一下Promise
1、可以解决并发问题（可以同步多个异步方法的执行结果）
2、可以解决多个回调嵌套的问题
3、Promise是一个类；
4、每次可以通过new的形式实例化一个实例时都需要传递一个执行器（执行器是立即执行的），执行器函数中有两个参数（resolve、reject，这两个都是方法）；
5、默认Promise有三个状态，pendding（请求中），如果调用了resolve方法，表示将请求中的状态转到成功态（fulfilled），如果调用了reject方法，表示将请求中的状态转到失败态（rejected）；
6、只有状态是pendding态时，才能更改状态；并且，状态一旦改变，不能更改；
7、每一个promise实例都有一个then方法，then方法里面包含成功的回调和失败的回调
Promise.all 处理多个异步的并发问题（全部完成才算完成，如果有一个失败，就失败）
Promise.race 有一个成功就成功，有一个失败就失败
面试题四、说一下vue中的slot插槽
使用customer组件时，如果没有包含一个元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。
直接使用slot元素时也称为默认插槽，如果组件中需要放置多个位置，可以给slot添加name属性，用来定义额外的插槽。
指的一提的是：Vue2.6.0起引入了v-slot，取代了slot和slot-scope这两个目前已被废弃但未被移除且仍在文档中的attribute。
子节点数据会存在组件实例中的$slots.default\ast \ast 面试题五、vue中的render函数\ast \ast Vue选项中的render函数若存在，则Vue构造函数不会从template选项或通过el选项指定的挂载元素中提取出的html模板编译渲染函数。该渲染函数接受一个createElement方法作为第一个参数用来创建VNode。虚拟DOM：不是一个实际的DOM元素。它更准确的名字可能是createNodeDescription，因为它所包含的信息会告诉Vue页面上需要渲染什么样的节点，包括及其子节点的描述信息。createElement参数：一个标签名称（必填项），一个与模板中属性对应的数据对象（可选），子级虚拟节点，由createElement构建而成。也可以使用字符串来生成”文本虚拟节点“（可选）\ast \ast 面试题六、简述一下vuex\ast \ast vuex是专为vue.js应用程序开发的状态管理模式。每一个Vuex应用的核心就是store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态(state)。1、Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。2、你不能直接改变store中的状态。改变store中的状态的唯一途径就是显式地提交(commit)mutation。3、Action提交的是mutation，而不是直接变更状态，Action可以包含任意异步操作4、getter就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有它的依赖值发生了变化才会被重新计算\ast \ast 面试题七、vue-router有关\ast \ast Vue-router是vue官方的路由管理器。提供了诸如：hash和history两种路由模式。使用该插件时，必须提供一个install方法，并且以Vue作为参数。提供了两个全局组件router-link、router-view。每个组件中都有$router和route 这两个属性，前者里面有很多api，后面里面有很多属性
如何实现一个vue-router。后面有代码示例，可以研读。
面试题八、vue中数组是如何监听变化的
vue源码中重写了关于操作数组的七个方法（push、pop、unshift、shift、reverse、sort、splice）
关键代码：
let oldProtoMehtods = Array.prototype;
let proto = Object.create(oldProtoMehtods);
[‘push’, ‘pop’, ‘shift’, ‘unshift’,‘reverse’,‘sort’,‘splice’ ].forEach(method => {
proto[method] = (…args) => {
oldProtoMehtods[method].call(this, …args)
}
})
另外，push，unshift，splice这三种添加的操作，还遍历了数组里面每一个元素，如果是对象时，则再次Object.defineProperty添加getter和setter一次。
面试题九、什么是库？什么是框架？什么是声明式？什么是命令式？
1、库是将代码合成一个产品，库是我们调用库里的方法实现自己的功能
2、框架则是为解决一类问题而开发的产品，框架是我们在指定的位置编写好代码，框架帮我们调用
框架和库的最本质的区别在于控制权：you call libs, frameworks call you
3、声明式就是利用数组的方法forEach（我们想要的是循环，内部帮我们去做）
4、自己写for循环就是命令式（命令其按照自己的方式得到结果）
面试题十、watch和computed的区别
watch和computed 内部调用的都是new Watcher
watch:
let vm = new Vue({
el: ‘#app’,
data: { name: ‘heima’ }
});
function initWatch(key,handler){
vm.$watch(key,handler);
}
initWatch(‘name’,function(newValue){
console.log(newValue)
});
vm.name = ‘care’; // 数据变化会执行对应的handler
Computed:
let dirty = true; // 内部有脏值检测系统
function initComputed(key,handler) {
Object.defineProperty(vm, key, {
get() {
if (dirty) { // 取值后会将dirty 变成false
value = handler();
dirty = false;
}
return value
}
})
}
initComputed(‘age’, function () {
console.log(‘取值一次’)
return vm.name
});
console.log(vm.age);
console.log(vm.age);
vm.name = ‘hello’; // 当依赖的值变化 会将dirty重新改成true,保证获取最新值
dirty = true;
console.log(vm.age);