【Vue】Vue生命周期及其钩子函数

最新推荐文章于 2024-05-26 11:46:52 发布

南栀~zmt

最新推荐文章于 2024-05-26 11:46:52 发布

阅读量325

点赞数

分类专栏： JavaScript库 # Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_46658751/article/details/122991325

版权

文章目录

vue2.0的生命周期钩子函数(10个)
示例展示

每个Vue实例再被创建之前都要经过一系列的初始化过程，这个过程就是Vue生命周期。

在这里插入图片描述

vue2.0的生命周期钩子函数(10个)

beforeCreate：

在实例初始化之后
还未进行数据观测(data observer) 和 event/watcher 事件配置。

created：

实例已经创建完成之后被调用。
实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调
挂载阶段还未开始，$el属性目前不可见。
在created钩子中可以对data数据进行操作，这个时候可以进行ajax请求将返回的数据赋给data
在使用vue-router时有时需要使用<keep-alive></keep-alive>来缓存组件状态，这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。

beforeMount：

在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted：

el 被新创建的 vm. $ el 替换，并挂载到实例上去之后调用该钩子。
如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
在mounted钩子对挂载的dom进行操作

beforeUpdate：

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated：

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。

activated：

keep-alive 组件激活时调用。

deactivated：

keep-alive 组件停用时调用。

beforeDestroy：

实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed：

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

示例展示

我们创建了一个Vue根实例命名为app，将其挂载到页面id为app的dom元素上。

局部注册的一个组件child并在根实例中将其注册使其可以在根实例的作用域中使用。

将子组件用<keep-alive>包裹，为接下来的测试作准备。keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/Vue_js/vue.js"></script>
</head>
<body>

<div id="app