Vue的生命周期

首先，vue的生命周期是个啥？

借用官网的一句话就是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中，具体vue做了些啥，我们今天来了解一下。

vue的生命周期一共有11个，现在我先把它全部列举出来：

(注意：顺序不可以颠倒)

1.beforeCreate — 创建前

2.created — 创建后

3.beforeMount — 挂载前

4.mountde — 挂载后

5.beforeUpdate — 更新前

6.updated — 更新后

7.beforeDestroy — 销毁前

8.destroyed — 销毁后

还有两个要用来配合keep- alive 来使用的：

9.activated–组件激活时调用

deactivated–组件停用的时候调用

errorCaptured–捕捉子组件错误时调用

创建前后：实例的创建; 从 创建后（created）开始可以获取data内的数据)
挂载前后：dom的挂载， 从 挂载后(mounted开始可以获取dom元素)

现在我们说一下声明周期函数通常所做的事情：

     beforeCreate： 修改页面的title     页面加载的进度条created： 发送网络请求  mounted:发送网络请求beforeUpdate -- updated 什么更新？视图的更新beforeDestroy -- destroyed 清除定时任务： setTimeout  setInterval移除监听： .removeEventLinster()    this.$bus.$off()如果非要在 created内获取dom元素：this.$nextTick().then(res=>{})this.$nextTick(()=>{})errorCaptured捕捉子组件的错误的，有三个参数：1. 错误的信息2. 错误的组件3. 错误的位置可以返回值： 如果返回true,错误向外暴露，如果返回false 错误隐藏

<script type="text/javascript">import mychild from '@/components/child.vue'export default {data:function(){return {num: 0}},components:{mychild},errorCaptured(a,b,c) { //  console.log('errorCaptured',a,b,c)return true},methods:{add(){this.num++console.log(this.num)}},beforeCreate(){document.querySelector('title').innerText = '2111B'console.log('beforeCreate',this.num)console.log('beforeCreate',document.querySelector('p'))},created() {// console.log('created',this.num)// console.log('created',document.querySelector('p'))this.$nextTick().then(res=>{console.log('ref获取--nextTick',this.$refs['hahatag'])})this.$nextTick(()=>{console.log('ref获取--nextTick',this.$refs['hahatag'])})setTimeout(()=>{console.log('ref获取setTimeout',this.$refs['hahatag'])})},beforeMount() {console.log('beforeMount',document.querySelector('p'))},mounted() {console.log('mounted',document.querySelector('p'))console.log('ref获取',this.$refs['hahatag'])},beforeUpdate() {console.log('beforeUpdate')},updated() {console.log('updated')},beforeDestroy(){},destroyed(){},activated() {},deactivated() {},// errorCaptured() {// }}
</script>

我总结的基本上就是上述的这些了，希望可以对各位有所帮助！

Vue的生命周期详细介绍相关推荐

Android生命周期帮助类,Android Service类与生命周期详细介绍_Android_脚本之家
Android Service类与生命周期 Service是Android四大组件与Activity最相似的组件,都代表可执行的程序,区别在于Service一直在后台运行且没有用户界面. 1.Ser ...
react生命周期详细介绍
目录挂载:在组件实例被创建并插入到dom中时,生命周期调用顺序如下 constructor componentWillMount getDerivedStateFromProps render co ...
Vue的生命周期钩子函数介绍
感谢内容提供者:金牛区吴迪软件开发工作室 Vue的生命周期钩子函数介绍 vue生命周期共分为四个阶段一:实例创建二:DOM渲染三:数据更新四:销毁实例共有八个基本钩子函数 1.beforeC ...
java 实例的生命周期_[Java教程]Vue实例生命周期
[Java教程]Vue实例生命周期 0 2017-08-15 19:00:09 前面的话 Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等.在此过程中,我们可以通过一 ...
vue 八大生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程--例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期的函数,这给了 ...
vue 生命周期_深入理解Vue实例生命周期
‍vue实例生命周期与生命周期钩子‍ 每个 Vue 实例在被创建时都会经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 为了让开发者在 ...
如何解释vue的生命周期才能令面试官满意？
当面试官问:"谈谈你对vue的生命周期的理解",听到这句话你是不是心里暗自窃喜:这也太容易了吧,不就是beforeCreate.created.beforeMount.mounte ...
vue基础--vue的生命周期
一.什么是Vue生命周期 Vue实例从创建到销毁的过程. vue的每个组件从创建到销毁都会经历是系统特定的过程,就是vue的生命周期. 二.生命周期介绍 1.阶段 vue的生命周期可以简单的分为四 ...
vue之vue的生命周期、swiper、自定义组件的封装、自定义指令、过滤器、单文件组件及vue-cli
文章目录 1.vue的生命周期 1.1.8个生命周期函数 2.swiper 3.自定义组件的封装 4.自定义指令 4.1.定义 4.2.基本使用 4.3.利用自定义指令传入指定参数修改背景色 5.过滤 ...

Vue的生命周期详细介绍