生命周期的钩子函数 主要有以下几种

  1. beforeCreate
  2. created
  3. beforeMount
  4. mounted
  5. beforeUpdate
  6. updated
  7. activated
  8. deactivated
  9. beforeDestroy
  10. destroyed
  11. errorCaptured     * 不经常用我们这里不介绍

具体介绍 看代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <meta name="viewport" content="width=device-width ,initial-scale=1">
  7.     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  8. </head>
  9. <body>
  10.  
  11. <div id="app">
  12.     <!--用子-->
  13.     <App></App>
  14. </div>
  15.  
  16. <script>
  17.     // 全局组件
  18.     Vue.component('Vlife', {
  19.         // 组件中的data一定是一个函数
  20.         data() {
  21.             return {
  22.                 msg: '生命周期'
  23.             }
  24.         },
  25.         methods: {
  26.             handlerClick() {
  27.                 this.msg = '晓强'
  28.             }
  29.         },
  30.         template: `<div>
  31.                     <button @click="handlerClick">改变（beforeUpdate和Update）</button>
  32.                     {{msg}}
  33.                   </div>`,
  34.         beforeCreate() {
  35.             console.log('组件创建之前', this.$data)
  36.         },
  37.         created() {
  38.             // 非常重要的事情，在此时发送ajax 请求后端的数据 然后赋值给msg
  39.             console.log('组件创建完成', this.$data)
  40.         },
  41.         beforeMount() {
  42.             // 在挂载开始之前被调用  实际是还没有被加载出来
  43.             console.log('DOM在挂载之前', document.getElementById('app'))
  44.         },
  45.         mounted() {
  46.             // DOM挂载完成 也可以这发送 ajax 网页图片处
  47.             console.log('DOM挂载完成', document.getElementById('app'))
  48.         },
  49.         beforeUpdate() {
  50.             // 改变当前的元素 有个按钮在Vlife里[获取原始的DOM]
  51.             console.log('更新之前的DOM', document.getElementById('app').innerHTML)
  52.         },
  53.         updated() {
  54.             // 获取最新的DOM
  55.             console.log('更新完成之后的DOM', document.getElementById('app').innerHTML)
  56.         },
  57.         beforeDestroy() {
  58.             // 销毁之前 在父组件中
  59.             console.log('销毁之前')
  60.         },
  61.         destroyed() {
  62.             // 销毁之后
  63.             console.log('销毁之后')
  64.         },
  65.         activated() {
  66.             // 激活           这两个方法要配合 keep-alive 保持活跃状态相当于把组件放在一个缓存中
  67.             // 可以用在一个页面退回到另一个页面 还保持原来的状态
  68.             console.log('组件被激活了')
  69.         },
  70.         deactivated() {
  71.             // 停用           这两个方法要配合 keep-alive 保持活跃状态相当于把组件放在一个缓存中
  72.             console.log('组件被停用了')
  73.  
  74.         },
  75.     });
  76.  
  77.     //     生子
  78.     const App = {
  79.         data() {
  80.             return {
  81.                 isShow: true
  82.             }
  83.         },
  84.         methods: {
  85.             clickHandler() {
  86.                 this.isShow = !this.isShow
  87.             }
  88.         },
  89.         template: `<div>
  90.                     <!--<Vlife v-if="isShow"></Vlife>-->
  91.                     <keep-alive><Vlife v-if="isShow"></Vlife></keep-alive>
  92.                     <button @click="clickHandler">改变组件的生死（beforeDestroy）</button>
  93.                     </div>`
  94.     };
  95.  
  96.     let app = new Vue({
  97.         el: '#app',
  98.         data: {},
  99.         template: ``,
  100.         // 挂子
  101.         components: {
  102.             App
  103.         }
  104.     })
  105. </script>
  106. </body>
  107. </html>

vue学习（五）生命周期 的钩子函数的更多相关文章

  1. vue学习之生命周期和钩子函数

    参考文章:Vue2.0 探索之路——生命周期和钩子函数的一些理解 抛出问题: 我们有时候会在几个钩子函数里做一些事情,那么什么时候做,该在哪个函数里做? 生命周期简介 结合代码看el 和 data以及 ...

  2. Vue笔记：生命周期和钩子函数

    前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...

  3. Vue实例的生命周期（钩子函数）

    Vue实例的生命钩子总共有10个 先上官方图: 下面时一个vue实例定义钩子函数的例子: var app=new Vue({ el:'#app', beforeCreate:function(){ c ...

  4. Vue 中的生命周期和钩子函数

    生命周期: beforeCreate:el 和 data 并未初始化 (此方法不常用) created:完成了 data 数据的初始化,el的初始化未完成.用来发送ajax beforeMount:( ...

  5. day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等

      本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...

  6. day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等

    Vue学习四之过滤器.钩子函数.路由.全家桶等   本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...

  7. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  8. Vue（3）- 安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用

    一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...

  9. Vue 3 --安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用

    一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...

随机推荐

  1. Python学习第五课——基本数据类型一之list

    列表(list) # 列表 (list) # 创建列表 列表里面可以是数字.字符串.列表.布尔值...什么都可以 li = [1, 2, 3, "hanhan", "ju ...

  2. Keras入门——（3）生成式对抗网络GAN

    导入 matplotlib 模块: import matplotlib 查看自己版本所支持的backends: print(matplotlib.rcsetup.all_backends) 返回信息: ...

  3. 二十三、java连接oracle数据库操作：jdbc

    1.jdbc 1) 含义:JDBC是java语言连接数据库,Java Date Base Connectivity2) jdbc的本质:在编程时java程序会去连接不同的数据库,而每个数据库的底层的实 ...

  4. IP、TCP、DNS

    负责传输的IP协议 按层次分,IP网际协议位于网络层.几乎所有使用网络的系统都会用到 IP 协议. “IP”和“IP地址不同”,“IP”是一种协议的名称.IP 协议的作用是把各种数据包传送给对方.而要 ...

  5. php 键值数组搜索查询

    php  键值数组查询 ,需要先将其转换为纯数组,然后才能用in_array 进行搜索. $arr_combos = [ ['id' => '1001', 'value' => 'zs' ...

  6. vld扩展

    PHP代码的执行实际上是在执行代码解析后的各种opcode.通过vld扩展可以很方便地看到执行过程中的opcode. 一.安装vld扩展 git clone https://github.com/de ...

  7. 设备树DTS 学习：4-编写实战

    背景 讲完设备树的有关概念以及语法以后,我们接下来就让 我们的驱动 使用 设备树. ref : <内核学习笔记14:内核设备树学习>.<u-boot对设备树的支持> 测试代码 ...

  8. arm linux 移植支持 HP打印机

    背景 由于业务需要,需要hi3531d主板上加入对于HP打印机的支持. 通过与产品经理,技术主管的沟通:通用支持是不现实的,只要求彩色打印,先不考虑打印机的价格,只要支持一款打印机即可. 注意: Li ...

  9. zabbix_get工具基础使用

    zabbix_get工具基础使用 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.zabbix_get工具概述 我们在使用zabbix server监控zabbix agent端 ...

  10. UVALive 6853（dp）

    题意:已知有n个城市,某歌手每月进行一场演唱会,共持续c个月,可连续两个月在同一个城市.城市间的路费已给出,且已知每个城市在第k(1<=k<=c)个月举办演唱会的所得利润,求最终的最大利润 ...