Vue的生命周期

Vue的生命周期

Vue生命周期的钩子函数:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    {{name}}
</div>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            name:"eric"
        },
        methods:{
            init:function(){
                console.log(123)
            }
        },
        beforeCreate(){
            console.group("BeforeCreate");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        created(){
            console.group("Created");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        beforeMount(){
            console.group("BeforeMount");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        mounted(){
            console.group("Mounted");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        beforeUpdate(){
            console.group("BeforeUpdate");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        updated(){
            console.group("Updated");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        beforeDestroy(){
            console.group("BeforeDestroy");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        destroyed(){
            console.group("Destroyed");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        }
    })
</script>
</body>
</html>

Vue的生命周期的钩子 LifeCycle hooks

数据监听之前:beforeCreate();

监听数据变化:created();

虚拟dom加载完成前:beforeMount();

页面真实加载完成后:mounted();

数据改变前执行的函数:beforeUpdate();

数据改变后执行的函数:updated();

Vue实例销毁前:beforeDestroy();

Vue实例销毁后:destroyed()s

(0)

相关推荐

  • vue+elementui简约登录

    一.导入js,css <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.co ...

  • 前端Vue(五)——Vue生命周期

    Vue生命周期 一.介绍 官方术语:生命周期钩子====>也是:生命周期函数 生命周期图网址:https://cn.vuejs.org/images/lifecycle.png Vue生命周期分 ...

  • 诚之和:怎么用Vue实现大屏页面的屏幕自适应

    本篇内容介绍了"怎么用Vue实现大屏页面的屏幕自适应"的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅 ...

  • Vue父子组件生命周期执行顺序及钩子函数的理解

    每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数), ...

  • Element+vue.js 实现文件模板下载,和Upload 上传文件带参数

    一开始自己也是第一次用Element+vue.js 做上传文件功能,走了点弯路.经过功能实现后整合了一下,给需要的朋友们参考一下. 功能页面如下: 下面是此功能的完整代码: HTML:(样式由于是文件 ...

  • 轻量级 Vue 拖动排序组件Awe-dnd

    awe-dnd 基于 vue2.x 拖放排序组件.让你轻松实现网页元素/图片随意拖动排序效果. 功能效果有些类似比较强大的一款vue拖拽组件vuedraggable. https://github.c ...

  • Vue3.x 从零开始(三)—— 使用 Composition API 优化组件

    在<Vue3.x 从零开始(二)>中已经介绍了 Mixin 这种抽取公共逻辑的方式 但 Mixin 提供的数据或函数,无法在组件中直观的体现出来 这导致组件的维护人员需要非常熟悉被引入的 ...

  • Vue 阻止事件冒泡

    开发环境 Win 10 element-ui  "2.8.2" Vue 2.9.6 事件冒泡简介 如下图,当我们点击页面某个元素时,会产生点击事件,事件由外到内,逐层递进(事件捕获 ...

  • 前端面试题整理——手写简易jquery

    class jQuery { constructor(selector) { const result = document.querySelectorAll(selector) console.lo ...

  • 【Vue】 生命周期, created,mounted, methods , computed , watched

    生命周期: 用通俗的语言来说,就是Vue中实例或者组件从创建到消灭中间经过的一系列过程. beforecreate : 一般使用场景是在加 loading事件 的时候 created :处于loadi ...

  • Vue的options及生命周期

    6.Vue的options选项 options中可以包含哪些? 具体的详细解析可以查看这个地址: https://cn.vuejs.org/v2/api/#optionMergeStrategies ...

  • Vue生命周期,我奶奶看了都懂了

    最近一直在学习Vue,而vue生命周期是我们不可能绕开的一个很核心的知识点,今天来简单的梳理一下大概的内容. 一.钩子函数 在一开始学习的时候,总有钩子函数这个名词冒出来,而且在vue官网文档中也频繁 ...

  • 员工生命周期管理

    员工的生命周期是什么? 员工生命周期是涵盖了员工与其工作所在组织之间的整个关系,这包括吸引阶段,即人们熟悉公司的过程,一直持续到他们离开组织为止.    在员工与企业之间这种持续关系中,我们分为7个阶 ...

  • 动力电池全生命周期管理

    动力电池全生命周期管理

  • 【原创】基于生命周期的工艺验证之工艺设计阶段

    手把手教您把控技术转移.工艺验证和清洁验证的相互关系学习通道扫描右方二维码即刻报名01 基于生命周期的工艺验证 基于生命周期的工艺验证方法,将工艺研发/设计.商业生产工艺验证.常规商业化生产中控制状态 ...

  • 企业在不同的时期,生存法则是不一样的,如何突破生命周期呢?

    △是新朋友吗?记得先给余导说商点个关注哦- 我们一个人的生命周期有婴儿期, 发育期.青春期.成长期, 然后有可能不长身高了,慢慢步入成熟期. 公司和人一样,也会经历这么一个过程. 每个时期有每个时期不 ...