[JavaScript知识库]vue3.0项目实战系列文章 - 使用周期函数

系列文章目录

第一章?

论vue3.0和vue2.0区别之编程方式及例子详解

第二章

同一台电脑 实现 vue-cli2和vue-cli3同时并存 及 常见命令

第三章

vue3.0项目实战 - ElementUI框架版

第四章

【TypeScript】在vue3中遇到的问题及解决方案，未完待续

第五章

vue3.0项目实战系列文章 - 登录页面

第六章

vue3.0项目实战系列文章 - 使用周期函数

目录

系列文章目录

前言

一、新的调试钩子函数

二、使用周期函数

前言

从Vue2转换到Vue3

这个方便的Vue2到Vue3的生命周期映射直接来自于Vue3 Composition API 文档，我认为这是一种最有用的方式来查看事情将如何变化，以及我们如何使用它们。

• beforeCreate -> use setup()
• created -> use setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

一、新的调试钩子函数

• onRenderTracked
• onRenderTriggered

这两个事件都带有一个DebuggerEvent，它使我们能够知道是什么导致了Vue实例中的重新渲染。

export default {
  onRenderTriggered(e) {
    debugger
    // 检查哪个依赖项导致组件重新呈现
  }
}

二、使用周期函数

注意

使用

1.与Vue3中的大多数功能一样，生命周期钩子是我们必须导入到项目中的东西，这是为了帮助使项目尽可能轻巧。

2.路由跳转

template中：

?<router-link to="/">

? ? <el-button type="primary" size="large">返回首页</el-button>

</router-link>

3.toRefs转换为响应式数据：如下代码

简写导出对象

完整代码

<template>
    <div class="error-page">
        <div class="error-handle">
            <router-link to="/">
                <el-button type="primary" size="large">返回首页</el-button>
            </router-link>
            <el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>
            <p>{{id}}--{{name}}--{{num}}</p>
            <el-button type="primary" @click="change1">点击</el-button>
        </div>
    </div>
</template>

<script>
    import {
        useRouter
    } from "vue-router";
    import {
        reactive,
        toRefs,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUpdate,
        onUpdated,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated,
        onErrorCaptured
    } from 'vue';
    export default {
        name: "403",
        setup() {
            // reactive 数据双向绑定
            const data = reactive({
                id: 1,
                name: '名称',
                num: computed(() => data.id += 5) //计算属性
            });
            const router = useRouter();
            const goBack = () => {
                router.go(-1);
            };
            // 方法
            const methods = {
                change1() {
                    alert("点击")
                },
            };
            // 在组件内容被渲染到页面之前自动执行的函数
            onBeforeMount(() => {
                //alert("onBeforeMount")
            });
            // 在组件内容被渲染到页面之后自动执行的函数
            onMounted(() => { // 绑定后自动执行
                //alert("onMounted")
            });
            // 当data中的数据发生变化前执行
            onBeforeUpdate(() => {
                //alert("onBeforeUpdate");
            });
            // 当data中的数据发生变化后执行
            onUpdated(() => {
                //alert("onUpdated");
            });
            // 解除绑定前执行的函数
            onBeforeUnmount(() => {
                //alert("onBeforeUnmount");
            });
            // 解除绑定后执行的函数
            onUnmounted(() => {
                //alert("onUnmounted");
            });
            onActivated(() => {
                // ... 
            })
            onDeactivated(() => {
                // ... 
            })
            onErrorCaptured(() => {
                // ... 
            })
            return {
                // toRefs转换为响应式数据
                ...toRefs(data),
                ...methods,
                goBack,
            };
        }
    };
</script>


<style scoped>
   
</style>