Vue 基础面试题, Vue 中 data 的属性可以与 methods 中的方法同名吗?为什么?
Vue 基础面试题, Vue 中 data 的属性可以与 methods 中的方法同名吗?为什么?
QA
Step 1
Q:: Vue 中 data 的属性可以与 methods 中的方法同名吗？为什么？
A:: 在 Vue 中，data 属性和 methods 中的方法不能同名。因为 Vue 的实例在初始化时会将 data 和 methods 中的所有属性和方法挂载到 Vue 实例上，如果名称冲突，methods 中的方法会覆盖 data 中的属性，导致 data 属性不可访问或者行为异常。因此，为了避免这种冲突，建议在命名 data 属性和 methods 方法时保持唯一性。
Step 2
Q:: Vue 中 data 和 props 的区别是什么？
A:: data 是组件内部管理的状态，而 props 是用于从父组件接收数据的。props 是只读的，不能在子组件中修改，子组件只能通过 $emit 事件通知父组件来改变状态。而 data 则是组件内部可以自由修改的状态，用于存储和管理组件的局部状态。
Step 3
Q:: Vue 的生命周期钩子函数有哪些？
A:: Vue 的生命周期钩子函数包括：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed。每个钩子函数在组件生命周期的不同阶段触发，用于在组件初始化、挂载、更新和销毁时执行特定逻辑。
Step 4
Q:: Vue 中如何实现组件间的通信？
A:: Vue 提供了多种组件间通信的方式，包括：1) 父子组件通信：通过 props 向子组件传递数据，通过事件 ($emit) 向父组件传递数据；2) 兄弟组件通信：可以通过父组件传递数据，或使用 Vue 的事件总线 (Event Bus)；3) 跨级组件通信：通过 provide/inject 注入依赖；4) 使用 Vuex 管理全局状态。
Step 5
Q:: 在 Vue 中，为什么建议不要直接操作 DOM？
A:: Vue 提倡使用数据驱动的方式来操作 DOM，因为 Vue 会自动追踪数据的变化并高效更新 DOM。如果开发者直接操作 DOM 可能会导致与 Vue 的响应式系统冲突，难以维护和调试。而使用 Vue 提供的指令 (如 v-if, v-for) 和绑定 (如 :class, :style) 可以更清晰、更安全地更新 DOM。