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

相关推荐
烛阴1 分钟前
武装你的Python“工具箱”:盘点10个你必须熟练掌握的核心方法
前端·python
sorryhc17 分钟前
如何设计一个架构良好的前端请求库?
前端·javascript·架构
Queen_sy24 分钟前
vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天
javascript·vue.js·elementui
lvchaoq42 分钟前
react 修复403页面无法在首页跳转问题
前端·javascript·react.js
郝开1 小时前
6. React useState基础使用:useState修改状态的规则;useState修改对象状态的规则
前端·javascript·react.js
Codigger官方1 小时前
Linux 基金会牵头成立 React 基金会:前端开源生态迎来里程碑式变革
linux·前端·react.js
90后的晨仔1 小时前
🌟 Vue3 + Element Plus 表格开发实战:从数据映射到 UI 优化的五大技巧
前端
ObjectX前端实验室2 小时前
【图形编辑器架构】🧠 Figma 风格智能选择工具实现原理【猜测】
前端·react.js
天桥下的卖艺者2 小时前
R语言基于shiny开发随机森林预测模型交互式 Web 应用程序(应用程序)
前端·随机森林·r语言·shiny
技术钱2 小时前
vue3 两份json数据对比不同的页面给于颜色标识
前端·vue.js·json