vue生命周期及使用 && 单文件组件下的生命周期
生命周期钩子
这篇文章主要记录与生命周期相关的问题。 之前,我们讲到过生命周期,如下所示:
根据图示我们很容易理解vue的生命周期:
- js执行到new Vue() 后,即进入vue的beforeCreate状态。
- 接着观察data下的数据,紧接着create。
- create之后,就会检测是否含有el属性,如果有,就直接检测是否含有模板属性; 如果没有,就当vm.$mount()调用之后再检测,vm.$mount()的作用就是将Vue实例挂载到某一个DOM元素上。
- 如果有template,那么我们就编译模板到render函数中,作用就是为了将模板中的元素渲染进去;如果没有template,我们就把el所在的HTML作为模板编译。
- 这样就进入了 beforeMount 状态。
- 在mounted 之前,就会创建一个 vm.$el 用来替代 实例中的el, ok! 这样就可以mouted了。
- 接着,如果data发生了变化,就会有beforeUpdata,在替换了之后,就是updated的状态啦! 这是一个循环的过程,因为updated是可以一直更新的嘛!
- 最后如果我们调用了 vm.$destroy() 就会进入 beforeDestory, 然后解除 watchers、child components 以及 listeners,最后就destroyed了, 那么他的生命也就结束了。
总结来说: 是 new Vue() 开启了vue实例的生命周期, vm.$destroy() 结束了vue实例的生命周期。
当然了,对于不同的生命周期,都对应着相应的钩子函数,且一共有8个钩子函数,如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="example"> <p>朱振伟</p> {{message}} </div> <script> var example=new Vue({ el:'#example', beforeCreate () { alert("beforeCreate"); }, created () { alert("created"); }, beforeMount () { alert("beforeMount"); }, mounted () { alert("mounted"); }, beforeUpdate () { alert("beforeUpdate"); }, updated () { alert("updated"); }, beforeDestroy () { alert("beforeDestroy"); }, destroyed () { alert("destroyed"); } }); </script> </body> </html>
当我们运行之后,会发现,beforeCreate、created、beforeMount、mounted以此触发,如果我们在控制台输入 example.message = "JohnZhu"; 那么就又会依次触发 beforeUpdate 和 updated 对应的钩子函数, 如果我们在控制台输入 example.$destroy() 那么就会依次触发 beforeDestroy 和 destroyed 对应的钩子函数。
生命周期大概就是这样了。
补充:
除了在vue官网(上图)中提到的生命周期钩子之后,vue2中还添加了 activated 和 deactivated 钩子函数,当渲染的组件启用了 keep-alive 时,那么进入一个路由指定的组件时,就会调用 activated 钩子函数,如果一个组件没有设定 keep-alive ,那么就不会调用 activated 钩子函数, 而是调用 deactivated 钩子函数。
比如:
<div id="app"> <keep-alive> <router-view></router-view> </keep-alive> </div>
这里的 router-view 是所有的页面都会在这里渲染的,而 keep-alive 又包裹在这之外,所以说这个app中的所有路由在切换时都会调用 activated 钩子函数。
单文件组件下的生命周期
先看下面这个例子:
<template> <div class="personal-wrap"> <Personal></Personal> <button v-on:click="exit" class="btn" v-if="loginBool">退出登录</button> <button v-on:click="login" class="btn btn-login" v-else>现在登录</button> <FooterMenu></FooterMenu> </div> </template> <script> import FooterMenu from '@components/menu'; import Personal from '@components/personal'; import {mapState,mapMutations, mapActions} from 'vuex' export default { components: { FooterMenu, Personal }, data () { return { loginBool: Boolean(sessionStorage.getItem("loginBool")) } }, methods: { ...mapMutations([ 'UPDATE_PICTURES' ]), ...mapActions([ 'loginWx' ]), exit: function () { var result = confirm("确认注销登录?"); if (result == true) { window.location.href = window.location.href.replace(window.location.search, ""); } }, login: function () { this.loginWx(2); } }, beforeCreate () { document.title = "替换之后"; }, created () { this.UPDATE_PICTURES(3); alert( 'created' + JSON.stringify(document.querySelector('.btn'))); }, beforeMount () { alert( 'beforeMounte' + JSON.stringify(document.querySelector('.btn'))); }, mounted () { alert( 'mounted' + JSON.stringify(document.querySelector('.btn'))); } } </script>
这是一个单文件组件,因为只是为了说明生命周期的使用,删去了一部分。
- beforeCreate 是在创建data之前的钩子,即这时刚刚创建完Vue实例,然后el,data这些还都没有,但是因为这是单文件组件,所以,document.title是可以访问到的,这点值得注意。并且由于这时候是没有data和method可以使用的,所以不能使用method下的方法。
- 接着在created之后,el仍然是没有挂载的,但是data已经初始化完成了,并且一些方法(methods)也已经可以使用了,没有挂载,所以访问不到单组件中的html元素。
- boforeMount 这时仍然没有挂载,只是开始调用了render函数,同样,没有挂载,也是访问不到vue单组件中的html元素的。
-
在mounted之后, 这时已经将vue和组件联系起来,挂载完成,所以就可以得到其中的html元素了。
常用的钩子
可以看出,我们可以在beforeCreate中使用一些操作document的方法。 在created中可以使用大部分的方法。 在 mounted中可以使用与挂载元素相关的一些方法,如操作dom。
补充: 当然,因为localStorage这种东西都是一直存在的,所以在任何生命周期下都是可以正常访问 localStorage 和 sessionStorage的。