Vue面试总结

vue面试总结

1.什么是vue.js

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上
逐层应用。Vue 的核心库只关注视图层， 不仅易于上手，还便于与第三方库或既有项目整合。

2.vue指令有哪些？

1. v-cloak  解决插值表达式的闪烁问题  （需要添加css样式 [v-cloak]{display:none;}）l
2. v-text  渲染文本（包含标签）,将标签也当成字符串渲染
3. v-html  渲染文本（不包含标签）,会把标签进行解析，只标签的内容进行展示
4. v-show  控制元素的显示和隐藏  控制样式 display:none
5. v-if  控制元素的显示和隐藏  控制dom的移除 和 渲染
6. v-on 绑定事件  简写写法 @
7. v-bind 绑定属性 ， 使这个属性变为动态属性简写写法 ：

3.v-show 和 v-if 的作用和区别 ？

相同点：v-if和v-show都可以用来动态显示dom状态。
不同的是：
v-if是真正的条件渲染，因为他会确保在切换过程中条件块内的事件监听器和
子组件适当地被销毁和重建。
v-show的元素始终会被渲染并保留在dom中，v-show只是简单地切换元素的
css属性display：none；v-if是惰性的，v-show不管初始条件是什么，元素
总值是会被渲染，并且只是简单地基于css进行切换。
v-if有更高的切换消耗。v-show有更高的初始渲染消耗。

4.什么是MVVM

MVVM是双向数据绑定,vue本身实现了视图和数据的相互监听影响

m是model  数据层，存储数据
v是view  视图层  展示数据
vm:是视图模型 viewModel 数据和视图的监听层或调度者
 （当数据或者视图发生改变时，vm会监听到，同时会把相应的另外一层跟着改变或者重新渲染）
Data Bindings 相当于 把data数据绑定到视图  ，当model也就是数据发生改变时，视图也会更新
DOM Listeners DOM 监听，当DOM发生改变（点击事件 键盘事件 滚动事件）的时候，可以被监听，从而改变数据  

数据层改变：vm会帮我们重新渲染视图
视图层改变：vm会帮我们把数据重新改变，然后重现渲染页面

5.生命周期有哪些，以及作用？

创建阶段：
beforecreate：实例已经初始化，但不能获取DOM节点。(没有data，没有el)
created:实例已经创建，仍然不能获取DOM节点。(有data，没有el)
载入阶段：
beforemount：模板编译完成，但还没挂载到界面上。(有data，有el)
mounted：编译好的模板已挂载到页面中(数据和DOM都已经渲染出来)。
更新阶段：
beforeupdate：数据发生变化立即调用，此时data中数据是最新的，但页面上数据仍然是旧的(检测到数据更新时，但DOM更新前执行)。
updated：更新结束后执行，此时data中的值和页面上的值都是最新的。
销毁阶段：
beforedestroy：当要销毁vue实例时，在销毁之前执行。
destroy：在销毁vue实例时执行。

6.vuex 是什么？ 怎么使用？那些场景用过 ？

Vuex是为vue.js应用程序开发的状态管理模式。只要来读取的状态集中放在store中；改变状态的方		式就是提交mutations。这是个同步的实物；异步逻辑应该封装中action中。

怎么使用：在main.js引入store，注入。新建一个目录store，...export

应用场景：单页面应用，组件之间的状态，音乐播放，登录状态，加入购物车

7.keep-alive的作用是什么？ 使用它的目的是什么？

Keep-alive是vue内置的一个组件，可以使被包含的组件保留状态，
或者避免重新渲染

8.computed 和 watch 的区别？

computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，
下一次获取 computed 的值时才会重新计算 computed 的值；

watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进
行后续操作；

9.为什么在 Vue3.0 采用了 Proxy,抛弃Object.defineProperty？

Object.defineProperty 只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。Vue 2.
里,是通过 递归 + 遍历 data 对象来实现对数据的监控的,如果属性值也是对象那么需要深度遍历,显然
如果能劫持一个完整的对象是才是更好的选择。

Proxy 可以劫持整个对象,并返回一个新的对象。Proxy 不仅可以代理对象,还可以代理数组。还可以代理
动态增加的属性。

10.Vue 组件 data 为什么必须是函数 ?

因为组件是可以复用的,JS 里对象是引用关系,如果组件 data 是一个对象,那么子组件中的 data 属性
值会互相污染,产生副作用。
所以一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝。
new Vue 的实例是不会被复用的,因此不存在以上问题。

11.组件通信的方式

（1）props / $emit 适用 父子组件通信
这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。

（2）ref 与 $parent / $children 适用 父子组件通信
$ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组
件实例
$parent / $children：访问父 / 子实例

（3）EventBus （$emit / $on） 适用于 父子、隔代、兄弟组件通信
这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现
任何组件间的通信，包括父子、隔代、兄弟组件

（4）$attrs/$listeners 适用于 隔代组件通信
$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。当一
个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以
通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。
$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过
 v-on="$listeners" 传入内部组件

（5）provide / inject 适用于 隔代组件通信
祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。 provide / 
inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，
跨级组件间建立了一种主动提供与依赖注入的关系。

（6）Vuex 适用于 父子、隔代、兄弟组件通信
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）
。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

12.Vue 中的 key 有什么作用？

Vue 中 key 的作用是：key 是为 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以
更准确、更快速
更准确：因为带 key 就不是就地复用了，在 sameNode 函数 a.key === b.key 对比中可以避免就地复
用的情况。所以会更加准确。
更快速：利用 key 的唯一性生成 map 对象来获取对应节点，比遍历方式更快

13.ref的作用

1..获取dom元素this.$refs.box
2.获取子组件中的datathis.$refs.box.msg
3.调用子组件中的方法this.$refs.box.open()

14.vue-router 使用params与query传参有什么区别

vue-router 可以通过 params 与 query 进行传参
params 是路由的一部分,必须要有。query 是拼接在 url 后面的参数，没有也没关系
params 不设置的时候，刷新页面或者返回参数会丢，query 则不会有这个问题

15.什么是v-model的概念

1)v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件
类型自动选取正确的方法来更新元素。 v-model 本质上是语法糖。它负责监听用户的输入事件以更
新数据，并对一些极端场景进行一些特殊处理。

2)v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 
实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

3)一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复
选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的
冲突：

4)v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件

5)label 标签里面的for可以绑定input标签 ，点击label标签可以获取input的焦点