Vue面试题二@酷酷的小航航

v-show 和 v-if区别

• 共同点：

  • v-if和v-show都是动态显示DOM元素。
    

• 区别
  1.编译过程：v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当被销毁和重建。v-show的元素始终会被渲染并保留在DOM中。V-show只是简单的切换元素css属性display
  2.编译条件:v-if是惰性的:如果在初始渲染时条件为假，则什么也不做。知道条件第一次变为真时，才会开始渲染条件块。v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于css进行切换。
  3.性能消耗：v-if有更高的切换消耗。v-show有更高的初始渲染消耗。
  4.应用场景：v-if适合运行时条件很少改变时使用。v-show适合频繁切换

vue中key值的作用

1.需要使用key来给每个节点做一个唯一标识，Diff 算法就可以正确的识别此节点，找到正确的位置插入新的节点
2.其实不只是vue，react中在执行列表渲染时也会要求给每个组件添加上key这个属性
3.要解释key的作用，不得不先介绍一个虚拟DOM的 Diff 算法
4.vue和react的虚拟Dom的Diff算法大致相同

assets和static的区别

• 相同点
  1.assets和static俩个都是存放静态资源文件。项目中所需要的资源问价那图片，字体图标，样式文件等都可以放在这俩个文件下，这是相同点
• 不同点
  1.assets中存放的静态资源文件在项目打包时，也就是运行npm run build 时会将assets中放置的静态资源文件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器
  2.static中放置的静态资源文件就不会打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是static中的资源文件由于没有进行压缩操作，所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。

computed 和 methods的区别

computed(计算属性）methods（方法）

1.同一个函数定义为一个方法而不是一个计算属性。俩种方式的最终结果确实相同，
不同的事计算属性是基于它们的响应式依赖进行缓存的。只是响应式依赖发生改变时他们才会重新求值。这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不再次执行函数。

相比之下，每当触发重新渲染时，调用方法将总会在次执行函数。
假如我们有一个性能开销比较大的计算属性A，它需要遍历一个巨大的数组并做大量的计算。然后有可能有其他的计算属性依赖于A。如果没有缓存，我们将不可避免多次执行A的getter不希望缓存就用方法代替

computed 和 watch的区别

1.从名字上，computed是计算属性，也就是依赖其他属性计算所得出最后的值。watch是监听一个值的变化，然后执行相对应的函数。computed是用于定义，基于数据之上的数据，而watch是你想在某个数据变化时做一些事情
2.从实现上，
computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算，
watch在每次监听的值变化时，都会执行回调。其实从这一点来看，都是在依赖的值变化之后，去执行回调。
3.watch的回调里面会传入监听属性的新旧值，通过这两个值可以做一些特定的操作。computed通常就是简单的计算。
4.watch和computed并没有哪个更底层，watch内部调用的是vm.$watch，它们的共同之处就是每个定义的属性都单独建立了一个Watcher对象。
5.使用上，如果一个数据依赖于其他数据，那么把这个数据设计为computed的；如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。