vue生命周期简介和钩子函数

最新推荐文章于 2021-08-04 22:15:45 发布
最新推荐文章于 2021-08-04 22:15:45 发布
阅读量233 收藏
点赞数
分类专栏： vue 文章标签： vue javascript
原文链接：https://www.cnblogs.com/xiaobaibubai/p/8383952.html
版权

vue生命周期简介和钩子函数

	</h1>
	<div class="clear"></div>
	<div class="postBody">

转载：http://blog.youkuaiyun.com/qq_15766181/article/details/73549933

钩子就好像是把人的出生到死亡分成一个个阶段，你肯定是在出生阶段起名字，而不会在成年或者死亡的阶段去起名字。或者说你想在出生阶段去约炮，也是不行的。组件也是一样，每个阶段它的内部构造是不一样的。所以一般特定的钩子做特定的事，比如ajax获取数据就可以在mounted阶段。

一、vue生命周期简介


咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了，总结一下，对官方文档的那张图简化一下，就得到了这张图。

二、生命周期探究

对于执行顺序和什么时候执行，看上面图基本有个了解了。下面我们将结合代码去看看钩子函数的执行。

复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>钩子函数</title>
    <meta charset="utf-8">
    <script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
<body>

<div id=“app”>
<p>{{ message }}</p>
<input type=“button” @click=“change” value=“更新数据” />
<input type=“button” @click=“destroy” value=“销毁” />
</div>

<script type=“text/javascript”>
var vm = new Vue({
el: ‘#app’,
data: {
message : “Welcome Vue”
},
methods:{
change() {
this.message = ‘Datura is me’;
},
destroy() {
vm.KaTeX parse error: Expected 'EOF', got '}' at position 24: …); }̲ }, …el); //undefined
console.log("%c%s", “color:red”,“data : " + this.KaTeX parse error: Expected 'EOF', got '#' at position 46: …kground-color: #̲f5f5f5; color: …el); //undefined
console.log(”%c%s", “color:green”,“data : " + this.KaTeX parse error: Expected 'EOF', got '#' at position 46: …kground-color: #̲f5f5f5; color: …el)); //已被初始化
console.log(this.KaTeX parse error: Expected 'EOF', got '#' at position 44: …kground-color: #̲f5f5f5; color: …data); //已被初始化
console.log(”%c%s", “color:green”,“message: " + this.message); //已被初始化
},
mounted: function () {
console.group(‘mounted 挂载结束状态===============》’);
console.log(”%c%s", “color:green”,“el : " + this.KaTeX parse error: Expected 'EOF', got '#' at position 44: …kground-color: #̲f5f5f5; color: …el);
console.log(”%c%s", “color:green”,“data : " + this.KaTeX parse error: Expected 'EOF', got '#' at position 46: …kground-color: #̲f5f5f5; color: …el);
console.log(this.KaTeX parse error: Expected 'EOF', got '#' at position 68: …kground-color: #̲f5f5f5; color: …data);
console.log(”%c%s", “color:green”,“message: " + this.message);
alert(“更新前状态2”);
},
updated: function () {
console.group(‘updated 更新完成状态===============》’);
console.log(”%c%s", “color:green”,“el : " + this.KaTeX parse error: Expected 'EOF', got '#' at position 68: …kground-color: #̲f5f5f5; color: …el);
console.log(”%c%s", “color:green”,“data : " + this.KaTeX parse error: Expected 'EOF', got '#' at position 70: …kground-color: #̲f5f5f5; color: …el);
console.log(this.KaTeX parse error: Expected 'EOF', got '#' at position 68: …kground-color: #̲f5f5f5; color: …data);
console.log(”%c%s", “color:red”,“message: " + this.message);
},
destroyed: function () {
console.group(‘destroyed 销毁完成状态===============》’);
console.log(”%c%s", “color:red”,“el : " + this.KaTeX parse error: Expected 'EOF', got '#' at position 68: …kground-color: #̲f5f5f5; color: …el);
console.log(”%c%s", “color:red”,“data : " + this.$data);
console.log(”%c%s", “color:red”,"message: " + this.message)
}
})
</script>
</body>
</html>

复制代码

 

 
1. create 和 mounted

beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。

另外在标红处，我们能发现el还是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

2. update

我们单击页面中的“更新数据”按钮，将数据更新。下面就能看到data里的值被修改后，将会触发update的操作。

ps:注意beforeUpdate是指view层的数据变化前，不是data中的数据改变前触发。因为Vue是数据驱动的。注意观察弹窗就容易发现。
3. destroy

销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。因为这个Vue实例已经不存在了。
我们单击页面中的“销毁”按钮，将指定的Vue实例销毁。

三、生命周期总结

beforecreate : 举个栗子：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestory： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容

Vue的生命周期和钩子函数
桐花思雨
02-10 1712
目录`Vue` 的生命周期`Vue` 的生命周期与钩子函数 Vue 的生命周期 通俗地来说 vue 的生命周期：就是 vue 实例从创建到销毁的过程，我将这个过程中的一些关键点抽取出来，简化为下面这个流程图 Vue 的生命周期与钩子函数 vue 2.0 提供了一系列钩子函数，这些函数和生命周期的各个阶段一一对应 钩子函数描述 beforeCreate 在实例初始化之后，数据观测（data observer）和 event/watch事件配置之前被调用 created 在实例创建完成后立即
深入解析 Vue2 的生命周期钩子函数
最新发布
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
12-28 886
Vue2 是一款非常易于上手的前端框架，它的组件化开发思想使得应用的构建更加高效和模块化。在 Vue 中，生命周期钩子函数是每个组件实例从创建到销毁过程中会调用的一系列函数。这些钩子函数为开发者提供了丰富的接口，以便在组件的不同阶段执行特定的操作。本文将深入解析 Vue2 中的生命周期钩子函数，并结合具体的应用场景，帮助开发者更好地理解和运用这些钩子函数，提高开发效率和代码的可维护性。创建阶段在该阶段，Vue 实例被初始化，但尚未渲染 DOM。此时，数据观测和事件配置已经完成，但组件实例还没有被挂载。
Vue的生命周期资料
m0_59377549的博客
07-30 227
一、vue的生命周期是什么 vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。在组件中具体的方法有: beforeCreate created beforeMount mounted ( beforeUpdate updated ) beforeDestroy destroyed 对应的中文就如其字面意思，英文不好的童鞋可以有道翻翻 二、vue生命周期的在项目中的执行顺序 … dat
vue 的生命周期函数
snowflak的博客
05-26 7929
vue 的生命周期函数，有那些？在项目中怎么使用？以及应用场景？ 1.vue的生命周期函数分为：创建前 beforeCreate :在实例初始化之后执行此时对象还未创建，el 和data并未初始化，因此无法访问 methods,data ,computed等方法和数据。 2.创建后：created：最早开始使用data和methods中的数据的钩子函数，这个阶段可以数据请求，但是不能dom操作。 3.挂载前：beforeMount:挂载开始之前被调用，把data里面的数据和模板生成html，完成了el和da
Vue 生命周期函数
白菜执笔人的博客
03-25 202
项目前导 学习笔记 一、生命周期函数         生命周期函数代表的是 Vue 实例，或者是 Vue 组件，在网页中各个生命阶段所执行的函数。生命周期函数可以分为 创建阶段 、运行期间 以及 销毁期间。其中： 创建期间的函数有：beforeCreate、created、beforeMount、mounted； 运行期间的函数有：beforeU...
vue 生命周期函数
chen1042246612的博客
04-10 309
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
vue生命周期与钩子函数简单示例
12-29
本文实例讲述了vue生命周期与钩子函数。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>www.jb51.net vue生命周期与钩子函数...
vue3生命周期--钩子函数图解（中文版）.svg
11-02
vue3生命周期--钩子函数图解（中文版）
一文带你弄懂Vue八大生命周期钩子函数
你好呀，很高兴你在看这里~
06-12 2899
一. 我们把一个对象从生成（new）到被销毁（destory）的过程，称为生命周期。而生命周期函数，就是在某个时刻会自动执行的函数。
vue的生命周期函数
weixin_43675915的博客
03-03 188
vue的八个生命周期函数 下面的这八个函数都是vue的基本函数，基本对象，和data，methods这些对象都是并列的，在进行vue实例的时候，有需要再实例化 beforeCreate () 这个是在刚刚创建vue对象的时候被调用的函数，在调用这个函数的时候，vue对象内的所有对象都没有被创建 created () vue对象被创建之后，data里面的数据被加载到内存中，但是还没有被加载到浏览器...
Vue生命周期
weixin_45077672的博客
08-04 254
/* 常用的生命周期钩子： 1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。 2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。 关于销毁Vue实例 1.销毁后借助Vue开发者工具看不到任何信息。 2.销毁后自定义事件会失效，但原生DOM事件依然有效。 3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。 */ beforeCreate.
Vue的生命周期函数
kcorih的博客
08-21 293
首先，我们来明白什么是生命周期。 百度百科上对生命周期的定义是指一个对象的生老病死。那么对于Vue来说，什么又是Vue的生命周期呢？ Vue的生命周期又叫实例的生命周期。Vue创建的实例需要经过创建、运行、销毁过程，这些过程又伴随着许多事件，这些事件的总称我们就可以叫做Vue的生命周期。 下面我附上一位技术讲师的流程图，来详细说明生命周期。 我们先来走一遍这个流程 创建实例 var vm=new...
vue生命周期函数和钩子函数
09-09
Vue生命周期函数是Vue组件或实例在创建、更新和销毁过程中触发的一系列方法。这些方法可以用来在不同的生命周期阶段执行特定的操作。 Vue的生命周期函数包括： 1. beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 2. created：在实例创建完成后被立即调用。在这一阶段，实例已经完成了数据观测，属性和方法的运算，watch/event事件的配置，但是DOM元素尚未被挂载。 3. beforeMount：在实例挂载之前被调用。这个阶段，Vue 实例的模板编译已经完成，但是DOM尚未被渲染出来。可以在这个阶段进行一些初始化的事件绑定或发送AJAX请求等操作。 4. mounted：在实例挂载到DOM元素上后被调用。此时，真实的DOM元素已经被渲染出来，并且可以通过DOM API进行操作。 5. beforeUpdate：在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前。可以在这个阶段进行一些实例化相关的操作。 6. updated：在数据更新之后被调用，发生在虚拟DOM重新渲染和打补丁之后。可以在这个阶段进行一些DOM的操作。 7. beforeDestroy：在实例销毁之前被调用。在这个阶段，实例仍然完全可用，可以进行一些清理工作，比如清除定时器、解绑事件等。 8. destroyed：在实例销毁之后被调用。在这个阶段，实例的所有指令和观察者都已解绑，所有的事件监听器都已移除，DOM元素也已被删除。 这些生命周期函数可以帮助我们在适当的时机执行特定的操作，比如在created钩子函数中做数据初始化，mounted钩子函数中操作DOM元素，beforeDestroy钩子函数中清除定时器等。通过合理使用这些生命周期函数，可以更好地控制Vue组件或实例的行为。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值