vue组件生命周期

vue组件生命周期

一个组件初始化到卸载整个执行过程。官方提供了一组钩子函数用作周期函数。

vue2组件中生命周期钩子函数写法

export default {
  //选项式钩子函数
  mounted() {
    console.log(`the component is now mounted.`)
  }
}

生命周期图示

vue3中新增组合式API setup （也叫setup周期）

setup代替了之前vue2的初始化阶段周期。

vue3中提供的声明周期钩子函数

1.onMounted()

生命周期挂载完成函数

//挂载完成周期
onMounted(() => {
  console.log("挂载完成");
});
onMounted(() => {
  console.log("挂载完成");
});

2.onBeforeMount()

生命周期挂载之前。

//挂载之前
onBeforeMount(() => {
  console.log("挂载之前");
});

3.onBeforeUnmount()

生命周期卸载之前

//卸载完成
onUnmounted(() => {
  console.log("卸载完成");
});

4.onBeforeUpdate()

生命周期更新之前 数据data发生变化 DOM节点没有更新

//更新之前
onBeforeUpdate(() => {
  console.log("更新之前");
});

5.onUpdated()

生命周期更新之后，DOM节点更新

//更新完成
onUpdated(() => {
  console.log("更新之后");
});

生命周期流程图

vue3中使用setup代替vue2  初始化周期。

setup中可以直接发送网络请求--作为之前的初始化发送

vue中设置全局变量

Vue.prototype.$message   //vue2

vue3变成

app.config.globalProperties = {
  title: "测试版本",
};

vue3组件使用setup中获取全局变量

setup中不能直接使用变量 原因是setup中没有this

import {getCurrentInstance} from 'vue'


//获取当前实例
let instance = getCurrentInstance();
//console.log(instance?.proxy?.title); //可以获取全局变量
console.log(instance?.appContext.config.globalProperties.title);