vue的生命函数周期以及钩子函数的详解
首先我们先附上官网的图
图中展现出的是vue整个生命周期以及钩子函数
1- beforeCreate(创建前)
2- created(创建完成)
3- beforeMount(挂载前)
4- mounted(挂载完成)
5- beforeUpdate(更新前)
6- updated(更新完成)
7- beforeDestroy(销毁前)
8- destroyed(销毁完成)
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> <body>
<div id='app'>
<button @click="btnclick">点击更新</button>
<h1>{{message}}我是outerHTML</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
const app = new Vue({
el: '#app',
//template:"<h2>{{message}}--我位于template里</h2>", // vue实例内部
// render:function(creatElement){
// return creatElement("h2","this is renter函数内部")
// },
data: {
message:"hello vue!"
},
beforeCreate:function(){
console.log("beforeCreate(创建前):");
console.log(this.$el);
console.log(this.$data);
console.log(this.message);
},
created: function () {
console.log("created(创建完成):");
console.log(this.$el);
console.log(this.$data);
console.log(this.message);
},
beforeMount: function () {
console.log("beforeMounted(挂载前):");
console.log(this.$el);
console.log(this.$data);
console.log(this.message);
},
mounted: function () {
console.log("mounted(挂载完成):");
console.log(this.$el);
console.log(this.$data);
console.log(this.message);
},
beforeUpdate: function () {
console.log("beforeUpdate(更新前):");
console.log(this.$el);
console.log(this.$data);
console.log(this.message);
},
updated: function () {
console.log("updated(更新后):");
console.log(this.$el);
console.log(this.$data);
console.log(this.message);
},
beforeDestroy: function () {
console.log("beforeDestroy(销毁前):");
console.log(this.$el);
console.log(this.$data);
console.log(this.message);
},
destroyed: function () {
console.log("destroyed(销毁后):");
console.log(this.$el);
console.log(this.$data);
console.log(this.message);
},
methods:{
btnclick:function(){
this.message = "hello world!";
}
} })
</script>
</body> </html>
源代码如上,运行结果,之后点击更新按钮,控制台截图
调用了一些我们的钩子函数
1. 在beforeCreate和created之间
进行初始化事件，数据的观测，在 created 的时候数据已经和 data 属性进行绑定。但此时尚未挂载，el 还不可用。
2. 在created和beforeMount之间
首先会先判断对象是否有el选项,如果有则继续向下编译,如果没有就会停止编译,也就意味着停止了生命周期，直到在该 Vue 实例上调用 vm.$mount(el)。
当我们没有el选项时,注释掉el选项,再运行看控制台:
我们可以看到,没有el选项时,直接到created就结束了.
当我们有el选项时,
则会进行下一步,看看对象是否有template选项
render>template>outerhtml
outerHTML就是在html代码块中的代码模板
template在vue实例内部定义的模板
render函数
下面我们先写上outerHTML,运行看结果:
然后在这个得基础上去掉代码中的template选项的注释,我们运行下看结果:
然后在上面的基础上,我们将render函数选项注释去掉,再来看看我们的结果:
很明显,我们就比较出了,他们的优先级别: render > template >outerHTML
3. 在beforeMount和Mounted之间
给对象添加了el选项,我们也可以看替换掉挂载的 DOM 元素。
4.mounted
在beforeMounted时,h1中的内容通过{{message}}进行占位,此时还没有被挂载到页面上,还是处于VDOM的形式存在. 在mounted之后才被挂载完成
5.在beforeUpdate和update之间
我们图中有按钮,点击更新则会触发这两个钩子函数
当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。
当更新完成后，执行updated，数据已经更改完成，DOM也重新render完成，可以操作更新后的VDOM.
7. 当经过某种途径调用$destroy方法后，在实例销毁之前 立即执行beforeDestroy，在实例销毁之前调用。在这一步，实例仍然完全可用。一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等
8. 组件的数据绑定、监听...去掉后只剩下DOM空壳，这个时候，执行 destroyed钩子函数。调用后，Vue 实例指示的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 在Vue 实例销毁后调用.
vue的生命函数周期以及钩子函数的详解的更多相关文章
- vue学习之生命周期和钩子函数
参考文章:Vue2.0 探索之路——生命周期和钩子函数的一些理解 抛出问题: 我们有时候会在几个钩子函数里做一些事情,那么什么时候做,该在哪个函数里做? 生命周期简介 结合代码看el 和 data以及 ...
- vue生命周期、钩子函数
https://segmentfault.com/a/1190000011381906 详解生命周期和钩子函数 每个vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期 ...
- vue教程2-01 vue生命周期、钩子函数
vue教程2-01 vue生命周期.钩子函数 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- Vue（3）- 安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用
一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...
- Vue 3 --安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用
一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- vue学习（五）生命周期 的钩子函数
生命周期的钩子函数 主要有以下几种 beforeCreate created beforeMount mounted beforeUpdate updated activated deactivate ...
- [前端] VUE基础 (5) (过滤器、生命周期、钩子函数)
一.过滤器 过滤器分为局部过滤器和全局过滤器. 1.局部过滤器 <body> <div id="app"> </div> <script ...
- Vue2.0 【第二季】第4节 Vue的生命周期（钩子函数）
目录 Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函数) Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函 ...
随机推荐
- Alpha冲刺 —— 5.9
这个作业属于哪个课程 软件工程 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 Alpha冲刺 作业正文 正文 github链接 项目地址 其他参考文献 无 一.会议内容 1.总 ...
- Rocket - diplomacy - LazyModule的实例化
https://mp.weixin.qq.com/s/9PsBt4_4qHx4i6C5XtuiUw 介绍LazyModule和Node构造方法的执行过程,即实例化过程. 1. NullIn ...
- 面试题： SpringBoot 的自动配置原理
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 3.Spring Boot 的自动配置原理 package com.mmall; import org. ...
- 程序员的脑袋系列---利用ffmpeg命令提取音频
今日各大播放器的版权控制越来越严格.导致很多歌曲无法听,但是MV却可以听.这样很蛋疼有木有? 然而,我们可以利用ffmpeg工具提取MV的音频,比如做成MP3格式,这样就可以听了.--哈哈(邪恶地笑) ...
- （Java实现） 营救
问题 B: 营救 时间限制: 1 Sec 内存限制: 128 MB 题目描述 铁塔尼号遇险了!他发出了求救信号.距离最近的哥伦比亚号收到了讯息,时间就是生命,必须尽快赶到那里. 通过侦测,哥伦比亚号获 ...
- Java实现 蓝桥杯VIP 算法训练 二元函数
问题描述 令二元函数f(x,y)=ax+by,a和b为整数,求一个表达式S的值. 只有满足以下要求的表达式才是合法的: 1.任意整数x是一个合法的表达式: 2.如果A和B都是合法的表达式,则f(A,B ...
- Java实现 LeetCode 132 分割回文串 II（二）
132. 分割回文串 II 给定一个字符串 s,将 s 分割成一些子串,使每个子串都是回文串. 返回符合要求的最少分割次数. 示例: 输入: "aab" 输出: 1 解释: 进行一 ...
- Java实现 LeetCode 100 相同的树
100. 相同的树 给定两个二叉树,编写一个函数来检验它们是否相同. 如果两个树在结构上相同,并且节点具有相同的值,则认为它们是相同的. 示例 1: 输入: 1 1 / \ / \ 2 3 2 3 [ ...
- 因为 MongoDB 没入门，我丢了一份实习工作
有时候不得不感慨一下,系统升级真的是好处多多,不仅让我有机会重构了之前的烂代码,也满足了我积极好学的虚荣心.你看,Redis 入门了.Elasticsearch 入门了,这次又要入门 MongoDB, ...
- 组态与非组态结合的LT
概述 最新的应用软件快速搭建平台现已投入使用.首先对名称进行规范统一一下. 英文全称:LARKIN-CN.TOP : 中文全称:拉图: 简称:LT. 特点: 组态软件开发的快速.灵活 C端软件的控件交 ...