Vue.js面试必备：computed vs watch与v-if vs v-show的区别解析

资源摘要信息:"Vue.js技术面试题目及答案解析" 知识点一：Vue计算属性computed与侦听器watch的区别 在Vue.js框架中，computed和watch是两个常用的响应式数据处理方式，它们各自有不同的应用场景和执行机制。 应用场景不同： - computed（计算属性）主要用于依赖其他响应式数据来计算一个新值的场景。例如，基于data属性或其它computed属性的值进行一些逻辑处理得到新的数据。计算属性的值通常被用在模板渲染或其它表达式中，用于减少不必要的计算和提升性能。 - watch（侦听器）则多用于监听和响应Vue实例上数据对象的数据变化。当被监听的数据发生变化时，可以执行异步或开销较大的操作。它比较适合执行包含副作用的操作，比如发送网络请求或更新第三方状态。 执行过程不同： - computed属性是基于它们的依赖进行缓存的。只有在它的相关依赖发生改变时才会重新求值。当computed属性值被访问时，Vue会自动判断其依赖的数据是否发生变化，如果依赖数据未变化，则直接返回缓存值，否则进行计算并返回新值。 - watch则是当其依赖的响应式数据发生变化时，它的回调函数会立即执行。每个watch监听器都可以有自己独立的处理函数，响应式数据一旦更新，就会触发对应的函数。 知识点二：Vue中v-if与v-show的区别 v-if和v-show都是Vue中用于控制元素显示与隐藏的指令，但它们的实现方式和适用场景有所不同。 行为不同： - v-if指令是真正的条件渲染，它会根据表达式的结果来决定是否渲染对应的元素。如果v-if判断条件为假，则对应元素及其子元素不会存在于DOM中，即不会渲染到页面上。 - v-show则是通过设置CSS的display属性来控制元素的显示与隐藏，其表达式返回true或false仅控制元素的显示状态。v-show始终会渲染元素，只是根据条件显示或隐藏元素。 应用场景不同： - v-if因为涉及DOM的创建与销毁，所以切换开销较大，适用于不需要频繁切换显示状态的场景。 - v-show由于不涉及DOM的创建和销毁，其初始渲染开销较大，但切换显示状态时的开销较小，适合于需要频繁切换显示状态的场景。 这两组知识点是Vue.js技术面试中经常考察的内容，掌握它们可以帮助面试者更好地理解Vue的响应式系统和DOM渲染策略。在实际开发中，根据不同的业务场景选择合适的指令或数据处理方式，可以提高应用的性能和可维护性。