Vue 基础面试题, Vue 计算属性的函数名和 data 中的属性可以同名吗?为什么?

Step 1

Q:: Vue 计算属性的函数名和 data 中的属性可以同名吗？为什么？

A:: 不可以。在 Vue 中，计算属性的函数名和 data 中的属性名不能同名。原因是 Vue 的响应式系统会将 data 中的属性和计算属性都代理到 Vue 实例的根上，如果名字相同，会导致命名冲突，从而出现不可预期的行为。为了避免冲突，开发者应该为计算属性和 data 中的属性使用不同的名称。

Step 2

Q:: Vue 计算属性的作用是什么？

A:: Vue 计算属性的主要作用是通过依赖数据的变化自动重新计算，并缓存结果，直到依赖的属性发生变化时才会重新计算。与 methods 不同，计算属性是基于其依赖进行缓存的，只有当相关依赖发生改变时才会触发重新计算，从而提高性能。

Step 3

Q:: 在 Vue 中计算属性与 methods 有什么区别？

A:: 计算属性与 methods 的主要区别在于缓存机制。计算属性会基于依赖缓存值，只有当相关依赖发生变化时才会重新计算，而 methods 每次调用都会重新执行函数逻辑，不会进行缓存。因此，如果需要进行复杂的计算或数据处理，并且依赖于响应式数据，应该优先使用计算属性。

Step 4

Q:: 什么时候应该使用 Vue 的计算属性而不是 methods？

A:: 当需要基于其他数据进行复杂计算并且希望提高性能时，应该使用计算属性，因为计算属性会缓存计算结果，只有在依赖数据发生变化时才会重新计算，而 methods 每次调用时都会重新执行函数逻辑。如果需要重复访问并且逻辑复杂，计算属性是更好的选择。