挂载：

beforeCreate

created

beforeMount

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

更新：

beforeUpdate

updated

销毁：

beforeDestory

destoryed

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>
  5.     </title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.   <div>{{msg}}</div>
  10.   <input type="button" name="" value="更新" @click="update">
  11.   <input type="button" name="" value="销毁" @click="destory">
  12. </div>
  13. <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  14. <script type="text/javascript"></script>
  15. <script type="text/javascript">
  16. new Vue({
  17.   el: '#app',
  18.   data: {
  19.     msg:''
  20.   },
  21.   methods:{
  22.     update:function(){
  23.       this.msg="new";
  24.     },
  25.     destory:function(){
  26.       this.$destroy();
  27.     }
  28.   },
  29.   beforeCreate:function(){
  30.     console.log("beforeCreate");
  31.   },
  32.   created:function(){
  33.     console.log("created");
  34.   },
  35.   beforeMount:function(){
  36.     console.log("beforeMount");
  37.   },
  38.   mounted:function(){
  39.     console.log("mounted");
  40.   },
  41.   beforeUpdate:function(){
  42.     console.log("beforeUpdate");
  43.   },
  44.   updated:function(){
  45.     console.log("updated");
  46.   },
  47.   beforeDestroy:function(){
  48.     console.log("beforeDestory");
  49.   },
  50.   destroyed:function(){
  51.     console.log("destroyed");
  52.   }
  53. })
  54. </script>
  55. </body>
  56. </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. flex:1的情况下，overflow:auto没有生效的问题

    flex:1的元素的父元素必须保证高度或者宽度有具体的数值:如果父元素的高度或者宽度也是flex:1自适应的,最好在父元素上也设置overflow:auto,这样子元素的overflow:auto生效 ...

  2. IE盒模型和标准盒模型之间的差别

    1.W3C标准盒子模型 w3c盒子模型的范围包括margin.border.padding.content,并且content部分不包含其他部分 2.IE盒子模型 IE盒子模型的范围包括margin. ...

  3. C# 闭包类对弱引用的坑

    闭包.弱引用的简单概念,大佬们描述的很多,有不了解的可以看看: 理解C#中的闭包 - 黑洞视界 - 博客园 (cnblogs.com) C#弱引用(WeakReference) - 简书 (jians ...

  4. 微信小程序搭建总结

    小程序搭建总结 适合有基础的同志查阅,初学者也可以看看我的零基础小程序文章,需要总结文档留言给我或者公众号里面都有 1.项目的技术选型 第三方框架 1.腾讯 wepy 类似vue 2.美团 taro ...

  5. Yolov5 根据自己的需要更改 预测框box和蒙版mask的颜色

    1.首先找到项目中 utils/plots.py 文件,打开该代码 将原来的 Colors类注释掉(或删掉),改成如下Colors类 class Colors: def __init__(self): ...

  6. Oracle 定时任务job实际应用

    目录 一.Oracle定时任务简介 二.dbms_job涉及到的知识点 三.初始化相关参数job_queue_processes 四.实际创建一个定时任务(一分钟执行一次),实现定时一分钟往表中插入数 ...

  7. Stream流根据属性去重

    List根据属性去重 创建一个user集合 User user1 = new User("user1", 18, "AAA"); User user2 = ne ...

  8. 2023 5.14 虚拟环境安装Linux

    1.安装配置VM虚拟机 vmare workstation 虚拟机是一款桌面计算机虚拟软件 让用户能够在单一主机上同事运行多个操作系统 1.每个虚拟操作系统的硬盘与数据都是独立 2.多台虚拟机可以构建 ...

  9. 代码随想录算法训练营Day18 二叉树

    代码随想录算法训练营 代码随想录算法训练营Day18 二叉树| 513.找树左下角的值 112. 路径总和 113.路径总和ii 106.从中序与后序遍历序列构造二叉树 105.从前序与中序遍历序列构 ...

  10. Pandas 加载数据的方法和技巧

    哈喽大家好,我是咸鱼 相信小伙伴们在学习 python 数据分析的过程中或多或少都会听说或者使用过 pandas pandas 是 python 的一个拓展库,常用于数据分析 今天咸鱼将介绍几个关于 ...