每天背5道，务必背熟记住，希望能对找工作的小前端有点帮助
前两天的题偏理论一些，今天来点常问但是简单的，想必大家都会
1、为什么vue组件中的 data 必须是一个函数，return 一个对象
因为组件是用来复用的，且 JS 里对象是引用类型，如果组件中 data 是一个对象，子组件中的 data 属性值会相互影响，如果组件中 data 选项是一个函数，每个实例可以维护一份被返回对象的独立拷贝，组件实例之间的 data 属性值不会互相影响
追问：new Vue 实例里，data 可以直接是一个对象？
new Vue() 是根组件，是不会被复用的，因此不存在引用对象的问题。
2、v-if和v-show的用途和区别
v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 “display” 属性进行切换。
所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。
3、v-for循环为什么要加key值，key用什么合适
key特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
总结一下：key 是为Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速。
在列表中一般使用当前项的id作为key，而不要使用index，因为列表增删操作是导致index值的变化，增加了跟新dom的数量，性能低下。
4、计算属性computed 和侦听器watch 的区别和运用的场景？
计算属性 computed：
（1）支持缓存，只有依赖数据发生变化时，才会重新进行计算函数；
（2）计算属性内不支持异步操作；
（3）计算属性的函数中都有一个 get(默认具有，获取计算属性)和 set(手动添加，设置计算属性)方法；
（4）计算属性是自动监听依赖值的变化，从而动态返回内容。
侦听属性 watch：
（1）不支持缓存，只要数据发生变化，就会执行侦听函数；
（2）侦听属性内支持异步操作；
（3）侦听属性的值可以是一个对象，接收 handler 回调，deep，immediate 三个属性；
（3）监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些其他事情。
运用场景：
-
当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
-
当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
5、如何动态更新对象或数组的值？
由于Object.defineProperty() 只能对属性进行数据劫持，Vue 无法监听到对象或数组内部某个属性值的变化，因此在直接设置以上两类数据的值时，页面不会实时更新。此时可以通过 this.$set 方法来解决。
this.$set(数组/对象，要改变的index/属性名，要改成的value)
除了$set外，对于数组Vue提供了一些可以触发视图更新的方法
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
本着能为找工作中的前端帮一点小忙的初衷，借鉴了掘金里面很多大佬的文章，如有侵权请告知
