万商平台 万商平台
首页
  • 介绍

    • 平台介绍
    • 平台费用
    • 平台授权
  • 前端学习

    • JS教程
    • VUE教程
    • ES6教程
    • 常用JS
    • HTML
    • CSS
  • 后端学习

    • C#基础
  • 数据库

    • MSSQL
  • 常用工具

    • Git
    • Markdown
    • npm
  • 基础使用

    • 开始使用
  • 系统配置

    • 系统参数
    • 机构建立
  • 模块中心

    • 模块管理
    • 菜单管理
    • 定制开发
  • 第三方对接

    • 企业号
    • 服务号
    • 阿里云
  • 工作流

    • 工作流介绍
    • 流程设计
    • 工作流原理
  • 数据的定义

    • 有效数据定义
  • 大屏幕

    • 大屏幕介绍
    • 配置屏幕
  • 超级EXCEL BI

    • BI 演示
  • 分析报表

    • 四象限报表
  • 客户群体

    • 我们的客户
  • 在线商城

    • 商城
    • 食堂管理
    • 收银台
  • 医疗服务

    • 预约咨询
  • 房产金额

    • 房产服务
    • 金额APP
  • 公司内部服务

    • 办公用品
  • 经销商

    • 费用管理
    • 巡店管理
    • 软件对接
首页
  • 介绍

    • 平台介绍
    • 平台费用
    • 平台授权
  • 前端学习

    • JS教程
    • VUE教程
    • ES6教程
    • 常用JS
    • HTML
    • CSS
  • 后端学习

    • C#基础
  • 数据库

    • MSSQL
  • 常用工具

    • Git
    • Markdown
    • npm
  • 基础使用

    • 开始使用
  • 系统配置

    • 系统参数
    • 机构建立
  • 模块中心

    • 模块管理
    • 菜单管理
    • 定制开发
  • 第三方对接

    • 企业号
    • 服务号
    • 阿里云
  • 工作流

    • 工作流介绍
    • 流程设计
    • 工作流原理
  • 数据的定义

    • 有效数据定义
  • 大屏幕

    • 大屏幕介绍
    • 配置屏幕
  • 超级EXCEL BI

    • BI 演示
  • 分析报表

    • 四象限报表
  • 客户群体

    • 我们的客户
  • 在线商城

    • 商城
    • 食堂管理
    • 收银台
  • 医疗服务

    • 预约咨询
  • 房产金额

    • 房产服务
    • 金额APP
  • 公司内部服务

    • 办公用品
  • 经销商

    • 费用管理
    • 巡店管理
    • 软件对接
  • 前端学习

    • JS教程

    • VUE学习

      • 基础

        • MVVM模式
        • 生命周期
          • Demo
          • 生命周期图示
        • 计算属性 vs 方法 vs 侦听属性
        • v-if vs v-show
        • 列表渲染之数组、对象更新检测
      • 组件

      • 过渡&动画

      • 可复用性&组合

      • 工具

      • 规模化

      • Vuex

      • 其他

    • ES6 教程

    • 其他JS

    • HTML

    • CSS

  • 后端学习

  • 数据库

  • 常用工具

  • 开发学习
  • 前端学习
  • VUE学习
  • 基础
xugaoyi
2020-02-04
目录

生命周期

# 实例生命周期钩子

实例生命周期钩子API (opens new window)

简单理解,生命周期钩子函数就是vue实例在某一个时间点会自动执行的函数。

<div id="app">{{msg}}</div>

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      msg: 'Vue的生命周期'
    },
    beforeCreate: function() {
      console.group('------beforeCreate创建前状态------');
      console.log("el     : " + this.$el); //undefined
      console.log("data   : " + this.$data); //undefined
      console.log("msg: " + this.msg) //undefined
    },
    created: function() {
      console.group('------created创建完毕状态------');
      console.log("el     : " + this.$el); //undefined
      console.log("data   : " + this.$data); //已被初始化
      console.log("msg: " + this.msg); //已被初始化
    },
    beforeMount: function() {
      console.group('------beforeMount挂载前状态------');
      console.log(this.$el);// <div id="app">{{msg}}</div> 挂载前状态
    },
    mounted: function() {
      console.group('------mounted 挂载结束状态------');
      console.log(this.$el);// <div id="app">Vue的生命周期</div>   msg内容被挂载并渲染到页面
    },
      // 当data被修改之前
    beforeUpdate: function () {
      console.group('beforeUpdate 更新前状态===============》');
      console.log("el     : " + this.$el);
      console.log(this.$el);
      console.log("data   : " + this.$data);
      console.log("msg: " + this.msg);
    },
      // 触发beforeUpdate之后,虚拟DOM重新渲染并应用更新
      // 当data被修改之后
    updated: function () {
      console.group('updated 更新完成状态===============》');
      console.log("el     : " + this.$el);
      console.log(this.$el);
      console.log("data   : " + this.$data);
      console.log("msg: " + this.msg);
    },
      // 调用vm.$destroy() 销毁前
    beforeDestroy: function () {
      console.group('beforeDestroy 销毁前状态===============》');
      console.log("el     : " + this.$el);
      console.log(this.$el);
      console.log("data   : " + this.$data);
      console.log("msg: " + this.msg);
    },
       // 调用vm.$destroy() 销毁后
    destroyed: function () {
      console.group('destroyed 销毁完成状态===============》');
      console.log("el     : " + this.$el);
      console.log(this.$el);
      console.log("data   : " + this.$data);
      console.log("msg: " + this.msg)
    }
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

# Demo

See the Pen 生命周期钩子 by xugaoyi (@xugaoyi) on CodePen.

# 生命周期图示

#Vue
上次更新: 2022/04/26, 16:00:33
MVVM模式
计算属性 vs 方法 vs 侦听属性

← MVVM模式 计算属性 vs 方法 vs 侦听属性→

最近更新
01
正则表达式
05-05
02
平台授权
05-03
03
预约咨询
04-26
更多文章>
万商平台 | Copyright © 2015-2023 宁波万商信息技术有限公司 浙ICP备15014676号-1 浙ICP备15014676号-3
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式