挂载：

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. HTML中meta标签的那些属性

    <meta> 标签是 HTML 中用于描述网页元信息的元素.它位于 <head> 部分,不会显示在页面内容中,但对于浏览器.搜索引擎等具有重要作用.主要作用有:定义文档的字符编 ...

  2. Xposed框架关于无法在模拟器中下载和激活的问题

    开头 最近xposed不知道出了什么问题,导致安装的时候一直在失败,所以记录下网上参考到的并用于实践中 安装软件 1.模拟器 逍遥游模拟器 安卓7.1 版本.下载地址为: https://www.52 ...

  3. npm install报错node-sass@7.0.1 postinstall: `node scripts/build.js`

    在控制台执行 即可 npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

  4. Vulnhub Broken

    Vulnhub Broken 一.操作文档 [Vulnhub - Broken-Gallery writeup (mzfr.me)](https://blog.mzfr.me/vulnhub-writ ...

  5. 计算机网络OSI七层参考模型和tcp/udp五层参考模型

    计算机网络OSI七层参考模型和tcp/udp五层参考模型 目录 一.OSI七层参考模型和TCP/UDP五层参考模型 1.应用层 2.表示层 3.会话层 4.传输层 5.网络层 6.数据链路层 7.物理 ...

  6. 手把手实践丨基于STM32+华为云设计的智慧烟感系统

    摘要:当前基于STM32和华为云,设计了一种智慧烟感系统,该系统可以检测烟雾,同时将检测到的数据上传到云端进行处理和分析. 本文分享自华为云社区<基于STM32+华为云设计的智慧烟感系统> ...

  7. ABP - 缓存模块(1)

    1. 与 .NET Core 缓存的关系和差异 ABP 框架中的缓存系统核心包是 Volo.Abp.Caching ,而对于分布式缓存的支持,abp 官方提供了基于 Redis 的方案,需要安装 Vo ...

  8. 2023-06-06：给你二叉树的根结点 root ，请你设计算法计算二叉树的 垂序遍历 序列。 对位于 (row, col) 的每个结点而言， 其左右子结点分别位于 (row + 1, col -

    2023-06-06:给你二叉树的根结点 root ,请你设计算法计算二叉树的 垂序遍历 序列. 对位于 (row, col) 的每个结点而言, 其左右子结点分别位于 (row + 1, col - ...

  9. 一次有关 DNS 解析导致 APP 慢的问题探究

    目录 一.业务背景 二. 问题 三.问题排查 3.1.问题一: 基于DNS 延迟的解析 3.2.问题二:HTTPDNS侧 HTTPDNS基础理论 相关问题 四.优化方向 4.1.域名解析配置 4.2. ...

  10. STL-vector(ACM)

    1.长度可变的数组 2.这里不是很懂,v.size() 代码源里说这个v.size()是无符号类型的,使用时要说明类型, 但是我在使用时并没有出现warning,有大佬知道原因吗? 前置板子 3.ve ...