Vue 基础面试题, 在 Vue 组件中如何访问根实例?

Step 1

Q:: 在 Vue 组件中如何访问根实例？

A:: 在 Vue 组件中，可以通过 $root 访问根实例。例如，在一个子组件中，可以通过 this.$root 访问根实例，从而获取根实例中的属性或方法。这在一些场景下很有用，比如需要从根实例中获取全局状态或方法。

Step 2

Q:: Vue 中的 $root 和 $parent 有什么区别？

A:: $root 用于访问根 Vue 实例，而 $parent 用于访问当前组件的直接父组件。前者通常用于获取全局状态或方法，后者则多用于父子组件之间的通信。

Step 3

Q:: 为什么 Vue 中不建议频繁使用 $root 访问根实例？

A:: 频繁使用 $root 访问根实例会导致组件之间的耦合度增加，不利于组件的复用和维护。建议使用 Vuex 或者 Provide/Inject 机制来管理跨组件的状态和方法，这样可以降低耦合度，增强组件的可维护性。

Step 4

Q:: Vue 中的 Provide/Inject 是什么？有什么作用？

A:: Provide/Inject 是 Vue 提供的一个用于跨级组件通信的机制。provide 用于在父组件中提供数据或方法，inject 用于在任意后代组件中注入这些数据或方法。这种机制主要用于应用层级较深，但不适合通过 props 一层层传递的场景。