beforeCreate(){ // 组件创建之前 }, created(){ // 组件创建之后 // 使用该组件，就会触发以上的钩子函数，created中可以操作数据，发送ajax，实现vue页面的影响 应用：发送ajax请求 }, beforeMount(){ // 装载数据到DOM之前会调用 console.log(document.getElementById('app')); }, mounted(){ // 这个地方可以操作DOM // 装载数据到DOM之后会调用 可以获取到真实存在的DOM元素，vue操作以后的DOM console.log(document.getElementById('app')); }, beforeUpdate(){ // 在更新之前，调用此钩子，应用：获取原始的DOM console.log(document.getElementById('app').innerHTML); }, updated(){ // 在更新之前，调用此钩子，应用：获取最新的DOM console.log(document.getElementById('app').innerHTML); }, beforeDestroy(){ //组件摧毁之前 console.log('beforeDestroy'); }, destroyed(){ //组件摧毁时调用 console.log('destroyed'); }, activated(){ console.log('组件被激活了'); }, deactivated(){ console.log('组件被停用了'); }
生命周期实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <button @click="destoryvm">删除</button> <p v-show="IsShow"> 测试文本 </p> </div> <script src="https://vuejs.org/js/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ IsShow:true, timer:'' }, created(){ //创建时调用 console.log('创建实例成功！') }, mounted(){ //初始化显示之后立即调用 this.timer = setInterval( () => { console.log('正在执行定时器！') this.IsShow = !this.IsShow },1000) }, beforeDestroy(){ //实例死亡前调用 clearInterval(this.timer) }, computed:{ }, methods:{ destoryvm(){ // 干掉view model this.$destroy() } } }) </script> </body> </html>