Vue2生命周期函数

1 beforeCreate (实例创建之前)
在实例初始化之后，进行数据侦听和事件/侦听器的配置之前同步调用

2 created (实列创建之后)
在实列创建完成后立即同步调用。在这一步中，实列已完成对选项的处理，
意味着以下内容已被配置完毕：数据侦听，计算属性，方法，事件/侦听器的回调函数。
然而，挂载阶段还没开始，且$el property目前尚不可用。

3 beforeMount（组件挂载之前）
在挂载开始之前被调用：相关的 render 函数首次被调用。
该钩子在服务器端渲染期间不被调用）

4 mounted（组件挂载之后）
实列被挂载后调用，这时 el 被新创建的 vm.$el替换了。如果根实列
挂载到了一个文档内的元素上，当 mounted被调用时 vm.$el也在文档内。
注意mounted (不会)保证所有的子组件也都被挂载完成。如果你希望等到整个
视图都渲染完毕再执行某些操作，也可以再 mounted 内部使用 vm.$nextTick
该钩子函数在服务器端渲染期间不被调用

5 beforeMount（组件挂载之前）
在挂载开始之前被调用：相关的 render 函数首次被调用。
该钩子在服务器端渲染期间不被调用）

6 mounted（组件挂载之后）
实列被挂载后调用，这时 el 被新创建的 vm.$el替换了。如果根实列
挂载到了一个文档内的元素上，当 mounted被调用时 vm.$el也在文档内。
注意mounted (不会)保证所有的子组件也都被挂载完成。如果你希望等到整个
视图都渲染完毕再执行某些操作，也可以再 mounted 内部使用 vm.$nextTick
该钩子函数在服务器端渲染期间不被调用

7 activated（被 keep-alive 缓存的组件激活时调用）
被keep-alive缓存的组件激活时调用。该钩子函数在服务器渲染期间不被调用。
钩子组件-keep-alive
动态组件-keep-alive

8 deactivated（被 keep-alive 缓存的组件停用时调用）
被keep-alive缓存的组件失活时调用
构建组件-keep-alive
动态组件-keep-alive

9 beforeDestroy（实列销毁之前）
实列销毁之前调用。在这一步，实列完全可用
该钩子在服务器端不被调用

10 destroyed （实列销毁之后）
实列销毁后调用。该钩子被调用后，对应Vue实列的所有指令都被解绑
所有的事件监听器被移除，所有的子实列也都被销毁
该钩子在服务器端不被调用

11 errorCaptured (新增当捕获一个来自子孙组件的错误时被调用)
在捕获一个来自后代组件的错误时被调用。此钩子会收到三个参数。发生错误
的组件实列以及一个包含错误的来源信息的字符串。此钩子可以返回false以
该错误继续向上传播

你可以在此钩子中修改组件的状态。因此在捕获错误时，
在模板或渲染函数中有一个条件判断来绕过其它内容就很重要；
不然该组件可能会进入一个无限的渲染循环。

错误传播规则
1 默认情况下，如果全局的 config.errorHandler 被定义，
所有的错误仍会发送它，因此这些错误仍然会向单一的分
析服务的地方进行汇报。

2 如果一个组件的 inheritance chain (继承链)或 parent chain
(父链)中存在多个 errorCaptured 钩子，则它们将会被相同的错误逐个唤起。

3 如果此 errorCaptured 钩子自身抛出了一个错误，则这个新错误和原本被
捕获的错误都会发送给全局的 config.errorHandler。

4 一个 errorCaptured 钩子能够返回 false 以阻止错误继续向上传播。本质上
是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误
唤起的 errorCaptured 钩子和全局的 config.errorHandler。

Vue2生命周期函数相关推荐

【Vue2.0】—生命周期函数（十）
生命周期函数生命周期函数又叫:生命周期回调函数,生命周期函数. 生命周期钩子是什么:Vue在关键时刻帮我们调用一些特殊名称的函数生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的 ...
vue2的生命周期函数
引入使用一个vue-li搭建的项目,想在页面渲染前从后端拿数据,对挂载的dom进行操作,将初始化的数据改为后端数据. 这样就涉及到生命周期函数的应用了,我们来看看官方给的钩子函数生命周期函数共有1 ...
Vue3生命周期函数的那些事
前言这篇文章给大家介绍关于Vue3中生命周期函数的问题使用过Vue3的朋友都知道,随着 composition API 的引入,我们在使用钩子函数上也发生了一些改变 Vue3的生命周期函数下面告 ...
Vue3生命周期函数
Vue3生命周期函数与vue2的对比: Vue3的setup语法糖直接代替beforeCreate,Created:Destroy更名为Unmount:其他就是直接加on beforeCreate - ...
vue3.0生命周期函数
什么是生命周期: vue中每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建.数据初始化.挂载.更新.销毁,这就是一个组件所谓的生命周期. 在vue2.x中的生命周期为 before ...
Vue生命周期函数详解
生命周期图生命周期方法 var vm = new Vue({el: '#app',data: {msg:'ok'},methods: {show:function () {console.log(& ...
react生命周期函数
在react中,生命周期函数指的是组件在加载前,加载后,以及组件更新数据和组件销毁时触发的一系列方法.通常分为以下几类: 组件加载的时候触发的函数:constructor .componentWill ...
uniapp里的mounted_uni-app 生命周期函数执行顺序
{{message}} 点击 import { mapState, mapMutations } from 'vuex'; var key = 0; export default { data() { ...
小程序的生命周期函数？
onLoad Function 生命周期函数--监听页面加载 onReady Function 生命周期函数--监听页面初次渲染完成 onShow Function 生命周期函数--监听页面显示 on ...

Vue2生命周期函数

Vue2生命周期函数相关推荐

最新文章

热门文章