生命周期钩子

  这篇文章主要记录与生命周期相关的问题。 之前,我们讲到过生命周期,如下所示:

根据图示我们很容易理解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();
}
},
beforeCreate () {
document.title = "替换之后";
},
created () {
this.UPDATE_PICTURES();
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的。

vue生命周期及使用 && 单文件组件下的生命周期的更多相关文章

  1. 如何在vue && webpack 项目中的单文件组件中引入css

    引入方式很简单,就是在script下使用require()即可. 因为import 是import...from 的形式,所以是不需要的. <script> import {mapStat ...

  2. Vue知识整理16:单文件组件

    过程较为复杂,这里直接写出视频地址,可以直接查看 https://learning.dcloud.io/#/?vid=14

  3. vue 单文件组件最佳实践

    vue 单文件组件最佳实践 生命周期 template <template> <section> <h1>vue single file components te ...

  4. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  5. vue第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期)

    第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期) #课程目标 掌握安装 vue-cli 命令行工具的方法,掌握使用命令行在本地搭建开发环境,使用命令行 ...

  6. Vue单文件组件基础模板

    背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点, ...

  7. Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  8. 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生

    第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...

  9. webpack入坑之旅(五)加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

随机推荐

  1. BZOJ 2301 Problem b(莫比乌斯反演+分块优化)

    Description 对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公约数. Input 第一行一个整数 ...

  2. [转] SAAS, PAAS, IAAS

    SaaS:软件即服务.如CRM.HRM.SCM等等,是可以直接使用的,所以是和多数用户接触最多的一个层面,典型的比如CRM类软件SalesForce. PaaS:平台即服务.如数据挖掘.系统管理.编程 ...

  3. Eclipse平台下配置Go语言开发环境(Win7)

    <Go语言编程>中写到:“从功能和易用性等方面考虑, Eclipse+GoEclipse.LiteIDE这两个环境在所有IDE里面是表现最好的”,所以笔者打算采用Eclipse+GoEcl ...

  4. javascript鼠标双击时触发事件大全

    javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...

  5. 浅谈短视频APP的发展趋势

    2014年6月20日,在AppAnnie最新发布5月应用指数中,美拍荣登“非游戏类iOS榜单”全球下载量第一位置,成为全球iOS应用商店最热门APP.能在<AppAnnie应用指数>这份A ...

  6. C# worksheet设置Excel样式

    1.例子导出Excel的样式 样式代码 public void Exportdatagridviewtoexcel(string Textname) { SaveFileDialog savedial ...

  7. 「BZOJ 3123」「SDOI 2013」森林「启发式合并」

    题意 你有一个森林,你需要支持两个操作 查询两个结点路径上权值第\(k\)小 两个点之间连一条边 强制在线,结点数\(\leq 8\times 10^4\) 题解 如果可以离线,这就是一个主席树板子题 ...

  8. 3月份GitHub上最热门的Java开源项目

    今天,我们来盘点3月份GitHub上最热门的Java项目的时候了,如果你每月都有关注猿妹发布的排行榜,那么本月的Java项目对你来说一定不陌生,这些都是曾经多次出现在榜单中的项目: 1 advance ...

  9. 【bzoj4514】: [Sdoi2016]数字配对 图论-费用流

    [bzoj4514]: [Sdoi2016]数字配对 好像正常的做法是建二分图? 我的是拆点然后 S->i cap=b[i] cost=0 i'->T cap=b[i] cost=0 然后 ...

  10. Windowns DOS For 循环实例

    update_all.bat代码示例: @echo off echo ***************************************************************** ...