组件从创建到销毁的一系列过程叫做组件的声明周期。
vue在整个生命周期里面提供了一些函数，可以在内部实现一些业务逻辑，并且这些函数会在一些特定的场合下去执行。（在生命周期的某一个时刻进行触发）。
组件的生命周期钩子函数大致可以分为三个阶段：初始化 、进行中 、 销毁。
1、初始化：beforecreate – create – beforeMount - mounted
// 一个组件或者实例的生命周期都是通过new开始的// 实例化之后，内部会做一些初始化事件与生命周期相关的配置ponent("my-component",{template:"#my-component",data(){return {msg:1}},// 这个钩子函数初始化的时候立马执行,此钩子函数里面是获取不到数据的// 同时页面中的真实dom节点也没有挂载出来，nullbeforeCreate(){console.log("beforeCreate....")console.log(this.msg,document.getElementById("title")) // undefined null},// created钩子函数内部的数据已经被挂载了，但是真实dom节点还是没有渲染出来// 在这个钩子函数里面，如果同步的去更改数据的话，运行中钩子函数是不会执行的。// 通常会在此钩子函数里面进入ajax的异步操作，另外还可以做一些初始化事件的绑定created(){console.log("created...")console.log(this.msg,document.getElementById("title")) // undefined null},// 接下来的过程，就是组件或者实例去查找各自的模板，让后将其编译成虚拟dom，即将放入render函数中做初始化渲染的操作。// beforeMount代表dom马上就要被渲染出来了，但是还没有真正的在页面中渲染出来// 此钩子函数与created钩子函数基本一致，可以做ajax与初始化事件的绑定操作beforeMount(){console.log("beforeMount....")console.log(this.msg,document.getElementById("title")) // 1 null},// 生成好了虚拟dom，然后在render函数里面替换对应的el，渲染成真实dom节点// 相当于在render函数里面做了一个初始化渲染的操作// 相当于把组件内部的render函数覆盖了。自己的render是将虚拟dom渲染成真实dom的操作render(){// 内部执行不需要写这一步console.log("render.....")},// mounted钩子函数是初始化阶段的最后一个钩子函数// 数据已经挂载完毕了，真实的dom也已经渲染出来了// 这个钩子函数可以用来做一些实例化的相关操作 ===> 拖拽mounted(){console.log("mounted.....")console.log(this.msg,document.getElementById("title")) // 1 dom真实节点},})// 绑定摸板组件new Vue({}).$mount("#app");
2、进行中阶段：beforeUpdate - updated
// 一个组件或者实例的生命周期都是通过new开始的// 实例化之后，内部会做一些初始化事件与生命周期相关的配置ponent("my-component",{template:"#my-component",data(){return {msg:1}},// 运行时钩子函数初始化阶段是不会主动执行的// 只有dom挂载完毕了，然后再去当数据发生变化的时候，beforeUpdate这个钩子函数才会执行beforeUpdate(){console.log("beforeUpdate....")},// 这个钩子函数是可行的// 当数据发生改变的时候，引发虚拟dom的对比，虚拟dom对比完成后，再去渲染真实的dom结构// 当真实的dom结构渲染完成后，内部才会执行updated钩子函数// 数据改变了，然后swiper-slide这几个真实dom生成好了之后，才会进入到updated这个钩子函数里面去updated(){new Swiper(".swiper-container",{loop:true })},})// 绑定摸板组件new Vue({}).$mount("#app");
3、销 毁：beforeDestroy - destroyed
// 一个组件或者实例的生命周期都是通过new开始的// 实例化之后，内部会做一些初始化事件与生命周期相关的配置ponent("my-component",{template:"#my-component",data(){return {msg:1}},// 当组件销毁时，就会触发，vm.$destroy()的时候，组件就会被销毁// 这个钩子函数代表销毁之前，可以做一些善后操作// 例如可以做一些清除事件绑定，清除计时器绑定beforeDestroy(){clearInterval(this.timer) // 清除计时器console.log("beforeDestroy...")},// 组件一旦被销毁了，组件的dom结构还是存在的// 只是组件的双向绑定destroyed(){console.log("destroyed...")}})// 绑定摸板组件new Vue({}).$mount("#app");
注 意：生命周期函数内不能使用箭头函数。
