vue项目面试中怎样去说（vue常见面试）
本篇文章给大家谈谈vue项目面试中怎样去说，以及vue常见面试对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
三十七个常见Vue面试题
映射关系简化，隐藏controller MVVM在MVC的基础上，把控制层隐藏掉了。
Vue不是一个MVVM框架，它是一个视图层框架。
ViewModal是一个桥梁，将数据和视图进行关联。
数组和对象类型的值变化的时候，通过defineReactive方法，借助了defineProperty，将所有的属性添加了getter和setter。用户在取值和设置的时候，可以进行一些操作。
缺陷：只能监控最外层的属性，如果是多层的，就要进行全量递归。
get里面会做依赖搜集（dep[watcher, watcher]） set里面会做数据更新（notify，通知watcher更新）
vue中对数组没有进行defineProperty，而是重写了数组的7个方法。 分别是：
因为这些方法都会改变数组本身。
数组里的索引和长度是无法被监控的。
Vue初始化的时候，挂载之后会进行编译。生成renderFunction。
当取值的时候，就会搜集watcher，放到dep里面。
当用户更改值的时候，就会通知watcher，去更新视图。
这个问题的核心是如何将template转换成render函数。
Vue的生命周期钩子是回调函数，当创建组件实例的过程中会调用相应的钩子方法。 内部会对钩子进行处理，将钩子函数维护成数组的形式。
Vue的mixin的作用就是抽离公共的业务逻辑，原理类似对象的继承，当组件初始化的时候，会调用mergeOptions方法进行合并，采用策略模式针对不同的属性进行合并。 如果混入的数据和本身组件的数据有冲突，采用本身的数据为准。
缺点：命名冲突、数据来源不清晰
new Vue是一个单例模式，不会有任何的合并操作，所以根实例不必校验data一定是一个函数。 组件的data必须是一个函数，是为了防止两个组件的数据产生污染。 如果都是对象的话，会在合并的时候，指向同一个地址。 而如果是函数的时候，合并的时候调用，会产生两个空间。
nextTick是一个微任务。
Vue的diff算法是平级比较，不考虑跨级比较的情况。内部采用深度递归的方式+双指针方式比较
所以采用watcher + Diff算法来检测差异。
产生组件虚拟节点 - 创建组件的真实节点 - 插入到页面
属性更新会触发patchVnode方法，组件的虚拟节点会调用prepatch钩子，然后更新属性，更新组件。
先渲染异步占位符节点 - 组件加载完毕后调用forceUpdate强制更新。
正常的一个组件是一个类继承了Vue。
函数式组件，就是一个普通的函数。
主要作用是为了实现批量传递数据。
provide/inject更适合应用在插件中，主要实现跨级数据传递。
首先，v-for和v-if 不能在同一个标签中使用。
先处理v-for，再处理v-if。
如果同时遇到的时候，应该考虑先用计算属性处理数据，在进行v-for，可以减少循环次数。
在组件上用的v-model，是model和callback
在普通元素上用v-model，会生成指令，还可能因为不同的元素：
指令在什么时候会调用？
源码：
普通插槽是渲染后做替换的工作。父组件渲染完毕后，替换子组件的内容。
在模板编译的时候，处理组件中的子节点和slot标签
在创建元素的时候，用_t()方法方法来替换_v()的内容。
作用域插槽可以拿到子组件里面的属性。在子组件中传入属性然后渲染。
作用域插槽的编译结果：
Vue.use是用来使用插件的。我们可以在插件中扩展全局组件、指令、原型方法等。 会调用install方法将Vue的构建函数默认传入，在插件中可以使用vue，无需依赖vue库
使用有两个场景，一个是动态组件，一个是router-view
这里创建了一个白名单和一个黑名单。表明哪些需要需要做缓存，哪些不需要做缓存。以及最大的缓存个数。
缓存的是组件的实例，用key和value对象保存。
加载的时候，监控include和exclude。
如果不需要缓存，直接返回虚拟节点。
如果需要缓存，就用组件的id和标签名，生成一个key，把当前vnode的instance作为value，存成一个对象。这就是缓存列表
如果设置了最大的缓存数，就删除第0个缓存。新增最新的缓存。
并且给组件添加一个keepAlive变量为true，当组件初始化的时候，不再初始化。
钩子函数有三种：
Vuex是专门为vue提供的全局状态管理系统，用于多个组件中的数据共享、数据缓存。
问题：无法持久化。
Vue面试题集锦
原理：在创建Vue实例时，Vue会遍历data选项的属性，利用Object.defineProperty()为属性添加getter和setter对数据的读取进行劫持（getter用来依赖手机，setter用来派发更新），并且在内部追踪依赖，在属性被访问和修改时通知变化。每个组件实例会有相应的watcher实例，会在组件渲染过程中记录依赖的所有数据属性，之后依赖项被改动时，setter方法会通知依赖与此data的watcher实例重新计算（派发更新），从而使它关联的组件重新渲染。
一句话总结：vue.js采用数据劫持结合发布-订阅模式，通过Object.defineProperty()来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发响应的监听回调。
我的理解：在new Vue的时候，在Observer中通过Object.defineProperty()达到数据劫持，代理所有数据的getter和setter属性，在每次触发setter的时候，都会通过Dep来通知Watcher，Watcher作为Observer数据监听器与Compile模板解析器之间的桥梁，当Observer监听到数据发生改变的时候，通过Updater来通知Compile更新视图。而Compile通过Watcher订阅对应数据，绑定更新函数，通过Dep来添加订阅者，达到双向绑定。
Vue实例从创建到销毁的全过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM-渲染、更新-渲染、卸载等一系列过程。
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
它可以分为8个阶段：创建前/后、载入前/后、更新前/后、销毁前/后。
第一次页面加载时会触发beforeCreate、created、beforeMounted、mounted
DOM渲染在mounted中就已经完成。
1、beforeCreate：可以在这加个loading事件，在加载实例时触发；
2、created：初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用；
3、mounted：挂载元素，获取DOM节点；
4、updated：如果对数据统一处理，在这里写上相应函数；
5、beforeDestroy：可以放一个确认停止事件的确认框；
6、nextTick：更新数据后立即操作DOM。
1、对象方法v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
2、数组方法v-bind:class="[class1, class2]"
3、行内v-bind:style="{color: color, fontSize: fontSize+'px'}"
1、router-link标签会渲染为标签，咋填template中的跳转都是这种；
2、另一种是编辑式导航，也就是通过js跳转比如router.push('/home')
M- model ，model 表示数据模型，也可以在model中定义数据修改和操作的业务逻辑
V- view，view表示视图，它负责将数据模型转换为视图展示出来
VM- viewmodel，viewmodel是一个同步view和model的对象，连接view和model，用于监听数据模型的改变和控制视图行为
computed：computed是计算属性，也就是计算值，更多用于计算值的场景。它具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算。
watch：watch更多的是观察作用，类似于某些数据的监听回调，用于观察props、$emit或者本组件的值，当数据变化时用来执行回调进行后续操作。它不具有缓存性，页面重新渲染时值不会变化也不会执行。
在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的，但是也得慎用，样式不易改变。
解决方法：
① 使用混合型的css样式，混合使用全局样式和私有样式。
② 深度作用选择器：如果你希望scoped样式中的一个选择器能够作用的更深，可以使用操作符。如：style scoped.a.b{/ ... /}/style
一个元素绑定多个事件的写法有两种：
1、修饰符的使用
2、在method方法里分别写两个事件
Vue组件中的data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用，如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。
原理：JS执行是单线程的，它是基于事件循环的。所有同步任务都在主线程上执行，形成一个执行栈。主线程之外，还存在一个任务队列，只要异步任务有了运行结果，就在任务队列中放置一个事件。一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列，看看那些对应的异步任务，等结束等待状态，进入执行栈，开始执行。主线程不断重复上面的步骤。主执行的执行过程就是tick，所有的异步结果都是通过任务队列来调度的。任务分为两大类：宏任务和微任务，宏任务包括：setTimeOut等，微任务包括promise.then。
Vue用异步队列的方式来控制DOM更新和nextTick回调先后执行。在下次DOM更新循环结束之后执行延迟回调，nextTick主要使用了宏任务和微任务，nextTick把要执行的任务推入一个队列中，在下一个tick同步执行队列的所有任务，它是异步任务中的微任务。如果我们在更新了一个响应式数据后，需要同步拿到这个渲染后的DOM结果，就使用nextTick方法，异步拿这个结果。
使用方式：
① this. nextTick.then(cb); 异步
父组件调用子组件的方法
父组件： this.$refs.yeluosen.childMethod()
子组件向父组件传值并调用方法： $emit
组件之间： bus==$emit+$on
1、第一种方法是直接在子组件中通过this. emit向父组件触发一个事件，父组件监听这个事件就行了。
3、第三种都可以实现子组件调用父组件的方法。
keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
原来的组件实例会被复用。这也意味着组件的生命周期钩子不会再被调用，你可以简单的监控watch $route对象：
is用来动态切换组件，DOM模板解析
全局的：前置守卫、后置钩子（beforeEach、afterEach）beforeResolve
单个路由独享的：beforeEnter
组件级的：beforeRouteEnter（不能获取组件实例this）、beforeRouteUpdate、beforeRouteLeave
这是因为在执行路有钩子函数beforeRouteEnter的时候，组件还没有被创建出来，先执行beforeRouteEnter，再执行周期钩子函数beforeCreate，可以通过next获取组件的实例对象，如：next((vm) = {})，参数vm就是组件的实例化对象。
缺点：
优点：
计算属性是需要复杂的逻辑，可以用方法method代替。
vue-cli提供的脚手架模板有browserify和webpack。
① 是什么？
Vue框架中的状态管理，分别是State、Getter、Mutation、Action、Module。
② 怎么使用？
新建一个目录store。
③ 功能场景？
单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车等。
④ vuex的状态：
a. State特性：vuex就是一个仓库，仓库里面放了很多对象，其中state就是数据源存放地，对应于一般Vue对象里面的data。state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。它通过mapState把全局的state和getters映射到当前组件的computed计算属性中。
b. Getter特性：getters可以对State进行计算操作，它就是store的计算属性。虽然在组件内可以做计算属性，但是getters可以在多组件之间复用。如果一个状态只在一个组件内使用，可以不用getters。
c. Mutation特性：改变store中state状态的唯一方法就是提交mutation，每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那我们需要执行一个相应的调用方法：store.commit。
d. Action特性：类似于mutation，不同点在于：Action提交的是mutation，而不是直接变更状态。Action可以包含任意异步操作，Action函数接受一个与store实例具有相同方法和属性的context对象，因此你可以调用context.commit提交一个mutation。或者通过context.state和context.getters来获取state和getters。Action通过store.dispatch方法触发：store.dispatch('increment')。
e. Module特性：Module其实只是解决了当state中很复杂臃肿的时候，module可以将store分解为模块，每个模块中拥有自己的state、mutation、action和getter。
① 创建组件页面eg Toast.vue
② 用Vue.extend() 扩展一个组件构造器，再通过实例化组件构造器，就可以创造出可复用的组件。
③ 将toast组件挂载到新创建的div上；
④ 将toast组件的dom添加到body里；
⑤ 修改优化达到动态控制页面显示文字跟显示时间；
修饰符分为：一般修饰符、事件修饰符、按键、系统
① 一般修饰符：
② 事件修饰符
③ 按键修饰符
④ 系统修饰符（可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。）
Vue的核心的功能，是一个视图模板引擎，但这不是说Vue就不能成为一个框架。在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。可以看到，所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念
在我看来，渐进式代表的含义是：主张最少。视图模板引擎每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。
比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：
必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。
Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。
渐进式的含义，我的理解是：主张最少，没有多做职责之外的事。
投简历是人家问vue是否熟练怎么回
根据自己的真实水平回答，不要不懂装懂，容易留下不好的印象。
根据自己的实际水平,简要介绍计算机等级证书,和专业证书。如果真的熟练就回答是。然后简单的交流一下一些相关内容。如果不熟练，就如实告知，以免不懂装懂，留下不好印象落选。
史上最全前端vue面试题！推荐收藏
1.为什么会形成跨域？
不是一个源的文件操作另一个源的文件就会形成跨域。当请求端的协议、域名、端口号和服务器的协议、域名、端口号有一个不一致就会发生跨域。
解决方法：安装插件
Pip install django-cors-headers
2.vuex的工作流程？
① 在vue组件里面，通过dispatch来出发actions提交修改数据的操作。
② 然后再通过actions的commit来出发mutations来修改数据。
③ mutations接收到commit的请求，就会自动通过Mutate来修改state（数据中心里面的数据状态）里面的数据。
④ 最后由store触发每一个调用它的组件更新。
3.vuex是什么？怎么使用？
vuex是一个专为vue.js应用程序开发的状态管理模式。使用:store,getters,mutations,actions,modules详细使用写法请见：
4.vuex中的数据在页面刷新后数据消失怎么解决？
使用sessionStorage或localStorage存储数据;也可以引入vuex-persist插件
5.在vue中，如何阻止事件冒泡和默认行为？
在绑定事件时，在指令后边加上修饰符.stop来阻止冒泡，.prevent来阻止默认行为
6.深拷贝与浅拷贝？
假设B复制A，修改A的时候，看B是否变化：B变了是浅拷贝（修改堆内存中的同一个值），没变是深拷贝（修改堆内存中不同的值）。浅拷贝只是增加了一个指针指向已存在的内存地址，深拷贝是增加了一个指针并申请了一个新的内存，使这个增加的指针指向这个新的内存。深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。
7.vue的生命周期？
beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyedactived deactived （keep-alive）组件是否激活调用
8. keep-alive: 组件缓存
router.js中:
meta: {keepAlive:true} // 需要被缓存
钩子执行顺序：created - mounted - actived
include表示需要缓存的页面；exclude表示不需要缓存的页面。如果两个同时设置，exclude优先级更 改，则组件不会被缓存。
应用场景： 用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回 该列表页，我们希望列表页可以保留用户的筛选状态。
9.vue传值方式？
props $emit() $on() $parent $children $listener $attr
10. $on 兄弟组件传值
$emit 分发
$on 监听
$off 取消监听
$once 一次性监听一个事件
在js文件中定义一个中央事件总线Bus，并暴露出来
具体的实现方式：
使用Bus的时候在接收Bus的组件的beforeDestroy函数中销毁Bus，否则会一直叠加调用这个方法。
应用场景：“退出登录” - ①点击退出登录；②修改密码后自动退出登录
11.组件跨级传值
$attrs a-b-c
$listeners 监听
12.vue事件修饰符有哪些？
.stop .prevent .self .once .passive .sync
13.箭头函数中的this？
不具有this绑定，但函数体可以使用this，这个this指向的是箭头函数当前所处的词法环境中的this对象。
15.为什么vue组件中data必须是一个函数？
如果不是函数的话，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了，当他是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，就不会互相影响。
16.v-if 和 v-show区别？
v-if 是对标签的创建与销毁， v-show 则仅在初始化时加载一次，v-if 开销相对来说比v-show 大；
v-if 是惰性的；v-show 做的仅是简单的css切换。
17.v-text 与 v-html区别？
v-text 用于普通文本，不能解析html；
v-html 反之。
18.v-for key的作用？
使用v-for更新渲染过的数据，它默认用“就地复用”策略。如果数据项的顺序改变，vue将不是移动DOM元素来匹配数据项的改变，而是简单地复用此处每个元素，并确保在特定索引下显示已被渲染过的每个元素。key属性类型只能是string或number。
key的特殊属性主要用在虚拟DOM算法，在新旧node对比时辨识VNods。如不使用key，vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法，它会基于key的变化重新排列元素顺序。
19.Scss是什么？在vue-cli中安装步骤？有哪几大特性？
npm 下载loader （sass-loader,css-loader,node-sass）,在webpack中配置extends属性（加.scss拓展） Vscode中可在扩展中下载;
特性：可以用变量，可以用混合器，可以嵌套等。
20.vue获取dom？
ref
21.vue初始化页面闪动问题？
webpack、vue-router
v-cloak css:[v-cloak]:display:none
22.什么是vue-router？
vue router 是官方路由管理器。
主要功能：路由嵌套，模块化 基于组件路由配置，路由参数、查询、通配符，细粒度导航控制，自定义的滚动条行为等。
23.vue路由传参，接收？
传： this.$router.push({path:'', query(params):{}})
接：this.$router.query.xxx
24.防抖和节流？
节流是一定时间内执行一次函数，多用在scroll事件上；
防抖是在一定时间内执行最后一次的函数，多用在input输入操作，表单提交等。
25.如何让scss只在当前组件中起作用？
vue项目面试中怎样去说的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue常见面试、vue项目面试中怎样去说的信息别忘了在本站进行查找喔。
