Open zxdfe opened 2 years ago
vue
生命周期是指 vue实例/组件 从创建到销毁的过程。
Vue
生命周期一般有4个阶段(初始化,挂载,更新,销毁),每个阶段的前后都有一个钩子函数。
beforeCreate => created => beforeMount => mounted => beforeUpdate => updated => beforeDestroy => destroyed
created : 当数据与方法初始化完成后执行的函数,此时可以在当前函数中使用方法与数据 - 常用来在这个阶段获取后端数据。
mounted :当真实dom
挂载到页面上之后执行的函数,此时可以在函数中操作dom
,并且可以执行所有在created中执行的逻辑。
=> 如果一个方法很难判断在created或者是mounted中执行时,直接放到mounted中即可
更新阶段的2个函数beforeUpdate、updated
存在 死循环数据更新 的问题,所以如果需要监听某个数据发生的变化时,用watch监听器来代替更新阶段的钩子函数。
beforeDestroy
:如果当前组件中定义了全局的异步操作(主要是定时器),那么在销毁前 (beforeDestroy
)时需要主动关闭这些异步操作。
其他的三个钩子函数:
errorCaptured: 当捕获一个来自子孙组件的错误时被调用。
activated: 被 keep-alive 缓存的组件激活时调用。
deactivated
1.vue有一般情况下有初始化、挂载、更新和销毁四个生命周期,以及四个生命周期对应的八个钩子函数; 2. 在初始化周期的钩子函数包括beforeCreate()和created(),created()在vue中data、methods等里面的数据生成后触发,实际开发中一般会在created()中进行进行获取页面初始数据以及一些静态数据的操作; 挂载周期包括deforeMount()和mounted()两个钩子函数,分别表示真实DOM结构挂载之前和挂载触发,实际开发中如果需要在DOM加载之后第一时间对DOM进行操作,一般会在mounted()钩子函数中进行; 更新周期包括beforeUpdata()和updated()两个钩子函数,分别表示数据更新之前和数据更新之后触发,但实际开发中一般不会使用这两个函数,因为当数据频繁更新时,每一次数据更新就会触发一次对应的函数,会造成循环,如果需要对数据更新进行监视触发一定的逻辑,可以通过监听器watch来实现; 销毁阶段包括beforeDestroy()和destroyed()两个钩子函数,表示vue实例销毁前和销毁后触发的函数,实际开发中一般会在beforeDestroyed()中对定时器、计时器等进行关闭,如果不关闭,当组件销毁后定时器也会继续执行; 3.除了以上八个钩子函数外,当组件中使用keep-alive缓存组件时,vue会触发两个全新的钩子函数,分别是激活时触发的activated()和失活时触发的deactivated(),此时上面的八个钩子函数会失效;