Vue学习之生命周期钩子

最新推荐文章于 2024-12-28 09:15:00 发布

bowen11233

最新推荐文章于 2024-12-28 09:15:00 发布

阅读量637

点赞数

分类专栏：框架学习文章标签： vue 前端

框架学习专栏收录该内容

2 篇文章

订阅专栏

在学习Vue.js 2 看到一篇介绍 vue生命周期钩子的文章，结合实例和图表，还算比较好理解。在此收藏，以备后期消化贯通。

文章：

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。在这个过程中，实例也会调用一些生命周期钩子（Lifecycle Hook），这就给我们提供了执行自定义逻辑的机会。

初始化钩子

初始化钩子包括beforeCreate和created。这两个钩子允许我们在实例被渲染到DOM之前执行一些初始化操作。由于DOM还未就绪，在初始化钩子里，不能访问DOM 对象，实例的$el属性 —— 宿主DOM对象 —— 也没有创建:

init hook

beforeCreate是最早被调用的钩子，这时Vue.js还没有构造响应式数据源，也没有初始化实例的事件。

在created钩子里，我们可以访问响应式数据、监听实例事件。不过还没有将虚拟 DOM渲染到文档DOM树。

DOM挂载钩子

挂载钩子包括beforeMount和mounted，是最常使用的钩子。这两个钩子允许我们在首次渲染*前后立即访问Vue实例。因此，如果我们需要在首次渲染前后访问或修改 DOM对象（例如，通过实例的$el属性访问宿主元素），就应该使用这两个钩子：

mount hook

beforeMount钩子在模板编译完成后、首次渲染前执行。

在mounted钩子内可以自由地访问组件渲染后的DOM对象（this.$el）。这个钩子经常被用于修改DOM、集成第三方库等操作。

更新钩子

更新钩子包括beforeUpdate和updated。每当实例需要重新渲染（例如模型发生变化等），框架就会调用这两个钩子：

update hook

beforeUpdate钩子在模型数据变化之后、渲染周期开始之前执行。在这个钩子里我们可以在界面渲染前获取实例属性的最新值。

updated钩子在重新渲染完成后被调用。

DOM卸载钩子

DOM卸载钩子包括beforeDestroy和destroyed，当实例被从DOM树移除时执行。这两个钩子允许我们在实例销毁前后执行一些清理或统计分析的工作：

destruct hook

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 οnclick="vm.$destroy()">销毁Vue实例</button>
<button οnclick="vm.$mount('#app')">重新挂载Vue实例</button>
<button οnclick="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>