vue3总结

77 阅读1分钟

1、vue3与vue2的区别

image.png

2、vite

image.png

3、setup

image.png

4、reactive

image.png

5、ref

image.png

6、toRef

image.png

7、computed

image.png

8、watch

image.png

9、生命周期

1、setup() : 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 method

2、onBeforeMount() : 组件挂载到节点上之前执行的函数;

3、onMounted() : 组件挂载完成后执行的函数;

4、onBeforeUpdate(): 组件更新之前执行的函数;

5、onUpdated(): 组件更新完成之后执行的函数;

6、onBeforeUnmount(): 组件卸载之前执行的函数;

7、onUnmounted(): 组件卸载完成后执行的函数;

8、onActivated(): 被包含在 中的组件,会多出两个生命周期钩子函数,被激活时执行;

9、onDeactivated(): 比如从 A 组件,切换到 B 组件,A 组件消失时执行;

10、onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

10、父传子与子传父

父传子:在子组件标签上自定义属性,子组件通过props接收

子传父:子组件通过setup中context属性,context.emit触发父组件自定义事件并传参。

11、跨层级组件数据传递

image.png

12、script setup

image.png

13、其他变更

image.png