一、概念

  vue生命周期,又叫生命周期钩子函数,是组件从创建到销毁的过程。

二、主要的八大生命周期

  1.首先,为方便观察每个周期的特点,我们模拟一个"one"组件的创建与销毁,并在八个生命周期中分别打印挂载点、属性、方法以及真实的DOM结构,通过输出结果进行分析。

 <div id="myApp">
<input type="button" value="创建与销毁" @click="isShow= !isShow">
<one v-if="isShow"></one>
</div>
<script>
new Vue({
el:"#myApp",
data:{
isShow:true
},
components: {
one:{
template:`
<div>
<input type="text" v-model="userName">
<p ref="my">{{num}}</p>
</div>
`,
data(){
return {
userName:"生命周期",
num:0,
}
},
methods:{
fn(){
console.log(this.userName);
}
},
beforeCreate(){
console.group("创建之前beforeCreate**************************");
console.log(this.$el); //挂载点
console.log(this.userName); //属性
console.log(this.fn); //方法
console.log(this.$refs.my); //通过this.$refs可以访问真实的DOM结构
console.groupEnd();
},
created(){
console.group("创建之后created*******************************");
console.log(this.$el);
console.log(this.userName);
console.log(this.fn);
console.log(this.$refs.my);
console.groupEnd();
},
beforeMount(){
console.group("挂载之前beforeMount********************************");
console.log(this.$el);
console.log(this.userName);
console.log(this.fn);
console.log(this.$refs.my);
console.groupEnd();
},
mounted(){
console.group("挂载之后mounted********************************");
console.log(this.$el);
console.log(this.userName);
console.log(this.fn);
console.log(this.$refs.my);
console.groupEnd();
},
beforeUpdate(){
console.group("更新视图数据之前beforeUpdate********************************");
console.log(this.$el);
console.log(this.userName);
console.log(this.fn);
console.log(this.$refs.my.innerText);
console.groupEnd();
},
updated(){
console.group("更新视图数据之后updated********************************");
console.log(this.$el);
console.log(this.userName);
console.log(this.fn);
console.log(this.$refs.my.innerText);
console.groupEnd();
},
beforeDestroy(){
clearInterval(this.timer);
console.group("vue实例销毁之前beforeDestroy********************************");
console.log(this.$el);
console.log(this.userName);
console.log(this.fn);
console.log(this.$refs.my.innerText);
console.groupEnd();
},
destroyed(){
console.group("vue实例销毁之后destroyed********************************");
console.log(this.$el);
console.log(this.userName);
console.log(this.fn);
console.log(this.$refs.my);
console.groupEnd();
} }
}
})
</script>

  2.八大生命周期的特点

  • beforeCreate() 创建前:当前生命周期函数主要用于初始化工作,此时可以创建一个loading;

  

  • created() 创建后:可以访问到vm身上所有属性和方法;会将data和methods身上所有的属性和方法都挂载在vm的实例身上;会在data身上所有属性添加getter/setter方法,因此若要进行前后端数据交互时必须在当前生命周期中进行"响应式原理";若数据未提前在data中进行绑定,那么这个属性身上不会有getter/setter方法,数据便不会动态改变;

  

  • beforeMount() 挂载前:数据和模板还未进行结合,访问不到真实的DOM结构,可以对数据做最后的的修改;

  

  • mounted() 挂载后:数据和模板已经结合,可以通过this.$refs访问到真实的DOM结构;

  

  • beforeUpdate() 更新前:当data中的数据发生改变时会执行,可以访问到真实DOM结构、对数据做最后的修改,当前生命周期函数中的数据和模板还没更新完成;

  

  • updated() 更新后:数据更新后形成最新的DOM结构,当前是一个频繁触发的函数,因此要做一些时间绑定或实例化时,需要做一个提前判断;

  

  • beforeDestroy() 销毁前:可以继续访问到真实DOM结构以及data中的数据,通常在这个生命周期函数中做一些事件绑定/移除的操作;

  

  • destroyted() 销毁后:断开DOM与数据之间的关联,访问不到真实的DOM结构;

  

  3.注意:

  • 多次执行的生命周期函数:beforeUpdate()、updated()
  • 组件第一次创建时会执行:beforeCreate()、created()、beforeMount()、mounted()

【Vue】 ----- 浅谈vue的生命周期的更多相关文章

  1. 浅谈Django的生命周期和CBF和FBC

    Django的生命周期和CBF和FBC 对于所有的web框架来说本质就是一个socket服务端,浏览器是socket客户端,客户端和服务端通信,字符串(Http协议):请求头和请求体 响应头+响应体 ...

  2. 浅谈Vue.js

    作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的 ...

  3. 浅谈Vue不同场景下组件间的数据交流

    浅谈Vue不同场景下组件间的数据“交流”   Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...

  4. Vue浅谈

    谈Vue 最近在学习Vue相关的知识点并且也做一些练手,就在学习过程中出现的各种坑爹的地方做一个总结!之后再遇到也不会抓瞎. 1.Vue工程的安装 (1)首先先安装node.js这是Vue的运行基础. ...

  5. 【Vue】浅谈Vue不同场景下组件间的数据交流

    浅谈Vue不同场景下组件间的数据“交流”   Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...

  6. Vue 实例详解与生命周期

    Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...

  7. 浅谈Vue响应式(数组变异方法)

    很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...

  8. 浅谈Vue下的components模板

    浅谈Vue下的components模板在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单 ...

  9. Vue – 基础学习(1):对生命周期和钩子函的理解

    一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...

  10. 浅谈Vue中计算属性(computed)和方法(methods)的差别

    浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...

随机推荐

  1. spot 状压dp

    题目大意:数轴上有n个泥点,共有m个木板,求最少用几个木板可以覆盖全部泥点,并求最优方案数(n,m<=15) 看范围,肯定是状压 f[i][j]表示前i个泥点都被覆盖,使用的木板集合为j 转移: ...

  2. Java基础系列--基础排序算法

    原创作品,可以转载,但是请标注出处地址:https://www.cnblogs.com/V1haoge/p/9082138.html 一.概述 基础排序算法包括:桶排序.冒泡排序.选择排序.插入排序等 ...

  3. 【CTF 攻略】CTF比赛中关于zip的总结

    [CTF 攻略]CTF比赛中关于zip的总结   分享到: --> 本文首发于安全客,建议到原地址阅读,地址:http://bobao.360.cn/ctf/detail/203.html 前言 ...

  4. MYSQL——数据库存储引擎!

    本人安装mysql版本为:mysql  Ver 14.14 Distrib 5.7.18, for Win64 (x86_64),查看mysql的版本号方式:cmd-->mysql --vers ...

  5. asp.net core 3.0 gRPC框架小试

    什么是gRPC gRPC是google开源的一个高性能.跨语言的RPC框架,基于HTTP2协议,采用ProtoBuf 定义的IDL. gRPC 的主要优点是: 现代高性能轻量级 RPC 框架. 协定优 ...

  6. 强化学习(十六) 深度确定性策略梯度(DDPG)

    在强化学习(十五) A3C中,我们讨论了使用多线程的方法来解决Actor-Critic难收敛的问题,今天我们不使用多线程,而是使用和DDQN类似的方法:即经验回放和双网络的方法来改进Actor-Cri ...

  7. [Inside HotSpot] C1编译器优化:全局值编号(GVN)

    1. 值编号 我们知道C1内部使用的是一种图结构的HIR,它由基本块构成一个图,然后每个基本块里面是SSA形式的指令,关于这点如可以参考[Inside HotSpot] C1编译器工作流程及中间表示. ...

  8. ionic3 生命周期

    ionic3 总共有8个钩子函数,分别是:onPageLoaded,onPageWillEnter,onPageDidEnter,onPageWillLeave,onPageDidLeave,onPa ...

  9. 阿里云对象存储OSS访问控制

    阿里云对象存储OSS的Android SDK提供了STS鉴权模式和自签名模式来保障移动终端的安全性. OSS可以通过阿里云STS (Security Token Service) 进行临时授权访问.交 ...

  10. 对比 Git 与 SVN,这篇讲的很易懂

    ---恢复内容开始--- 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯工蜂发表于云+社区专栏 导语 本文从 Git 与 SVN 的对比入手,介绍如何通过 Git-SVN 开始 ...