前端面试题梳理3（vue）

1，说说对SPA单页面的理解，以及优缺点分别是什么

SPA仅在web页面初始化时加载相应的 HTML JS和css。一单页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转；而是利用路由机制实现html内容的变化，ui与用户的交互，避免页面的重新加载

优点

• 用户体验好，快，内容改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
• 单页面相对对服务器的压力小
• 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理

缺点

• 初次加载耗时多： 为实现单页面web应用功能以及展示效果，需要在加载页面的时候姜js css统一加载 部分页面按需加载
• 不利于seo： 因为所有的内容都在一个页面中动态替换显示

2，v-show与v-if的区别

• v-if：真正的条件渲染，因为他会确保在切换过程中条件块内的事件监听和子组件适当的被销毁和重建，也是惰性的，如果初始化渲染是条件为假，则什么也不做直到第一次为真，才会开始渲染条件块
• v-show：不管条件是什么，元素都会正常的被渲染，只是简单的css的dispaly属性进行切换；所以v-if一般用户不需要频繁切换的场景，v-show则适用于需要频繁操作切换条件

3，class与style如何动态绑定

class可以通过对象语法和数组语法进行动态绑：

• 对象语法： ：class=“{active:isActive,'text-danger':hasError}”

       data: {isActive: true,hasError: false}

• 数组语法：  ：calss=“[isActive?activeCalss:'',errClass]”

       data: {activeClass: 'active',errorClass: 'text-danger'}

style也可以通过对象语法和数组语法进行动态绑定

• 对象语法： ：style="{color:activeColor,fontSize:fontSize+'px'}"

       data: {activeColor: 'red',fontSize: 30}

• 数组语法：  ：style="[styleColor, styleSize]"

       data: {styleColor: {color: 'red'}, styleSize:{fontSize:'23px'}}

4，怎样理解vue的单向数据流

所有的prop都使得其父子prop之间形成了一个单向下行绑定：父级prop的更新会下流到子组件中，但是反过来不行。这样会防止从子组件意外改变父级组件的状态，从而导致你对应用的数据流向难以理解

每次父组件数据发生更新时 子组件中所有的prop都会刷新为最新的值，这就意味着你不应该在一个子组件内部改变prop。若果做了 控制台汇报出警告

子组件要想改变父组件的属性值，只能通过$emit派发一个自定义事件 父组件接收到后 由父组件进行修改

5，computed和watch区别

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

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

6，直接给一个数组项赋值，vue能检测到变化吗

不能检测到以下数组项的变动：

当你利用索引直接设置一个数组项时 vm.items[indexOfItem] = newValue

当你修改数组的长度时 vm.items.length = newLength

如何解决呢 vue提供了

• vue.set ($set)

         Vue.set(vm.items, indexOfItem, newValue)

         vm.$set(vm.items, indexOfItem, newValue)

• Array.prototype.splice

         vm.items.splice(indexOfItem, 1, newValue)

         vm.items.splice(newLength)

7，谈谈对vue生命周期的理解

beforeCreate:组件实例创建之初，组价属性生效之前

created:组件实例已经创建完成 属性也绑定 但是真是的dom还没有生成 $el还不可用

beforeMount:在挂载之前被调用 相关render函数首次被调用

mounted：el被新创建的vm.$el替换 并挂载到实例上

beforeUpdate：组件更新之前调用 发生在虚拟dom打补丁之前

update：组件数据更新之后

activited:keep-alive专属 组件被激活时调用

deactivated:keep-alive专属 组件被销毁调用

beforeDestory:组件销毁之前

destoryed:组件销毁后

8，vue中父组件和子组件生命周期钩子函数执行顺序

加载渲染过程：父beforeCreate->父created-父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子组件更新过程：父beforeUpdate->子beforeUpdate->子updated->父updated

销毁过程：父beforeDestory->子beforeDestory->子destoryed->父destoryed

9，在哪个生命周期内调用异步请求？

可以在钩子函数 created beforeMount,mounted中进行调用，因为这三个钩子函数中 data已经创建，可以将服务端返回的数据进行赋值，但是本人推荐在created钩子中调用异步请求，因为在created钩子函数中调用异步请求有以下优点：

• 能够快速获取服务端数据 减少页面loadIng时间
• ssr不支持beforeMount，mounted钩子函数 所以在created中有助于一致性

10，在什么阶段才能访问到dom

在钩子函数mounted调用前，vue已经将编译好的模板挂载到页面上，所以在mounted中可以访问到dom。

11，父组件可以监听子组件的生命周期吗

比如父组件需要监听子组件的mounted并做一些处理

// Parent.vue

<Child @mounted="doSomething"/>

// Child.vue

mounted{

this.$emit("mounted");

}

以上需要手动通过 $emit 触发父组件的事件，更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可，如下所示：

// Parent.vue

<Child @hook:mounted="doSomething"></Child>

doSomething{

console.log('父组件监听到 mounted 钩子函数 ...');

},

// Child.vue

mounted{

console.log('子组件触发 mounted 钩子函数 ...');

},

// 以上输出顺序为：

// 子组件触发 mounted 钩子函数 ...

// 父组件监听到 mounted 钩子函数 ...

当然 @hook 方法不仅仅是可以监听 mounted，其它的生命周期事件，例如：created，updated 等都可以监听。

12，组件中data为什么是一个函数

因为组件是用来复用的 js里对象是引用关系，如果组建中data是一个对象，那么这样作用域没有隔离 子组件中的data属性值会互相影响，如果组件中data是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间data属性值不会相互影响；而new vue实例 是不会被复用的 因此不存在引用对象的问题。