前端面试题解答（十五）

1、Vue实例中的data为什么是一个对象，组件中的data为什么是一个返回对象的函数？

Vue开发的应用一般都是单页面应用，通常情况下只有唯一一个Vue实例，所以实例中的数据可以在当前项目中共享，所以Vue实例中的data是一个对象
Vue组件的出现，是为了组件中的视图和数据可以复用，被复用的组件在不同的复用位置可能在操作不同的数据，所以每个组件的data数据必须互相独立，所以组件中的data是一个函数，函数内部返回一个只能让当前组件使用的对象数据

2、Vue实例中，数组通过push()/pop()函数的数据更新可以完成数据双向渲染，为什么通过[索引]的形式增加数据不会引起数据双向渲染？应该怎么解决？

Vue中的数据双向绑定底层是通过数据劫持实现的，数据劫持中如果对目标对象数据进行更新操作就会自动调用set()函数完成数据赋值和视图的更新；但是如果数据是查询操作的时候会自动调用get()函数完成数据获取；

数组通过push()/pop()函数是一种显式的数据更新操作，所以会自动完成数据同步渲染；通过[索引]的形式本质上获取数据的操作，所以不会调用set()函数完成数据同步渲染
如果必须通过索引的形式完成数据的更新并且要同步渲染，Vue2.x版本中可以通过Vue提供的vm.$set()或者Vue.set()函数完成数据双向同步

3、讲述Vue中都有哪些生命周期？

创建阶段
beforeCreate: 实例创建前
created:实例创建后
beforeMount: 虚拟DOM渲染前
mounted: 虚拟DOM渲染之后
运行阶段
beforeUpdate: 数据更新前
updated: 数据更新后
销毁阶段
beforeDestory: 实例销毁前
destroyed: 实例销毁后
缓存组件生命周期
activated：组件激活
deactivated：组件失活

4、v-for指令循环中为什么要使用key属性？

v-for指令主要用于循环展示户数，通过key属性可以将视图中的数据进行唯一性渲染，保障数据的正确渲染展示

5、简述组件的缓存如何实现？实现缓存的好处是什么？

组件的缓存通过进行包含，组件在切换过程中就不会频繁的创建和销毁，在一定程度上节省了系统资源同时提高了运行效率；
被缓存的组件中如果要执行数据更新，可以通过缓存组件的activated和deactivated生命周期完成