vue3生命周期

vue3生命周期

一、Vue2和Vue3生命周期的差异

Vue2(选项式API) Vue3(setup) 描述
beforeCreate - 实例创建前
created - 实例创建后
beforeMount onBeforeMount DOM挂载前调用
mounted onMounted DOM挂载完成调用
beforeUpdate onBeforeUpdate 数据更新之前被调用
updated onUpdated 数据更新之后被调用
beforeDestroy onBeforeUnmount 组件销毁前调用
destroyed onUnmounted 组件销毁完成调用

选项式Api写法:

复制代码
<script>
export default{mounted(){console.log('挂载完成')}
}
</script> 

组合式Api写法:

复制代码
import {onMounted} from "vue"

export default {
  name: 'AboutView',
  setup() {
    onMounted(()=>{
      console.log("onMounted");
    })

    return{
    }
  },
}

setup语法糖:

复制代码
<script setup>
import { onMounted } from "vue";
onMounted(()=>{console.log('挂载完成')
})
</script> 

总结

Vue3中的生命周期相对于Vue2做了一些调整,命名上发生了一些变化并且移除了beforeCreate和created,因为setup是围绕beforeCreate和created生命周期钩子运行的,所以不再需要它们。

二、取消filter

在 3.x 中,过滤器已移除,且不再支持。取而代之的是,我们建议用方法调用或计算属性来替换它们。

三、v-if 与 v-for 的优先级调整

2.x 版本中在一个元素上同时使用 v-if 和 v-for 时,v-for 会优先作用。

3.x 版本中 v-if 总是优先于 v-for 生效。

四、全局API改变

1.vue2中全局API挂在Vue上,vue3挂在vue实例上 app

比如定义全局组件:

复制代码
// vue2
import Vue from 'vue';
Vue.component('loading', {})

// vue3
import { createApp } from 'vue'
let app =  createApp(App);
app.component('loading', {})

vue官网:

相关推荐
无羡仙21 小时前
AI终于‘看见’网页了!Stagewise让UI修改从‘盲调’变‘指哪打哪
前端
柯腾啊21 小时前
“Script error.”的产生原因和解决办法
前端·javascript·浏览器
沙漠之皇21 小时前
ts 定义重复对象字段
前端
HashTang1 天前
不用再配服务器了!这套 Next.js + Cloudflare 模板,一个人搞定全栈出海
前端·后端·边缘计算
Cory.眼1 天前
WebRTC入门指南:实时通信零基础
javascript·webrtc·实时通信
前端架构师-老李1 天前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
一只学java的小汉堡1 天前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html
拖拉斯旋风1 天前
📚 JavaScript 变量声明三剑客:`var`、`let`、`const` 学习笔记
javascript
用户21496515898751 天前
从零搭建uniapp环境-记录
前端
可触的未来,发芽的智生1 天前
追根索源:换不同的词嵌入(词向量生成方式不同,但词与词关系接近),会出现什么结果?
javascript·人工智能·python·神经网络·自然语言处理