Vue3.0商店后台管理系统项目实战-生命周期-阿里云开发者社区

Vue3.0商店后台管理系统项目实战-生命周期

2023-11-20 26

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Vue3.0商店后台管理系统项目实战-生命周期

vue2的8个生命周期和vue3对应的8个生命周期

1:onBeforeMount

onMounted

<template>
  <div class="about">
    <h1>vue3的生命周期</h1>
    <div id="dom">{{msg}}</div>
  </div>
</template>
<script>
import { reactive, toRefs, onBeforeMount, onMounted } from "vue";
export default ({
  setup() {
    const data = reactive({
      msg: "你好",
    });
    //数据渲染前
    onBeforeMount(() => {
      console.log("onBeforeMount",document.querySelector("#dom"))
    });
  //数据渲染后
    onMounted(() => {
       console.log("onMounted",document.querySelector("#dom"))
    });
    return {
      ...toRefs(data),
    };
  },
});
</script>

2：onBeforeUpdate,onUpdated

dom更新前和dom更新后

2s过后，触发onBeforeUpdate,onUpdated

<template>
  <div class="about">
    <h1>vue3的生命周期</h1>
    <div id="dom">{{ msg }}</div>
  </div>
</template>
<script>
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
} from "vue";
export default {
  setup() {
    const data = reactive({
      msg: "你好",
    });
    //数据渲染前
    onBeforeMount(() => {
      console.log("onBeforeMount", document.querySelector("#dom"));
    });
    //数据渲染后
    onMounted(() => {
      console.log("onMounted", document.querySelector("#dom"));
      setTimeout(() => {
        data.msg = "hello";
      }, 2000);
    });
    //dom更新前
    onBeforeUpdate(() => {
      console.log("onBeforeUpdate", document.querySelector("#dom"));
    });
    //dom更新后
    onUpdated(() => {
      console.log("onUpdated", document.querySelector("#dom"));
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>

Vue3.0商店后台管理系统项目实战-生命周期

热门文章

最新文章

相关课程

相关电子书

相关实验场景