生命周期函数

chonger_feifei

已于 2022-03-28 12:04:58 修改

阅读量1.5k

点赞数

分类专栏： VUE 文章标签： vue

于 2022-03-24 13:01:49 首次发布

本文链接：https://blog.csdn.net/chonger_feifei/article/details/123708331

版权

VUE 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

定义：实例或者组件从创建到消灭中间经过的一系列过程
特点：在某一时刻自动执行
在这里插入图片描述

beforeCreate() & created()

beforeCreate() 实例生成前自动执行
created() 实例生成后自动执行

    beforeCreate() {
      console.log("beforeCreate");
    },
    created() {
      console.log("created");
    },

beforeMount()&mounted()

组件内容被渲染到页面前自动执行
组件内容被渲染到页面后自动执行

beforeMount() {
  console.log(document.getElementById("root").innerHTML, "beforeMount");
},
mounted() {
  console.log(document.getElementById("root").innerHTML, "mounted");
},

在这里插入图片描述

beforeUpdate() &updated()

beforeUpdate()数据发生变化自动执行
updated()数据发送变化且页面更新完成后自动执行

beforeUpdate() {
  console.log(document.getElementById("root").innerHTML, "beforeUpdate");
},
updated() {
  console.log(document.getElementById("root").innerHTML, "updated");
},

在这里插入图片描述

beforeunmount()&unmounted()

beforeunmount()vue应用失效自动执行
unmounted()vue应用失效且dom完全销毁后自动执行

beforeunmount() {
  console.log(
    document.getElementById("root").innerHTML,
    " beforeunmount"
  );
},
unmounted() {
  console.log(document.getElementById("root").innerHTML, " unmounted");
},