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>

原文地址:https://www.cnblogs.com/waller/p/11650600.html

时间: 2024-10-27 12:47:44

Vue 组件生命周期钩子的相关文章

Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参

目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 2. router-link标签 3.逻辑跳转 this.$router 控制路由跳转 this.$route 控制路由数据 Vue组件文件微微细剖 组件在view 文件中创建 如果需要用到其他小组件可以 在 component文件中创建并导入 view文件下: <template> <di

简单记录一下vue生命周期及 父组件和子组件生命周期钩子执行顺序

首先,vue生命周期可以用下图来简单理解 当然这也是官方文档的图片,详细的vue周期详解请参考这里 然而当同时存在父子组件的时候生命周期钩子是如何执行的呢? 请看下文: 加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted 子组件更新过程父beforeUpdate->子beforeUpdate->子up

记录:官方文档 vue 的生命周期钩子

选项 / 生命周期钩子 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos()).这是因为箭头函数绑定了父上下文,因此 this与你期待的 Vue 实例不同,this.fetchTodos 的行为未定义. beforeCreate 类型:Function 详细: 在实例初始化之后,数据观测 (data observer) 和 even

vue组件生命周期详解

Vue实例有一个完整的生命周期,也就是说从开始创建.初始化数据.编译模板.挂在DOM.渲染-更新-渲染.卸载等一系列过程,我们成为Vue 实例的生命周期,钩子就是在某个阶段给你一个做某些处理的机会.Vue是一个自带组件系统的前端框架.Vue的每一个实例其实就是一个组件,我们在组织我们的页面结构的时候其实就是在定一个一个组件,然后拼装在一起,完成一个复杂的页面逻辑.组件主要包含:数据,模版,以及链接数据和模版的状态响应系统. beforeCreate( 创建前 ) 在实例初始化之后,数据观测和事件

vue组件生命周期

分为4个阶段:create/mount/update/destroy 每一个阶段都对应着有自己的处理函数 create: beforeCreate created 初始化 mount: beforeMount mounted 和挂载相关的处理 update: beforeUpdate updated 根据要更新的数据 做逻辑判断 destroy:beforeDestroy destroyed 清理工作 <!doctype html> <html> <head> <

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

原文地址:https://www.cnblogs.com/anbozhu7/p/11278000.html

vue.js生命周期钩子函数及缓存

在使用vue.js进行开发时,使用最多的就是created.mounted.activated. 由于有些情况下,我们需要复用某些组件,因此需要用到keep-alive. 当引入keep-alive时,页面第一次进入,钩子的触发顺序是created-> mounted-> activated.当再次进入该页面时,只触发activated. 因此,应该activated中留一份数据获取的代码,或者不要created部分,直接将created中的代码转移到activated中. created:

vue之生命周期钩子函数

1.vue router.beforeEach beforeEach的钩子函数,它是一个全局的before 钩子函数, (before each)意思是在 每次每一个路由改变的时候都得执行一遍. 它的三个参数: to: (Route路由对象) 即将要进入的目标 路由对象 to对象下面的属性: path params query hash fullPath matched name meta(在matched下,但是本例可以直接用) from: (Route路由对象) 当前导航正要离开的路由 ne

vue 学习一 组件生命周期

先上一张vue组件生命周期的流程图 以上就是一个组件完整的生命周期,而在组件处于每个阶段时又会提供一些周期钩子函数以便我们进行一些逻辑操作,而总体来讲 vue的组件共有8个生命周期钩子 beforeCreate 实例创建前 create 实例创建后 beforeMount dom挂载前 mounted dom挂载后 beforeUpdate 数据更新前 updated 数据更新后 beforeDestroy 组件实例销毁前 destroyed 组件实例销毁后 每一个生命周期,vue做的事情不同,