挂载：

beforeCreate

created

beforeMount

mounted：el挂载到实例上时运行

更新：

beforeUpdate

updated

销毁：

beforeDestory

destoryed

各自出现的时机如下列代码所示：在log中查看

<!DOCTYPE html>

<html>

<head>

    <title>

    </title>

</head>

<body>

<div id="app">

  <div>{{msg}}</div>

  <input type="button" name="" value="更新" @click="update">

  <input type="button" name="" value="销毁" @click="destory">

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script type="text/javascript"></script>

<script type="text/javascript">

new Vue({

  el: '#app',

  data: {

    msg:''

  },

  methods:{

    update:function(){

      this.msg="new";

    },

    destory:function(){

      this.$destroy();

    }

  },

  beforeCreate:function(){

    console.log("beforeCreate");

  },

  created:function(){

    console.log("created");

  },

  beforeMount:function(){

    console.log("beforeMount");

  },

  mounted:function(){

    console.log("mounted");

  },

  beforeUpdate:function(){

    console.log("beforeUpdate");

  },

  updated:function(){

    console.log("updated");

  },

  beforeDestroy:function(){

    console.log("beforeDestory");

  },

  destroyed:function(){

    console.log("destroyed");

  }

})

</script>

</body>

</html>

2021-7-12 VUE的生命周期的更多相关文章

  1. vue生命周期图示中英文版Vue实例生命周期钩子

    vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...

  2. 8.vue的生命周期

    Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...

  3. 如何解释vue的生命周期才能令面试官满意？

    当面试官问:"谈谈你对vue的生命周期的理解",听到这句话你是不是心里暗自窃喜:这也太容易了吧,不就是beforeCreate.created.beforeMount.mounte ...

  4. vue之生命周期

    vue的生命周期的过程提供了我们执行自定义逻辑的机会,好好理解它的生命周期,对我们很有帮助. 1.vue实例的生命周期(vue2.0) 2.生命周期描述:(参考截图) 3.例子 window.vm = ...

  5. vue的生命周期的理解

    Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...

  6. vue笔记-生命周期

    生命周期钩子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  7. vue 关于生命周期

    序言: 1. vue 单组件的生命周期: 2. vue 父子组件的生命周期: 3. axios 异步请求 与 vue 的组件周期: 一.vue 每个组件的生命周期 关于每个组件的生命周期,官方文档里也 ...

  8. Vue：生命周期

    一.什么是vue的生命周期 Vue中的生命周期是指组件从创建到销毁的一系列过程.看下面这张官方文档的图: 从图片中可以看出Vue的整个生命周期包括8个状态,按照先后顺序分别为: beforeCreat ...

  9. 深入理解Vue的生命周期

    谈到Vue的生命周期,相信许多人并不陌生.但大部分人和我一样,只是听过而已,具体用在哪,怎么用,却不知道.我在学习vue一个多礼拜后,感觉现在还停留在初级阶段,对于mounted这个挂载还不是很清楚. ...

  10. vue笔记 - 生命周期第二次学习与理解

    对于刚接触vue一两个月.才仅仅独立做过一两个vue项目的小白来说,以前一直自我感觉自己知道vue的生命周期, 直到前两天去面试,面试官让我说一下vue的生命周期... 其实我的心中是有那张图的,但是 ...

随机推荐

  1. [双目视差] 立体匹配算法推理 - SGBM算法（二）

    文章目录 立体匹配算法推理 - SGBM算法(二) 一.SGM算法 二. 后处理 立体匹配算法推理 - SGBM算法(二) 一.SGM算法 SGM算法的全称为Semi-Global Matching, ...

  2. Llinux系统(Centos/Ubuntu/Debian)弹性云系统盘扩容方法

    警告: 1.调整过分区管理方式的,例如lvm管理方式,请忽略此教程. 2.ubuntu18系统暂不支持脚本扩容,请手动扩容,参看下面ubuntu18部分,用parted操作 脚本自动处理(推荐) SS ...

  3. 获取scrollTop的方法(兼容所有浏览器)

    /** *获取scrollTop的值,兼容所有浏览器 */ function getScrollTop() { var scrollTop = document.documentElement.scr ...

  4. 2020-09-26：请问rust中的&和c++中的&有哪些区别？

    福哥答案2020-09-26:#福大大架构师每日一题# 变量定义:c++是别名.rust是指针.取地址和按位与,c++和rust是相同的. c++测试代码如下: #include <iostre ...

  5. 2021-07-14：接雨水。给定 n 个非负整数表示每个宽度为 1 的柱子的高度图，计算按此排列的柱子，下雨之后能接多少雨水。

    2021-07-14:接雨水.给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水. 福大大 答案2021-07-14: 左右指针向中间移动.左指针是左边柱 ...

  6. Vue入门浅析

    title: vue入门浅析 author: Sun-Wind date: May 14,2022 写这篇博文的目的在于为初学vue的同学对vue有一些更进一步的了解 读这篇博文前,您应该至少安装了v ...

  7. ComboBox1 绑定手动创建的DataTable

    '************************************************** '*过程名称:DT_PAFORMAL '*功能说明:员工类别 '**************** ...

  8. Manjaro linux 安装svn 并在文件管理器里显示相关图标

    需要先安装svn linux版打开终端执行 sudo pacman -S svn 安装完成后执行一下 svn --version 出现这个就说明svn已经安装完成了,这个时候我们可以执行 svn ch ...

  9. GIT多场景下使用

    git对于大家应该都不太陌生,熟练使用git已经成为程序员的一项基本技能,尽管在工作中有诸如 Sourcetree这样牛X的客户端工具,使得合并代码变的很方便.但找工作面试和一些需彰显个人实力的场景, ...

  10. odoo开发教程六：工作流、安全机制、向导

    一:工作流 工作流是与业务流程相关联的模型,可用于跟踪工序的动态演变过程. 工作流.活动(节点或操作).转换通常在xml里以record定义.在工作流中处理的单个流程称为工作项. 与模型关联的工作流是 ...