vue的生命周期钩子函数的作用

之前在大学学习Java的时候笔试题的第一道题经常是你是怎么理解生命周期的在vue的生命周期却又与Java不同的一个java类的完整的生命周期会经历加载、连接、初始化、使用、和卸载五个阶段；
而vue的生命周期则是4个下面这张图应该都很熟悉就是vue官网的图先看看官网是怎么说的:
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

在看官方文档的时候注意到一个细节
不要在选项 property 或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
自从出了es6的箭头函数后我真的能使用箭头函数就使用箭头函数所以很容易出下面这个问题
下面是他们每一步的作用

beforeCreate
类型：Function
详细：
（在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。）
在 beforeCreate 钩子函数调用的时候，是获取不到 props 或者 data 中的数据的，因为这些数据的初始化都在 initState 中。

created
类型：Function
详细：
（在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。）
然后会执行 created 钩子函数，在这一步的时候已经可以访问到之前不能访问到的数据，但是这时候组件还没被挂载，所以是看不到的。

beforeMount
类型：Function
详细：
（在挂载开始之前被调用：相关的 render 函数首次被调用。
该钩子在服务器端渲染期间不被调用。）
接下来会先执行 beforeMount 钩子函数，开始创建 VDOM，

mounted
类型：Function
详细：
实例被挂载后调用，这时 el 被新创建的 vm. e l 替换了。如果根实例挂载到了一个文档内的元素上，当 m o u n t e d 被调用时 v m . el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm. el替换了。如果根实例挂载到了一个文档内的元素上，当mounted被调用时vm.el 也在文档内。
注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：

mounted: function () {this.$nextTick(function () {})
}

该钩子在服务器端渲染期间不被调用。
最后执行 mounted 钩子，并将 VDOM 渲染为真实 DOM 并且渲染数据。组件中如果有子组件的话，会递归挂载子组件，只有当所有子组件全部挂载完毕，才会执行根组件的挂载钩子。

接下来是数据更新时会调用的钩子函数 beforeUpdate 和 updated
beforeUpdate
类型：Function
详细：
数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

updated
类型：Function
详细：
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

注意 updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick：

updated: function () {this.$nextTick(function () {// Code that will run only after the// entire view has been re-rendered})
}

该钩子在服务器端渲染期间不被调用。

另外还有 keep-alive 独有的生命周期，分别为 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 actived 钩子函数。

最后就是销毁组件的钩子函数 beforeDestroy 和 destroyed。
beforeDestroy
类型：Function
详细：
实例销毁之前调用。在这一步，实例仍然完全可用。
该钩子在服务器端渲染期间不被调用。

destroyed
类型：Function
详细：
实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
该钩子在服务器端渲染期间不被调用。

前者适合移除事件、定时器等等，否则可能会引起内存泄露的问题。然后进行一系列的销毁操作，如果有子组件的话，也会递归销毁子组件，所有子组件都销毁完毕后才会执行根组件的 destroyed 钩子函数。

vue的生命周期钩子函数的作用相关推荐

详解Vue八大生命周期钩子函数
摘要:Vue为生命周期中的每个状态都设置了钩子函数(监听函数) .每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用. 本文分享自华为云社区<一文带你弄懂Vue八大生命周期钩子函数&g ...
不来看看这些 VUE 的生命周期钩子函数？ | 原力计划
作者 | huangfuyk 责编 | 王晓曼出品 | CSDN 博客 VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化.可以分为:创建.挂载.更新.销毁四 ...
实战 Vue 之生命周期钩子函数执行顺序
实战 Vue 之生命周期钩子函数执行顺序生命周期钩子函数父组件与子组件执行顺序生命周期钩子函数 beforeCreate:实例刚被创建出来,data 数据和 methods 方法还未被初始化,不 ...
Vue的生命周期钩子函数介绍
感谢内容提供者:金牛区吴迪软件开发工作室 Vue的生命周期钩子函数介绍 vue生命周期共分为四个阶段一:实例创建二:DOM渲染三:数据更新四:销毁实例共有八个基本钩子函数 1.beforeC ...
Vue的生命周期钩子函数
Vue的生命周期钩子函数一.Vue的生命周期共分为四个阶段 1.创建实例 2.DOM渲染 3.数据更新 4.销毁实例二.共有八个基本钩子函数 1.beforeCreate -创建前触发的行为:V ...
教女朋友学习 vue的生命周期钩子函数
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...
VUE页面生命周期钩子函数
预备知识: 1.vue的生命周期生命周期函数,又叫钩子函数生命周期钩子===生命周期函数===生命周期事件 2. 什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据. ...
vue的组件/data的参数/组件传值/插槽/侦听器/生命周期钩子函数
目录组件结构组件的命名规则: 组件的data参数 <font color='red'> 组件的父子传值prop(通信) <font color='red'>组件的子--&g ...
vue生命周期钩子函数的正确使用方式
对于vue生命周期我们还是要先了解清楚,因为不同的生命期用不同的钩子函数,先上图: 遇到的一个问题在我的项目中,常用的生命周期钩子函数一直都是mounted,对于大部分情况,都是屡试不爽.捷报频传~ ...

vue的生命周期钩子函数的作用

vue的生命周期钩子函数的作用相关推荐

最新文章

热门文章