Vue高频面试题（一）

1、说说你对 SPA 单页面的理解，它的优缺点分别是什么？

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。

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

缺点：
初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

2、v-show 与 v-if 有什么区别？

1、v-show的元素开始修改会被渲染并留在DOM中。。
2.v-if是惰性的，如果在初始渲染的条件为假，则什么都不做，直到条件第一次为真时，才会开始渲染。
3.v-if有更高的切换消耗；v-show有更高的初始渲染消耗
4.v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐
5.使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换
6.相同点 v-show 都可以动态控制着dom元素的显示隐藏
7.不同点：v-if 的显示隐藏是将DOM元素整个添加或删除，v-show 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的

3、Class 与 Style 如何动态绑定？

一、绑定 HTML Class
1、对象语法 绑定一个返回对象的计算属性
2、数组语法 三元表达式
3、对象数组的嵌套

二、绑定行内样式
1、行内对象
2、动态加载
3、数组语法
v-bind:style的数组语法可以将多个样式对象应用到同一个元素上
4、vue会自动添加前缀，来兼容c3新特性
s
三、绑定内联样式

4、怎样理解 Vue 的单向数据流？

单向数据流 :
数据从父级组件传递给子组件，只能单向绑定。
子组件内部不能直接修改从父级传递过来的数据。
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

应用场景： 注册组件
将父组件的数据传递进来给子组件 props 接收
将传递进来的数据通过初始值保存起来(通过 this. 直接获取)

5、computed 和 watch 的区别和运用的场景？

computed计算属性 ：
1、computed内部的函数在调用时不加()。
2.computed是当依赖值改变才会重新计算
3、computed中的函数必须用return返回。
4、在computed中不要对data中的属性进行赋值操作。如果对data中的属性进行赋值操作了，就是data中的属性发生改变，从而触发computed中的函数，形成死循环了。
5、当computed中的函数所依赖的属性没有发生改变，那么调用当前函数的时候会从缓存中读取。

尽量不用watch事件，尽量使用change事件。
因为watch的话会浪费性能，每一点的变动都会触发watch,所以分类别来使用监听

使用场景：购物车商品结算

watch监听属性：
1.一个值的改变需要另一个值得改变而改变
2、watch中的函数有两个参数，前者是newVal，后者是oldVal。
3、watch只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变

使用场景：搜索框

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

由于javasquipt的限制，Vue不能监测到一下变化：

1.当你利用索引设置一个数组项时
解决方法：
通过索引来修改数组，使其能成为响应式，解决直接使用赋值不能响应的问题

2.修改数组长度时
解决方法：
加括号 vm.items.splice(newLength) newLength 就是指的你更新的长度

7.Vue 的父组件和子组件生命周期钩子函数执行顺序？

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

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

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

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

销毁过程：
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

8、在哪个生命周期内调用异步请求？

1.一般来说，可以在，created，mounted中都可以发送数据请求，但是，大部分时候，会在created发送请求

2.在 created、beforeMount、mounted 这三个钩子函数中进行调用。
因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。但是最常用的是在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求

3.有两个优点：
第一点：能更快获取到服务端数据，减少页面 loading 时间；
第二点：放在 created 中有助于一致性，因为ssr 不支持 beforeMount 、mounted 钩子函数。

Created的使用场景：如果页面首次渲染的就来自后端数据。因为，此时data已经挂载到vue实例了。

9、在什么阶段才能访问操作DOM？

在 mounted 中可以访问操作 DOM。 因为在钩子函数 mounted 被调用前，Vue 已经将编译好的模板挂载到页面上。

10、父组件可以监听到子组件的生命周期吗

可以。
有两种方法：

1.在父组件中定义一个事件，在子组件中用$emit去触发。
2.父组件引用子组件时，通过使用@hook:前缀父组件可以监听子组件的生命周期钩子，并指定回调函数。 其它的生命周期事件，例如：created，updated 等都可以监听。

11.谈谈你对 keep-alive 的了解？

1.包裹不活动的组件实例，而不是销毁他们，不会渲染在DOM元素中，也不会出现在父组件中。

2.有两个属性：
提供 include 和 exclude 属性
include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存

3.对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

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

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