vue面试题1

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

SPA仅在页面初始化时加载相应的html、css、js，页面一旦加载完成，spa不会因为用户的操作而进行二次页面重新加载或跳转，，而是利用路由机制实现html内容的变换

优点：

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

缺点：

• 初次加载时耗时长，实现页面web应用功能及显示效果，在加载页面时需要同时加载相应的css和js，部分页面按需加载

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

都是用来控制页面一个dom元素的现实与隐藏

• 实现方式：
  v-if是真正的条件渲染，因为它确保在条件块内事件监听器和子组件适当地被创建和销毁，也就是动态向dom树添加或删除dom元素来控制元素的显示和隐藏
  v-show是通过设置属性display值来控制元素的显示和隐藏
• 使用场景：
  v-if适用于切换频率较低的场景，v-show适用于切换频率较高的场景

3、class与style如何动态绑定

均可通过对象和数组语法进行绑定

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

Vue的单项数据流就是数据总是从父组件传到子组件，子组件没有权利修改父组件传过来的数据，即子组件从props中直接获取数据，只能请求父组件修改原始数据再传给子组件。父组件属性值的更新会下行流向子组件。

• 为什么子组件不能直接修改父组件传来的值？
  父组件的值可能不断发生变化。比如说父组件给子组件传来一个number值为1，子组件收到number值1，并直接修改为3，并去做些事情，但还未做时父组件它的值为5，也就说子组件刚把其变为3，但父组件把它变为5，则影响了子组件的使用。
• 如果真的要操作这个数据，则有两种办法：
  1、定义一个局部变量，并用prop值初始化它
  2、定义一个计算属性，处理prop并且返回

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

computed和watch都是vue框架中的用于监听数据变化的属性
区别：
computed：它是计算属性，依赖其他属性，必须有return返回，并且computed具有缓存，如果他依赖的属性值没有发生变化，则从缓存中读取，只有它所依赖的数据发生变化，下一次获取computed的值才会重新计算。
watch：它是侦听属性，侦听某些数据的变化执行相应的回调函数，函数有两个参数，前者是newVal，后者是oldVal。watch函数支持异步，而computed不能。
使用场景：
computed：一个属性受多个属性影响时就需要用到computed
watch：一个属性影响多个属性时就需要用到watch

6、谈谈你对Vue生命周期的理解

（1）生命周期是什么？
vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、模板编译、挂载dom->渲染更新->渲染卸载等一系列过程，我们称这是vue的生命周期。
（2）各个生命周期的作用

生命周期	描述
beforeCreate	执行时组件实例还未创建，数据代理还未开始，无法通过vm访问到data中的数据、methods中的方法
created	初始化数据监测、数据代理（通过vm访问到data中的数据、methods中的方法，但无法操作dom）
beforeMounted	已经生成虚拟dom
mouted	（真实dom挂在完毕）页面呈现出经过Vue编译的DOM，可获取访问数据和dom元素，一般在这开始进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作
beforeUpdate	更新之前，可用于获取更新前各种状态，此时数据是新的，页面是旧的
update	更新之后 ，所有状态都是最新的
beforeDestroyed	销毁前，可用于一些定时器或订阅的取消
destroyed	组件实例销毁

数据请求在created和mounted的区别
created是在组件实例创建完成的时候立刻调用，此时页面dom节点还未生成
mounted是在页面dom节点渲染完成后就立刻执行的
两者的触发时机是created比mounted要早
数据请求放在mounted中有可能导致页面闪动，因为此时dom结构已生成，但放在页面加载前完成则不会出现此情况
建议：放在created生命周期当中

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

• 加载渲染过程
  父beforeCreate->父created->父beforeMounte->子beforeCreate->子created->子beforeMounte->子mounted->父mounted
• 子组件更新过程
  父beforeUpdate->子beforeUpdate->子updated->父updated
• 父组件更新过程
  父beforeUpdate->父updated
• 销毁过程
  父beforedestroy->子beforedestroy->子destroyed->父destroyed
  总结：子的生命周期都会被先结束，父的才会结束。先由父到子，再从子到父

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

可以在钩子函数created，beforeMount，mounted中进行调用，因为在这三个钩子函数中，data已经创建，可以将服务端数据进行赋值。但推荐在created中调用异步请求，因为在created调用异步请求有以下两点有点：
①减少页面loading时间，能更快获取服务端数据
②有利于一致性，因为ssr（是应用程序在服务端显示页面而不在浏览器进行页面渲染的能力）不支持beforeMount，mounted钩子函数

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

因为组件是用来复用的。当data是函数时，每次函数执行完毕后都会返回一个新的对象，这样每个组件实例都可维护一个新的data，拥有自己的作用域。
如果data是对象，对象是引用数据类型，这样导致了所有组件实例都共用一个data，会产生数据污染。

10、v-model原理

在项目中使用v-model指令在表单input、textarea、select等元素上创建双向数据绑定，本质上是语法糖，负责监听用户输入事件以更新数据，v-model在内部为不同的元素使用不同的属性并抛出不同的事件：
text和textarea使用value属性和input事件
CheckBox和radio使用checked属性和change事件
select字段将value作为prop并将change作为事件