【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计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
随机推荐
- Tensorflow学习-数据读取
Tensorflow数据读取方式主要包括以下三种 Preloaded data:预加载数据 Feeding: 通过Python代码读取或者产生数据,然后给后端 Reading from file: 通 ...
- 【建图+拓扑判环】BZOJ3953: [WF2013]Self-Assembly
Description 自动化学制造(Automatic Chemical Manufacturing,简称ACM)正在对一个叫自组装(self-assembly)的过程进行实验.在这个过程中,有着天 ...
- 已管理员身份从cmd框进入mysql,及常用的简单操作!
在命令框中操作mysql已管理员的身份进入操作权限较高,已普通用户进入cmd框也可对mysql进行操作,不过一般建议用管理员身份进入. 1.启动MYSQL Notifier 2.已管理员身份进入cmd ...
- C#ComboBox控件“设置 DataSource 属性后无法修改项集合”的解决方法
在使用ComboBox控件时,遇到了重新绑定赋值出问题的情况.正常情况下,对于数据重新赋值的或者绑定数据源的时候,为了防止数据出现问题,都会先清空原来数据,所以就这样写了,但是没有相当恰恰这样写就出现 ...
- SpringBoot进阶教程(二十八)整合Redis事物
Redis默认情况下,事务支持被禁用,必须通过设置setEnableTransactionSupport(true)为使用中的每个redistplate显式启用.这样做会强制将当前重新连接绑定到触发m ...
- 『审慎』.Net4.6 Task 异步函数 比 同步函数 慢5倍 踩坑经历
异步Task简单介绍 本标题有点 哗众取宠,各位都别介意(不排除个人技术能力问题) —— 接下来:我将会用一个小Demo 把 本文思想阐述清楚. .Net 4.0 就有了 Task 函数 —— 异步编 ...
- java~springcloud微服务目录索引
回到占占推荐博客索引 最近写了不过关于java,spring,微服务的相关文章,今天把它整理一下,方便大家学习与参考. java~springcloud微服务~目录索引 springcloud~服务注 ...
- Alpha阶段Scrum Meeting合集(江山代有才人秃队)
Day URL 第一天 第1篇Scrum冲刺博客 第二天 第2篇Scrum冲刺博客 第三天 第3篇Scrum冲刺博客 第四天 第4篇Scrum冲刺博客 第五天 第5篇Scrum冲刺博客 第六天 第6篇 ...
- (一)初识Redis
1.redis简介 Redis是一个速度非常快的key-value非关系型存储数据库,可以存储5种形态的键值对,可以将存储在内存中的键值对持久化到硬盘,可以使用复制特性扩展读性能,还可以使用客户端分片 ...
- SSIS-导入Excel文件时记录行号
SSIS导入Excel时记录行号 1. "Excel源"后添加"脚本组件" 2. "脚本组件"中新增输出列,命名为"RowNumb ...