Vue3生命周期及事件写法

1.生命周期

1、beforeCreate -> 使用 setup()

2、created -> 使用 setup()	

3、beforeMount -> onBeforeMount

4、mounted -> onMounted	//在渲染完html后执行

5、beforeUpdate -> onBeforeUpdate

6、updated -> onUpdated	//第二次进入页面执行

7、beforeDestroy -> onBeforeUnmount

8、deactivated -> onDeactivated		//退出当前页面

9、errorCaptured -> onErrorCaptured	//浅出Vue 错误处理机制

10、activated ->	onActivated 	//每次都执行

import { onMounted, onUpdated, onUnmounted } from 'vue'
export default {
setup() {
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  },
};

2.事件

<template>
  <div
    id='box'
    class="box"
  >
    <div class="yanjin">
      <div
        class="demo"
        ref='seder'
      >欢迎来到VUE3</div>
      <div
        class="demo"
        @click="testClick"
      >欢迎来到VUE3</div>
    </div>
    <div
      v-for="(item,index) in list"
      :key='index'
    >
      <p
        v-if="item.type == 1"
        @click="setAder"
      >
        {{item.text}}
      </p>
    </div>
    <div @click="go">跳转页面</div>
    <div @click="getRquset">
      点我调接口
    </div>
  </div>
</template>

<script>
import { getFissionCourseList, getGetrequs } from "../../utils/request";
import { reactive, toRefs, onMounted, onActivated } from "vue";
export default {
  components: {},
  setup() {
    const state = reactive({
      testMsg: "原始值",
      list: [
        {
          text: 123,
          type: 1,
        },
        {
          text: 321,
          type: 0,
        },
        {
          text: 427,
          type: 1,
        },
        {
          text: 346,
          type: 0,
        },
      ],
    });
    onMounted(async () => {
      console.log("mounted!");
      // 进入页面调用接口
      await getFissionCourseList({ t35: "post" }).then((res) => {
        console.log(res);
      });
    });
    onActivated(async () => {
      let that = this;
    });
    // 点击事件
    const methods = {
      go() {
        this.$router.push({
          path: "/main",
          query: {
            course_id: 123,
          },
        });
      },
      testClick() {
        let that = this;
        that.$nextTick(function() {
          that.$refs.seder.innerHTML = "更改了内容";
        });
      },
      async getRquset() {
        await getGetrequs({ t35: "get" }).then((res) => {
          console.log(res);
        });
      },
    };
    return {
      ...toRefs(state),
      ...methods,
    };
  },
};
</script>

<style src='./index.less' lang='less' scoped>
</style>

最后

以上就是怕孤单御姐为你收集整理的Vue3生命周期及事件写法的全部内容，希望文章能够帮你解决Vue3生命周期及事件写法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。