Vue生命周期
Posted xiaozhou223
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue生命周期相关的知识，希望对你有一定的参考价值。
Vue-组件的生命周期
Vue 实例在被创建时都要经过从创建到挂载再到更新、卸载的一系列过程，该过程中会运行一些叫做**生命周期钩子**的函数，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。
一、钩子函数的执行时间
1、beforeCreate
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用，
2、created
使用该组件，就会调用created方法 在created这个方法中可以操作后端的数据，数据响应视图
应用： 发起ajax请求
3、beforeMount
挂载数据到DOM之前会调用：相关的 render 函数首次被调用。
4、mounted
挂载数据到DOM之后会调用 Vue 作用以后的DOM
5、beforeUpdate
在更新DOM之前 调用此钩子函数 应用：可以获取原始的DOM
6、updated
在更新DOM之后 调用此钩子函数 应用：可以获取最新的DOM
7、beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
8、destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
还有两个特殊的（配合使用keep-alive）：[activated](https://cn.vuejs.org/v2/api/#activated)、[deactivated](https://cn.vuejs.org/v2/api/#deactivated)
9、 keep-alive组件被激活时调用
10、deactivated
keep-alive组件被停用时调用
钩子函数中该做的事情
created
> 实例已经创建完成，因为它是最早触发的原因可以进行一些数据，资源的请求。
mounted
> 实例已经挂载完成，可以进行一些DOM操作
beforeUpdate
> 可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
updated
> 可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
>
> 该钩子在服务器端渲染期间不被调用。
destroyed
> 可以执行一些优化操作
keep-alive
> 在使用vue-router时有时需要使用<keep-alive></keep-alive>来缓存组件状态，这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <!-- <App></App> --> </div> <script src="js/vue.js"></script> <script type="text/javascript"> /* 生命周期的钩子函数 函数 beforeCreate created beforeMount mounted beforeUpdate updated activated deactivated beforeDestroy destroyed */ var Test = { data:function() { return { msg:‘hello world‘ } }, template:` <div> <div>{{msg}}</div> <button @click = ‘changeHandler‘>改变</button> </div> `, methods:{ changeHandler(){ this.msg = this.msg +‘哈哈哈‘; } }, beforeCreate:function() { // 组件创建之前 console.log(this.msg); }, created:function() { // 组件创建之后 // 使用该组件，就会调用created方法 在created这个方法中可以操作后端的数据，数据响应视图 // 应用： 发起ajax请求 console.log(this.msg); this.msg = ‘改变了吧‘ }, beforeMount:function () { // 挂载数据到DOM之前会调用 console.log(document.getElementById(‘app‘)); }, mounted:function() { // 挂载数据到DOM之后会调用 Vue 作用以后的DOM console.log(document.getElementById(‘app‘)); }, beforeUpdate(){ // 在更新DOM之前 调用此钩子函数 应用：可以获取原始的DOM console.log(document.getElementById(‘app‘).innerHTML); }, updated(){ // 在更新DOM之后 调用此钩子函数 应用：可以获取最新的DOM console.log(document.getElementById(‘app‘).innerHTML); }, beforeDestroy(){ console.log(‘beforeDestroy‘); }, destroyed(){ console.log(‘destroyed‘); }, activated(){ console.log(‘组件被激活‘); }, deactivated(){ console.log(‘组件被停用‘); } } var App = { data:function() { return { isShow:true } }, // Vue的内置组件，能在组件的切换过程中将状态保留在内存中父，防止重复渲染DOM template:` <div class=‘app‘> <keep-alive> <Test v-if = ‘isShow‘></Test> </keep-alive> <button @click = ‘isShow = !isShow‘>改变生死</button> </div> `, components:{ Test }, methods:{ } } new Vue({ el:‘#app‘, data:function() { return { } }, template:`<App />`, components:{ App } }); </script> </body> </html>
以上是关于Vue生命周期的主要内容，如果未能解决你的问题，请参考以下文章
在不存在的片段上调用片段生命周期和 onCreate 的问题