Vue 生命周期和钩子函数

最新推荐文章于 2022-10-19 08:22:44 发布
最新推荐文章于 2022-10-19 08:22:44 发布
阅读量324 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20282263/article/details/80893393
版权

Vue 生命周期和钩子函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: "1"
            },
            beforeCreate: function () {
                console.log('beforeCreate');
                console.log("DOM = " + (this.$el && this.$el.innerText));
                console.log("$data.message = " + (this.$data && this.$data.message));
                console.log('-----------------------------------------------');
            },
            created: function () {
                console.log('created');
                console.log("DOM = " + (this.$el && this.$el.innerText));
                console.log("$data.message = " + (this.$data && this.$data.message));
                console.log('-----------------------------------------------');
            },
            beforeMount: function () {
                console.log('beforeMount');
                console.log("DOM = " + (this.$el && this.$el.innerText));
                console.log("$data.message = " + (this.$data && this.$data.message));
                console.log('-----------------------------------------------');
            },
            mounted: function () {
                console.log('mounted');
                console.log("DOM = " + (this.$el && this.$el.innerText));
                console.log("$data.message = " + (this.$data && this.$data.message));
                console.log('-----------------------------------------------');
            },
            beforeUpdate: function () {
                console.log('beforeUpdate');
                console.log("DOM = " + (this.$el && this.$el.innerText));
                console.log("$data.message = " + (this.$data && this.$data.message));
                console.log('-----------------------------------------------');
            },
            updated: function () {
                console.log('updated');
                console.log("DOM = " + (this.$el && this.$el.innerText));
                console.log("$data.message = " + (this.$data && this.$data.message));
                console.log('-----------------------------------------------');
            },
            beforeDestroy: function () {
                console.log('beforeDestroy');
                console.log("DOM = " + (this.$el && this.$el.innerText));
                console.log("$data.message = " + (this.$data && this.$data.message));
                console.log('-----------------------------------------------');
            },
            destroyed: function () {
                console.log('destroyed');
                console.log("DOM = " + (this.$el && this.$el.innerText));
                console.log("$data.message = " + (this.$data && this.$data.message));
                console.log('-----------------------------------------------');
            }
        })
    </script>
</body>

</html>

这里写图片描述

  • beforeCreate : 组件实例刚被创建。属性和 DOM 都没有被初始化。
  • created : 组件实例创建完成。属性绑定成功、DOM 未初始化。
  • beforeMount : 模板挂载之前。属性绑定成功、DOM 未渲染。
  • mounted : 模板挂载完成。属性绑定成功、DOM 渲染成功。
  • beforeUpdate : 组件更新之前。属性更新成功、DOM 未更新
  • updated : 组件更新完成。属性和 DOM 更新成功
  • beforeDestory : 组件销毁前调用。属性和 DOM 依然存在。
  • destoryed : 组件已销毁。属性和 DOM 依然存在。
左手121
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3生命周期--钩子函数图解（中文版）.svg
11-02
vue3生命周期--钩子函数图解（中文版）
Vue 2.0中生命周期与钩子函数的一些理解
08-30
主要给大家介绍了关于Vue 2.0中生命周期与钩子函数的相关资料，对大家学习或者使用vue2.0具有一定的参考学习价值，需要的朋友们下面随小编一起来看看吧。
生命周期和钩子函数解析
weixin_58437923的博客
04-27 2200
首先解释一下什么是生命周期，类比一下，如同人的一生有幼儿期、青春期、更年期、老年期一样，Vue.js代码的运行也有一个类似的周期，这里称之为生命周期。生命周期就如同一个有序的流程，就像代码从下往上运行一样，想象一下是不是就像一条挂起来的绳索从上往下，但是在绳索上面每间隔一段距离就有一个挂钩，可以从上往下在挂钩上面挂上物品，称之为钩子函数。在每个阶段运行的代码就是钩子函数的大括号包裹的代码。 一个完整的生命周期大约有十多个钩子函数，分别为beforeRouteLeave、beforEach、beforeEnt
【Vue】8 - 声明周期 / 钩子函数 、实例上的方法
充电五分钟...
02-13 345
文章目录1. 声明周期/钩子函数2. 实例上的方法 1. 声明周期/钩子函数 声明周期：从出生到死亡 beforeCreate --出生之前 created – 出生后 beforeMount – 挂载之前 mounted – 挂载后 beforeUpdate – 更新前 updated – 更新后 beforeDestroy – 死亡前 destroyed – 死亡后 钩子函数：初始化时会调...
Vue声明周期以及钩子函数
czj1049561601的博客
03-07 315
Vue实例从创建到销毁的过程，就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。 一般情况下： 会在created中做一些网络请求，Vue对象创建好后，就会在created中请求一些数据，然后把这些数据放在data中，再在DOM中进行渲染。 Vue.js官网中声明周期部分链接导航 vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。 在组件中常用的方法有
响应式和生命周期
qq_44810144的博客
06-22 124
Vue响应式指的是： 组件的data发生变化，立刻触发试图的更新 原理： Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式，通过Object.defineProperty来劫持数据的setter，getter，在数据变动时发布消息给订阅者，订阅者收到消息后进行相应的处理。 通过原生js提供的监听数据的API，当数据发生变化的时候，在回调函数中修改dom 核心API：Object.defineProperty Object.defineProperty API的使用 作用: 用来定义对象属性
Vue中的声明周期钩子函数
行无所至，学无所尽。
11-19 221
何为生命周期 每个Vue实例在被创建时总要经过一系列的初始化过程：创建实例、装载模板、渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi
vue生命周期与钩子函数简单示例
12-29
本文实例讲述了vue生命周期与钩子函数。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>www.jb51.net vue生命周期与钩子函数...
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
本文通过实例代码给大家介绍了Vue父子组件生命周期执行顺序及钩子函数的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
生命周期钩子函数
一个菜鸡的博客
10-19 431
【代码】生命周期钩子函数。
生命周期和钩子函数
在路上...Try Fly
04-21 1983
每一个vue实例在创建之前都需要一系列的初始化过程，如实例需要数据观测（data observer），编译模板，挂载实例到DOM上，以及数据更新和DOM渲染。 create（创建）： beforeCreate 创建前 ； created 创建结束 mount（挂载）： beforeMount ；mounted update(更新)： beforeUpdate；Updated
vue笔记 - 声明周期和钩子函数
weixin_41293999的博客
04-07 213
生命周期 生命周期函数就是 Vue 实例在某一个时间点会自动执行的函数。 实例化的时特定阶段调用特定方法，调用的这个方法就是钩子函数。 钩子函数 钩子函数功能类似于回调函数, 但是又有区别. 区别: 钩子函数: js派发函数监听事件 => 监听函数(钩子函数) => 函数主动寻找事件 => 钩子函数 回调函数: js为dom事件预留的函数 => ...
Vue2.0 探索之路——生命周期和钩子函数的一些理解
sexy_squirrel的博客
03-07 3万+
前言在使用vue一个多礼拜后，感觉现在还停留在初级阶段，虽然知道怎么和后端做数据交互，但是对于mounted这个挂载还不是很清楚的。放大之，对vue的生命周期不甚了解。只知道简单的使用，而不知道为什么，这对后面的踩坑是相当不利的。因为我们有时候会在几个钩子函数里做一些事情，什么时候做，在哪个函数里做，我们不清楚。于是我开始先去搜索，发现vue2.0的生命周期没啥文章。大多是1.0的版本介绍。最后还是
vue的声明周期钩子函数
weixin_43961899的博客
12-17 142
https://blog.csdn.net/weixin_43606158/article/details/90116309
react生命周期钩子函数
codezha的博客
04-24 247
react生命周期钩子函数 挂载 组件被实例化并挂载在DOM树 constructor() 作用： 组件被实例化时，构造函数就被最先执行，constructor第一行必须写super(props)语句，否则会报错 应该： 1.初始化组件的初始状态 2.bind绑定函数，修正this指向（建议箭头函数修正） 不应该： 1.向后台发送请求并更新组件状态 2.使用this.set...
vue生命周期钩子函数详解
热门推荐
小熊的博客
07-26 9万+
先放一张官网生命周期图： vue有8种生命周期函数： 钩子函数 触发的行为 在此阶段可以做的事情 beforeCreadted vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。 加loading事件 created vue实例的数据对象data有了，$el还没有 结束loading、请求数据为mounted...
生命周期（钩子函数）
从零出发
06-25 1万+
生命周期（钩子函数）一、生命周期过程解释实例创建之后，初始化事件和生命周期，而后触发beforeCreate。beforeCreate，当前实例创建之前，很少操作，一般用于加载动画，比如创建一个菊花旋转。created表示当前实例创建完成，组件、属性等初始化完成，一般封装一个方法，比如getDataFromNetwork，从网络请求数据。this.getDataFromNetwork()调用，触发...
Vue.js生命周期函数（钩子函数）及常用指令
xiaoxiaoshuai__的博客
03-20 5226
Vue.js生命周期函数（钩子函数）及常用指令Vue.js的生命周期函数 beforeCreate、create 、beforeMount 、mounted 、beforeUpdate 、update 、beforeDestroy、destroy,及常用指令v-model 、v-if 、v-show 、v-else 、v-bind 、v-on 、v-for 、v-once等一、生命周期函数    ...
vue生命周期和钩子函数
最新发布
09-13
Vue组件的生命周期包括以下阶段和对应的钩子函数： 1. 创建阶段： - `beforeCreate`：在实例被创建之初，数据观测和事件配置之前调用。 - `created`：实例已经创建完成，数据观测和事件配置完成，但尚未挂载到...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值