Vue 组件生命周期钩子

Posted waller

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 组件生命周期钩子相关的知识,希望对你有一定的参考价值。

Vue 组件生命周期钩子

# 1)一个组件从创建到销毁的整个过程,就称之为组件的生命周期
# 2)在组件创建到销毁的过程中,会出现众多关键的时间节点,
如: 组件要创建了、组件创建完毕了、组件数据渲染完毕了、组件要被销毁了、组件销毁完毕了 等等时间节点,
每一个时间节点,vue都为其提供了一个回调函数(在该组件到达该时间节点时,就会触发对应的回调函数,在函数中就可以完成该节点需要完成的业务逻辑)
# 3)生命周期钩子函数就是 vue实例的成员

 

 

beforeCreate

组件创建了,但数据和方法还未提供时

# 该钩子需要掌握,一般该组件请求后台的数据,都是在该钩子中完成
# 1)请求来的数据可以给页面变量进行赋值
# 2)该节点还只停留在虚拟DOM范畴,如果数据还需要做二次修改再渲染到页面,可以在beforeMount、mounted钩子中添加逻辑处理
export default {
       ....

        beforeCreate(){
            console.log(组件创建了,但数据和方法海未提供);
            console.log(this.title);  # undefined
            console.log(this.alterTitle);  # undefined
        },
    }

 

created

组件创建了,数据和方法已提供

export default {
       ....

        created(){
            console.log(组件创建了,数据和方方法已提供);
            console.log(this.title);  # 有值
            console.log(this.alterTitle);  # 有值
        },
    }

 

destroyed

数据销毁完毕后

export default {
       ....

       destroyed() {
            console.log(组件销毁完毕)
        }
    }    

 

 

根据请求路径高亮路由标签案例

"""
1) router-link会被解析为a标签,用to完成指定路径跳转,但是不能添加系统事件(因为是组件标签)
2) 在js方法中可以用 this.$router.push(‘路径‘) 完成逻辑跳转
3) 在js方法中可以用 this.$route.path 拿到当前请求的页面路由
"""

 

<template>
    <div class="nav">
        <!--采用vue-router完成页面跳转,不能采用a标签(会发生页面刷新,本质就是重新加载了一次项目界面)-->
        <ul>
            <li @click="changePage(‘/‘)" :class="{active: currentPage === ‘/‘}">
                <!--<a href="/">主页</a>-->
                <!--<router-link to="/">主页</router-link>-->
                主页
            </li>
            <li @click="changePage(‘/red‘)" :class="{active: currentPage === ‘/red‘}">
                <!--<router-link to="/red">红页</router-link>-->
                红页
            </li>
            <li @click="changePage(‘/blue‘)" :class="{active: currentPage === ‘/blue‘}">
                <!--<router-link to="/blue">蓝页</router-link>-->
                蓝页
            </li>
            <li @click="changePage(‘/tan‘)" :class="{active: currentPage === ‘/tan‘}">
                <!--<router-link to="/tan">土页</router-link>-->
                土页
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Nav",
        data() {
            return {
                // 没渲染一个页面,都会出现加载Nav组件,currentPage就会被重置,
                // 1)在点击跳转事件中,将跳转的页面用 数据库 保存,在钩子函数中对currentPage进行数据更新
                // currentPage: localStorage.currentPage ? localStorage.currentPage: ‘‘
                // 2)直接在created钩子函数中,获取当前的url路径,根据路径更新currentPage
                currentPage: ‘‘
            }
        },
        methods: {
            changePage(page) {
                // console.log(page);
                // 当Nav出现渲染,该语句就无意义,因为在data中将currentPage重置为空
                // this.currentPage = page;

                // 有bug,用户不通过点击,直接修改请求路径完成页面跳转,数据库就不会更新数据
                // localStorage.currentPage = page;

                // 任何一个标签的事件中,都可以通过router完成逻辑条件
                // console.log(this.$route);  // 管理路由数据
                // console.log(this.$router);  // 管理路由跳转
                this.$router.push(page);  // 路由的逻辑跳转
            }
        },
        // 当前组件加载成功,要根据当前实际所在的路径,判断单选激活标签
        created() {
            // console.log(this.$route.path);
            this.currentPage = this.$route.path;
        }
    }
</script>

<style scoped>
    .nav {
        width: 100%;
        height: 60px;
        background-color: orange;
    }
    .nav li {
        float: left;
        font: normal 20px/60px ‘微软雅黑‘;
        padding: 0 30px;
    }
    .nav li:hover {
        cursor: pointer;
        background-color: aquamarine;
    }
    .nav li.active {
        cursor: pointer;
        background-color: aquamarine;
    }
</style>

 

以上是关于Vue 组件生命周期钩子的主要内容,如果未能解决你的问题,请参考以下文章

Vue-的父组件和子组件生命周期钩子函数执行顺序

Vue 路由器和组件生命周期钩子

Vue 的父组件和子组件生命周期钩子执行顺序

Vue——生命周期和钩子函数的一些理解

VUE生命周期中的钩子函数及父子组件的执行顺序

Vue 组件生命周期钩子