Vue 进阶面试题, 在 Vue 项目中,如果 methods 的方法用箭头函数定义,会有什么结果?

Step 1

Q:: 在 Vue 项目中，如果 methods 的方法用箭头函数定义，会有什么结果？

A:: 在 Vue 项目中，如果在 methods 中使用箭头函数定义方法，this 的指向会与预期不符。箭头函数的 this 是在定义时绑定的，而不是调用时绑定的，因此 this 会指向外层作用域，而不是 Vue 实例本身。这样就无法正确访问 Vue 实例的属性和方法，从而导致代码逻辑出错。

Step 2

Q:: Vue 中 data 为什么必须是一个函数而不能是一个对象？

A:: 在 Vue 组件中，data 必须是一个函数而不能是一个对象，因为每个组件实例需要独立的数据对象。如果 data 是对象，所有的组件实例将共享同一个数据对象，这将导致不同组件实例之间的数据互相干扰。而将 data 定义为函数，每个组件实例都会返回一个全新的数据对象，避免了数据共享问题。

Step 3

Q:: Vue 中 computed 和 watch 的区别是什么？

A:: computed 是基于依赖进行缓存的属性，只有在依赖发生变化时才会重新计算，适用于需要根据其他数据动态计算的场景。watch 则是监听数据的变化并执行回调函数，适用于在数据变化时执行异步或复杂逻辑操作的场景。

Step 4

Q:: Vue 中父子组件如何通信？

A:: Vue 中父子组件的通信可以通过 props 和事件来实现。父组件通过 props 向子组件传递数据，子组件通过 $emit 事件向父组件发送消息。通过这种方式，父组件可以控制子组件的状态，子组件可以通知父组件其内部状态的变化。