zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    隔离级别 && SNAPSHOT
    多态性&& 虚函数 && 抽象类
    socket编程
    [APIO2015]巴邻旁之桥
    LuoguP3701 「伪模板」主席树
    线段树标记永久化
    [HNOI2015]开店
    NOIP2017划水记
    FFTNTT总结
    [THUWC 2017]在美妙的数学王国中畅游
  • 原文地址:https://www.cnblogs.com/waller/p/11650600.html
Copyright © 2011-2022 走看看