【Vue】 ----- 浅谈vue的生命周期
一、概念
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的生命周期的更多相关文章
- 浅谈Django的生命周期和CBF和FBC
Django的生命周期和CBF和FBC 对于所有的web框架来说本质就是一个socket服务端,浏览器是socket客户端,客户端和服务端通信,字符串(Http协议):请求头和请求体 响应头+响应体 ...
- 浅谈Vue.js
作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的 ...
- 浅谈Vue不同场景下组件间的数据交流
浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...
- Vue浅谈
谈Vue 最近在学习Vue相关的知识点并且也做一些练手,就在学习过程中出现的各种坑爹的地方做一个总结!之后再遇到也不会抓瞎. 1.Vue工程的安装 (1)首先先安装node.js这是Vue的运行基础. ...
- 【Vue】浅谈Vue不同场景下组件间的数据交流
浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...
- Vue 实例详解与生命周期
Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...
- 浅谈Vue响应式(数组变异方法)
很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...
- 浅谈Vue下的components模板
浅谈Vue下的components模板在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单 ...
- Vue – 基础学习(1):对生命周期和钩子函的理解
一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...
- 浅谈Vue中计算属性(computed)和方法(methods)的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
随机推荐
- spot 状压dp
题目大意:数轴上有n个泥点,共有m个木板,求最少用几个木板可以覆盖全部泥点,并求最优方案数(n,m<=15) 看范围,肯定是状压 f[i][j]表示前i个泥点都被覆盖,使用的木板集合为j 转移: ...
- Java基础系列--基础排序算法
原创作品,可以转载,但是请标注出处地址:https://www.cnblogs.com/V1haoge/p/9082138.html 一.概述 基础排序算法包括:桶排序.冒泡排序.选择排序.插入排序等 ...
- 【CTF 攻略】CTF比赛中关于zip的总结
[CTF 攻略]CTF比赛中关于zip的总结 分享到: --> 本文首发于安全客,建议到原地址阅读,地址:http://bobao.360.cn/ctf/detail/203.html 前言 ...
- MYSQL——数据库存储引擎!
本人安装mysql版本为:mysql Ver 14.14 Distrib 5.7.18, for Win64 (x86_64),查看mysql的版本号方式:cmd-->mysql --vers ...
- asp.net core 3.0 gRPC框架小试
什么是gRPC gRPC是google开源的一个高性能.跨语言的RPC框架,基于HTTP2协议,采用ProtoBuf 定义的IDL. gRPC 的主要优点是: 现代高性能轻量级 RPC 框架. 协定优 ...
- 强化学习(十六) 深度确定性策略梯度(DDPG)
在强化学习(十五) A3C中,我们讨论了使用多线程的方法来解决Actor-Critic难收敛的问题,今天我们不使用多线程,而是使用和DDQN类似的方法:即经验回放和双网络的方法来改进Actor-Cri ...
- [Inside HotSpot] C1编译器优化:全局值编号(GVN)
1. 值编号 我们知道C1内部使用的是一种图结构的HIR,它由基本块构成一个图,然后每个基本块里面是SSA形式的指令,关于这点如可以参考[Inside HotSpot] C1编译器工作流程及中间表示. ...
- ionic3 生命周期
ionic3 总共有8个钩子函数,分别是:onPageLoaded,onPageWillEnter,onPageDidEnter,onPageWillLeave,onPageDidLeave,onPa ...
- 阿里云对象存储OSS访问控制
阿里云对象存储OSS的Android SDK提供了STS鉴权模式和自签名模式来保障移动终端的安全性. OSS可以通过阿里云STS (Security Token Service) 进行临时授权访问.交 ...
- 对比 Git 与 SVN,这篇讲的很易懂
---恢复内容开始--- 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯工蜂发表于云+社区专栏 导语 本文从 Git 与 SVN 的对比入手,介绍如何通过 Git-SVN 开始 ...