Vue 基础面试题, 为什么 Vue 的 data 属性必须声明为返回一个初始数据的函数?
Vue 基础面试题, 为什么 Vue 的 data 属性必须声明为返回一个初始数据的函数?
QA
Step 1
Q:: 为什么 Vue 的 data 属性必须声明为返回一个初始数据的函数？
A:: 在 Vue 组件中，data 必须是一个返回对象的函数，而不能直接是一个对象。这样做的原因是因为 Vue 组件是可以被复用的，每个组件实例需要独立的数据副本。如果 data 是一个对象，那么所有实例将共享同一个数据对象，这会导致数据污染。例如，一个实例修改了 data 对象中的某个值，其他实例的数据也会被修改。为了避免这个问题，data 必须是一个函数，这样每次创建组件实例时，都会返回一个新的数据对象，从而确保各个实例的数据是独立的。
Step 2
Q:: Vue 中的生命周期钩子是什么？它们有什么作用？
A:: Vue 的生命周期钩子是指在组件实例的生命周期内，自动调用的钩子函数。常见的生命周期钩子包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed。它们允许开发者在组件的不同阶段执行特定的代码。比如，created 钩子可以用于在组件实例创建后立即执行初始化操作，而 mounted 钩子则通常用于在 DOM 渲染后执行操作，如与第三方库进行交互。
Step 3
Q:: Vue 中如何使用计算属性 (computed)？它与 methods 有什么区别？
A:: 计算属性 (computed) 是 Vue 中的一种特殊属性，它们依赖于其他响应式数据，并且会缓存其计算结果，只有在依赖的数据发生变化时才会重新计算。computed 的主要优点是性能优化，因为在依赖数据不变的情况下，它们不会重复执行。相比之下，methods 是方法，调用时每次都会执行，不会进行缓存。因此，当需要对数据进行较复杂的计算或依赖于其他数据时，通常会选择使用 computed，而不是 methods。
Step 4
Q:: Vue 中如何实现父子组件之间的通信？
A:: 在 Vue 中，父子组件之间的通信主要通过 props 和 $emit 实现。父组件通过 props 向子组件传递数据，而子组件通过 $emit 事件向父组件发送消息。具体来说，父组件可以在子组件的标签上绑定一个属性，将数据传递给子组件；子组件则可以在需要的时候使用 $emit 方法触发一个自定义事件，父组件可以监听这个事件并做出相应的处理。