vue3生命周期

爱抽烟的老汉2024-03-30 17:58

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官网：