vue入门笔记系统（二）vue生命周期

vue生命周期这是vue生命周期的示意图具体内容：所有生命周期钩子函数如下：beforeCreate(){console.log(this,"beforeCreate");console.log('el:'+this.$el)console.log('data:'+this.$data)console.log('text:'+this.text)},created(){console.log（这个，“创建”）；console.log('el:'+this.$el)console.log('data:'+this.$data)console.log('text:'+this.text)},beforeMount(){console.log（这，“挂载前”）；console.log('el:'+this.$el)console.log('data:'+this.$data)console.log('text:'+this.text)},mounted(){console.log（这，“挂载前”）；console.log('el:'+this.$el)console.log('data:'+this.$data)console.log('text:'+this.text)},beforeUpdate(){console.log（这，“更新前”）；},updated(){console.log(this,"更新");},activated(){console.log(this,"activated");},deactivated(){console.log(this,"deactivated");},beforeDestroy(){console.log(this,"beforeDestroy");},destroyed(){console.log(this,"销毁");}，打开控制台可以看到上面四个钩子函数是在实例创建后依次执行的，并且这四个函数只会被调用一次；beforeUpdate和update分别在数据更新前后执行；beforeDestroy和destroyed在组件销毁后执行；activated和deactivated是组件使用执行的，下面是对每个过程的详细解释：1.beforeCreateBeforeCreate是初始化一个vue实例。此时Events的初始化已经完成，但是数据还没有完成，所以此时不??要修改数据；2.createcreated时，数据已经绑定到data属性，也就是最早ajax数据请求的地方，此时没有el选项；3、创建的钩子函数和beforeMount之间创建的生命周期结束后，会有一个判断过程，判断对象是否有el选项。如果有，继续向下编译。如果没有el选项，则停止编译，即生命周期停止，直到在vue实例上调用vm.$mount(el)。如果有el选项，会再次判断是否有temple选项：如果有template参数选项，则作为模板编译成render函数。如果没有模板选项，外部HTML将被编译为模板。可以看出，模板中模板的优先级高于外部HTML。4、beforeMount和mounted钩子函数之间的生命周期此时挂载了el选项，可以操作dom了。至此，vue实例的前四个生命周期已经执行完毕。5、beforeUpdate钩子函数和updated钩子函数之间的生命周期当Vue发现data中的数据发生变化时，会触发相应组件的重新渲染，依次调用beforeUpdate和updated钩子函数。6.beforeDestroy和destroyed钩子函数之间的生命周期beforeDestroy钩子函数在实例被销毁之前被调用。在这一步，实例仍然完全可用。destroyed钩子函数在Vue实例销毁后被调用。调用后，Vue实例指向的所有东西都将被解除绑定，所有事件监听器将被移除，所有子实例将被销毁。另：activated：激活keep-alive组件时调用。服务器端渲染期间不会调用此挂钩。deactivated：当keep-alive组件被停用时调用。服务器端渲染期间不会调用此挂钩。