医疗知识普及网站开发,怎么网络推广,faq页面设计模板,建设银行网站登录首页一、Vue3 与 Vue2 区别
对于生命周期来说#xff0c;整体上变化不大#xff0c;只是大部分生命周期钩子名称上 “on”#xff0c;功能上是类似的。不过有一点需要注意#xff0c;组合式API的Vue3 中使用生命周期钩子时需要先引入#xff0c;而 Vue2 在选项API中可以直接…一、Vue3 与 Vue2 区别
对于生命周期来说整体上变化不大只是大部分生命周期钩子名称上 “on”功能上是类似的。不过有一点需要注意组合式API的Vue3 中使用生命周期钩子时需要先引入而 Vue2 在选项API中可以直接调用生命周期钩子如下所示。
// vue3
script setup
import { onMounted } from vue; // 使用前需引入生命周期钩子onMounted(() {// ...
});// 可将不同的逻辑拆开成多个onMounted依然按顺序执行不会被覆盖
onMounted(() {// ...
});
/script// vue2
script
export default { mounted() { // 直接调用生命周期钩子 // ... }, }
/script 常用生命周期对比 二. 多根节点
熟悉 Vue2 的朋友应该清楚在模板中如果使用多个根节点时会报错如下所示。
// vue2中在template里存在多个根节点会报错
templateheader/headermain/mainfooter/footer
/template// 只能存在一个根节点需要用一个div来包裹着
templatedivheader/headermain/mainfooter/footer/div
/template但是Vue3 支持多个根节点也就是 fragment。即以下多根节点的写法是被允许的。
templateheader/headermain/mainfooter/footer
/template三. Composition API
Vue2 是选项APIOptions API一个逻辑会散乱在文件不同位置data、props、computed、watch、生命周期钩子等导致代码的可读性变差。当需要修改某个逻辑时需要上下来回跳转文件位置。
Vue3 组合式APIComposition API则很好地解决了这个问题可将同一逻辑的内容写到一起增强了代码的可读性、内聚性其还提供了较为完美的逻辑复用性方案。
四.异步组件
tempaltesuspensetemplate #defaultList //templatetemplate #fallbackdivLoading... /div/template/suspense
/template
在 List 组件有可能是异步组件也有可能是组件内部处理逻辑或查找操作过多导致加载过慢等未加载完成前显示 Loading...即 fallback 插槽内容加载完成时显示自身即 default 插槽内容。
