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