Vue学习之 生命周期钩子
来源:互联网 发布:太原java薪资待遇如何 编辑:程序博客网 时间:2024/05/22 17:43
在学习Vue.js 2 看到一篇介绍 vue生命周期钩子的文章,结合实例和图表,还算比较好理解。在此收藏,以备后期消化贯通。
文章:
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。在这个过程中,实例也会 调用一些生命周期钩子(Lifecycle Hook) ,这就给我们提供了执行自定义逻辑 的机会。
初始化钩子
初始化钩子包括beforeCreate
和created
。这两个钩子允许我们在实例被渲染 到DOM之前执行一些初始化操作。由于DOM还未就绪,在初始化钩子里,不能访问DOM 对象,实例的$el
属性 —— 宿主DOM对象 —— 也没有创建:
beforeCreate是最早被调用的钩子,这时Vue.js还没有构造响应式数据源,也没 有初始化实例的事件。
在created钩子里,我们可以访问响应式数据、监听实例事件。不过还没有将虚拟 DOM渲染到文档DOM树。
DOM挂载钩子
挂载钩子包括beforeMount
和mounted
,是最常使用的钩子。这两个钩子允许我们 在首次渲染*前后立即访问Vue实例。因此,如果我们需要在首次渲染前后访问或修改 DOM对象(例如,通过实例的$el
属性访问宿主元素),就应该使用这两个钩子:
beforeMount钩子在模板编译完成后、首次渲染前执行。
在mounted钩子内可以自由地访问组件渲染后的DOM对象(this.$el
)。这个钩子 经常被用于修改DOM、集成第三方库等操作。
更新钩子
更新钩子包括beforeUpdate
和updated
。每当实例需要重新渲染(例如模型发生变化等), 框架就会调用这两个钩子:
beforeUpdate钩子在模型数据变化之后、渲染周期开始之前执行。在这个钩子里我们可以 在界面渲染前获取实例属性的最新值。
updated钩子在重新渲染完成后被调用。
DOM卸载钩子
DOM卸载钩子包括beforeDestroy
和destroyed
,当实例被从DOM树移除时执行。 这两个钩子允许我们在实例销毁前后执行一些清理或统计分析的工作:
beforeDestroy钩子在实例被销毁(利用,通过调用实例的$destroy()
方法)之前被调用。 在这个钩子里可以清理对响应式数据的监听。
destroyed钩子在实例被销毁之后被调用,此时实例已经不剩什么东西了:-( 也可以 在这个钩子里执行一些最后时刻的清理工作,或者向远程服务器通知实例被销毁的消息。
实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="lib/led.css">
</head>
<body>
<div id="app">
<button v-on:click="counter++">单步计数</button>
<div class="counter">{{counter}}</div>
</div>
<div id="tool">
<button onclick="vm.$destroy()">销毁Vue实例</button>
<button onclick="vm.$mount('#app')">重新挂载Vue实例</button>
<button onclick="clearLogs()">清理日志</button>
</div>
<div id="logs"></div>
<script src="lib/vue.js"></script>
<script>
var idx = 1;
var log = function(hook){
return function(){
var host = document.querySelector('#logs');
var el = document.createElement('div');
el.textContent = idx + ' ' + hook;
host.prepend(el);
idx++;
}
};
var clearLogs = function(){
var host = document.querySelector('#logs');
host.innerHTML = "";
};
var vm = new Vue({
el:'#app',
data:{counter:0,flag:true},
beforeCreate:log('beforeCreate'),
created:log('created'),
beforeMount:log('beforeMount'),
mounted:log('mounted'),
beforeUpdate:log('beforeUpdate'),
updated:log('updated'),
beforeDestroy:log('beforeDestroy'),
destroyed:log('destroyed')
})
</script>
</body>
</html>
- Vue学习之 生命周期钩子
- vue学习基础之生命周期钩子
- Vue 生命周期钩子
- vue生命周期钩子函数
- vue生命周期、钩子理解
- vue.js生命周期钩子详解
- 【Vue2.0】vue生命周期中的钩子函数
- vue js 的生命周期和钩子函数
- Vue的生命周期(钩子函数)
- vue.js生命周期钩子函数及缓存
- 对vue生命周期-钩子函数的理解
- vue生命周期中,钩子函数执行顺序
- vue生命周期和钩子函数的理解
- Vue.js 系列教程 3:Vue-cli,生命周期钩子
- Vue.js 系列教程 3:Vue-cli,生命周期钩子
- Vue学习--生命周期
- Vue之生命周期
- Vue之生命周期
- 一步一步教你使用CodeFisrt
- E周安全:黑客攻防对弈 探索下一代安全
- RecyclerViewAdapter 使用教程
- 基本的jQuery选择器
- HDPCD-Java-复习笔记(6)
- Vue学习之 生命周期钩子
- Git冲突:commit your changes or stash them before you can merge.
- Leetcode算法学习日志-452 Minimum Number of Arrows to Burst Balloons
- 低功耗蓝牙UUID三种格式转换
- jQuery下Ajax 执行回调函数的原理success、error、complete
- printf打印边框,很洋气
- 在搜索引擎强调原创之下如何正确发布外链
- 使用ROBOCOPY增量备份文件
- nfs 多台服务器共享目录