我们在学习 Servlet 的时候有说过 Servlet 的生命周期，其实 Vue 也是有生命周期的。伴随着生命周期，还有很多的钩子，钩子就是在某个阶段给你一个做某些处理的机会。

一、生命周期介绍

1. new Vue()

我们第一步是创建 Vue 实例，创建实例的同时，还会初始化事件 & 生命周期。

在这里我们会接触到第一个钩子：beforeCreate。

我们可以在这个钩子里面做一些页面拦截：当进一个路由的时候我们可以判断是否有权限进去，是否安全进去，携带参数是否完整，参数是否安全。使用这个钩子好函数的时候就避免了让页面去判断，省掉了创建一个组建Vue实例。

除去拦截，还可以做自定义重定向。当路由还没有进去时我们判断是否正确进去，若不正确进去可以重定向到指定的页面。

2. 初始化注入 & 响应性

执行完成上面的 beforeCreate 钩子之后，就到了下一步，初始化注入 & 响应性，这个主要是加载组件（我们后面学 cli 的时候会说组件），还有就是响应（详细可以看：https://cn.vuejs.org/v2/guide/reactivity.html）

之后，注入完成会执行 created 钩子函数，我们可以在这个钩子上初始化一些数据，可以通过 ajax 进行调用一些请求拿到数据进行绑定。

3. 编译模板

Vue 会判断是否有模板的存在，如果有，就进行编译模板，然后进行模版和数据结合挂载，如果没有，直接编辑 el 所绑定的 innerHTML，接着进行模板和数据结合挂载。（模版和数据结合挂载页面没有渲染）

之后，就会执行 beforeMount 钩子函数。这个钩子函数可以更改一些数据。

4. 挂载

上面的模板和数据结合之后，我们接下来就是要将这个挂载到页面上了。

在页面挂载完成前，我们还有一个钩子函数，就是 mounted 钩子，而这个钩子在一个 Vue 实例里，只会被调用一次。

执行完 mounted 之后，我们的整个 Vue 就挂载完成了。

接着每当数据发生变化的时候，先执行 beforeUpdate 钩子，然后虚拟 DOM 从新渲染更新，更新之后，再执行 updated 钩子，以此往复。

5. 销毁

当我们这个 Vue 实例不用了之后，这个需要进行销毁，组件销毁我们需要调用 unmount() 方法，调用了之后，我们在调用 unmount() 之前还有一个钩子函数，beforeUnmount 钩子。

调用完 unmount() 函数后，还有一个钩子函数，就是 unmounted 。

也就是说我们调用的过程是：beforeUnmount 钩子执行后执行 unmount 方法，执行完成 unmount 方法之后，再执行 unmounted 钩子。

unmount 方法做的事情，就是执行组件自身的一些清理逻辑、递归销毁子组件，进而把组件下面所有的 DOM 也全部移除了。

因此，当我们执行的 beforeUnmount 的时候，还是可以访问组件内部的 DOM 的，如果你的代码逻辑依赖 DOM，那么就必须在 beforeUnmount 钩子函数中执行。

此外，Vue.js 只能在 unmount 函数中做一些组件自身的内存清理，而对于用户的一些自定义操作所占用的内存，是不会清理的。

我们可以在 beforeUnmount 钩子中可以清除定时器、全局注册事件等。在 unmounted 钩子中除去可以额清除定时器，全局注册，还可以清理第三方库的一些调用。

具体怎么用，用在那里，是需要看有没有依赖 DOM。

二、生命周期钩子使用

我们自己写一个案例来感受一下生命周期钩子。

<body><div id="app"><button @click="countNum += 1">点击 + 1</button><span>{{countNum}}</span><button @click="destroyVue()">销毁</button></div><script src="vuejs/vue2.js"></script>
<script>let vm = new Vue({el: '#app',data: {countNum: 0},methods: {destroyVue(){vm.$destroy();}},beforeCreate() {console.log("beforeCreate 被调用");console.log("beforeCreate 中获取 countNum " + this.countNum);},created() {console.log("create 被调用");console.log("create 中获取 countNum " + this.countNum);},beforeMount() {console.log("beforeMount 被调用");console.log("beforeMount 中获取 countNum " + this.countNum);},mounted() { // 调用一次console.log("mounted 被调用");console.log("mounted 中获取 countNum " + this.countNum);},beforeDestroy(){ // 调用一次console.log("beforeUnmount 被调用");console.log("beforeUnmount 中获取 countNum " + this.countNum);},destroyed(){console.log("unmounted 被调用");console.log("unmounted 中获取 countNum " + this.countNum);},beforeUpdate(){console.log("beforeUpload 被调用");console.log("beforeUpload 中获取 countNum " + this.countNum);},updated() {console.log("updated 被调用");console.log("updated 中获取 countNum " + this.countNum);}});
</script>
</body>

运行图：

可以看到，在调用 beforeCreate 是最先被调用的生命周期钩子，这个钩子还没有办法获取 data 中的数据，而在后面 create 钩子被调用的时候，data 中的数据就被加载出来了。

然后我们点击 “点击 + 1” 这个按钮。点个两三次

可以看到，每点击一次的，我们就会触发 beforeUpdate 和 updated 钩子。

然后我们点击销毁。点击完销毁之后，我们再来点击 “点击 + 1” 按钮。

可以发现，再也没有办法 +1 了，这里是因为整个 Vue 实例已经被销毁了~~

这一篇东西不多，大家仔细理解一下~~

有问题可以联系我：QQ 2100363119，欢迎大家访问我的个人网站：https://www.lemon1234.com

最近网站已经做好，并且已经上线，欢迎各位留言~~~

Vue3 _ 11. Vue 生命周期生命周期狗子相关推荐

vue父子组件生命周期执行顺序_关于Vue组件的生命周期及执行顺序
本文主要讲述了:Vue组件渲染时的生命周期及执行顺序 Vue组件数据变更时的生命周期及执行顺序 Vue组件嵌套时的生命周期及执行顺序正文组件渲染时的生命周期在组件渲染时,每个Vue组件都有4个生 ...
js字符串替换_浅析Vue的生命周期以及JS异步
前言 Vue的生命周期和JS异步都是有很多文章的知识点,我之前也是一知半解,基本够用. 但是直到我在开发的时候真的遇到了问题,才发现如果不把这些知识点融汇到一起,很难解决实际问题. 我甚至觉得这是我离 ...
vue 请求在子组件加载后了_从零单排vue第九课--Vue实例及生命周期
前期回顾上一节课我们重点学习了子组件如何与父组件通信,我们使用$emit方法在子组件中触发一个事件,然后在父组件中接收它.本节课我们来深入了解下vue实例以及它的生命周期是怎么样的? 创建一个Vue ...
前端进阶_狂神Vue笔记_语法指令v-bind、v-on、v-for_表单双绑_组件_Axios异步通信_Vue的生命周期_计算属性_插槽＜slot＞_webpack使用_vue-router路由
四.第一个Vue程序 4.1.什么是MVVM MVVM(Model-View-ViewModel)是一种软件设计模式,由微软WPF(用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Si ...
vue 声明周期函数_【Vue】详解Vue生命周期
Vue实例的生命周期全过程(图) (这里的红边圆角矩形内的都是对应的Vue实例的钩子函数) 在beforeCreate和created钩子函数间的生命周期在beforeCreate和created之 ...
计算属性与监听器、Vue 实例的生命周期
本文是我在学习过程中记录学习的点点滴滴,仅仅为了学完之后巩固一下,日后忘记了也可以方便快速的复习. 计算属性与监听器.Vue 实例的生命周期前言一.计算属性 1.1.计算属性初步理解 1.2.计算 ...
Vue实例的生命周期详解，从创建到销毁全过程
文章目录前言初识new Vue Vue实例从创建到销毁 1.创建之前-beforeCreate() 2.创建之后-created() 3.实例对象和文档挂载之前-beforeMount() 4.实 ...
关于Vue实例的生命周期created和mounted的区别
关于作者程序开发人员,不拘泥于语言与技术,目前主要从事PHP和前端开发,使用Laravel和VueJs,App端使用Apicloud混合式开发.合适和够用是最完美的追求. 个人网站:http://w ...
Vue实例的生命周期
vue实例的生命周期什么是生命周期:从Vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子:就是生命周期事件的别名而已: 生命周期钩子 = 生命周期函 ...

Vue3 _ 11. Vue 生命周期生命周期狗子

一、生命周期介绍

1. new Vue()

2. 初始化注入 & 响应性

3. 编译模板

4. 挂载

5. 销毁

二、生命周期钩子使用

Vue3 _ 11. Vue 生命周期生命周期狗子相关推荐

最新文章

热门文章

Vue3 _ 11. Vue 生命周期 生命周期狗子

一、生命周期介绍

1. new Vue()

2. 初始化注入 & 响应性

3. 编译模板

4. 挂载

5. 销毁

二、生命周期钩子使用

Vue3 _ 11. Vue 生命周期 生命周期狗子相关推荐

最新文章

热门文章

Vue3 _ 11. Vue 生命周期生命周期狗子

Vue3 _ 11. Vue 生命周期生命周期狗子相关推荐