我正在参与掘金创作者训练营第5期， 点击了解活动详情

Vue3

说说Vue3的生命周期？

1. beforeCreate：空的Vue实例创建完成；
2. created：Vue实例初始化完成，响应式绑定完成；
3. beforeMount：模板编译完成；
4. mounted：DOM渲染完成，组件创建完成；
5. beforeUpdate（多次）：响应式数据改变；
6. updated（多次）：DOM更新完成；
7. beforeUnmount：全局事件自定义事件等解绑完成（避免内存泄漏）；
8. unmounted：组件销毁完成；

Vue3何时可以操作DOM？

mounted和updated不能保证子组件全部挂载完成。

在mounted中，使用$nextTick来渲染DOM；

computed和watch有什么区别？

• computed：用于计算产生新数据，有缓存；
• watch：监听现有数据；

watch和watchEffect有什么区别？

• watch：需要明确被监听的属性；
• watchEffect：自动监听属性变化；

Vue3组件间如何通信？

1. props与$emit
   • 适用范围：父子组件间通信；
   • 使用方式：父传子用属性props，子传父用事件$emit；
2. 自定义事件
   • 适用范围：无关组件间通信；
   • 使用方式：Vue3中使用第三方库；
3. $attrs
   • 适用范围：上级组件向下级组件通信；
   • 使用方式：保存props与$emit没有接住的上级属性和方法，多级传递依赖v-bind；
4. $parent
   • 适用范围：父组件向子组件通信；
   • 使用方式：在mounted中使用（等待渲染），获取父组件中的属性和方法；
5. $refs
   • 适用范围：子组件向父组件通信；
   • 使用方式：在mounted中使用（等待渲染），获取子组件中的属性和方法；
6. provide与inject
   • 适用范围：多层级组件间通信；
   • 使用方式：
     • 上级组件在provide函数中返回一个包裹数据的对象，响应式数据要使用computed包裹；
     • 下级组件在inject中通过key值获取对象中的数据；
7. Vuex
   • 适用范围：全局组件间通信；

Vuex中action与mutation有什么区别？

• mutation：原子操作，同步；
• action：合并原子操作，异步；

Vue-router有哪些模式？

1. Hash；
2. WebHistory；
3. MemoryHistory；

Vue3各个模块间关系是怎样的？

Vue3的编译时与运行时相互独立，可分别使用。