vue生命周期

 

如上图

它可以总共分为 8 个阶段：
• beforeCreate（创建前） ,
在实例初始化之后， 数据观测(data observer) 和 event/watcher 事件配置之前被调
用。
• created（创建后） ,
实例已经创建完成之后被调用。 在这一步， 实例已完成以下的配置： 数据观测
(data observer)， 属性和方法的运算， watch/event 事件回调。 然而， 挂载阶段还
没开始， $el 属性目前不可见。
• beforeMount(载入前),
在挂载开始之前被调用： 相关的 render 函数首次被调用。
• mounted（载入后） ,
el 被新创建的 vm.$el 替换， 并挂载到实例上去之后调用该钩子。 如果 root 实例挂
载了一个文档内元素， 当 mounted 被调用时 vm.$el 也在文档内。
• beforeUpdate（更新前） ,
数据更新时调用， 发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中
进一步地更改状态， 这不会触发附加的重渲染过程。
• updated（更新后） ,
由于数据更改导致的虚拟 DOM 重新渲染和打补丁， 在这之后会调用该钩子。
当这个钩子被调用时， 组件 DOM 已经更新， 所以你现在可以执行依赖于 DOM 的
操作。 然而在大多数情况下， 你应该避免在此期间更改状态， 因为这可能会导致更
新无限循环。
该钩子在服务器端渲染期间不被调用。
• beforeDestroy（销毁前） ,
实例销毁之前调用。 在这一步， 实例仍然完全可用。
• destroyed（销毁后）
Vue 实例销毁后调用。 调用后， Vue 实例指示的所有东西都会解绑定， 所有的事件
监听器会被移除， 所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调
用。

代码段

 

export default{
        data(){
            return {num:5,timer:null}
        },
        methods:{
            showWin(){
                console.log(window.innerWidth);
            }
        },
        //创建前后
        beforeCreate() {
            //创建前，有this，没有data，methods dom节点
            console.log("beforeCreate",this.num,this);
        },
        created() {
            //创建完毕,有data,没有el
            console.log("**created",this.num,this.$el);
            //作用:发起ajax请求 开启定时器 监听事件
            //开启定时器
            this.timer = setInterval(()=>{
                this.num++;
                console.log("滴答");
            },1000)
            
            //监听事件
            window.addEventListener("resize",this.showWin)
        },
        //挂载前后
        beforeMount() {
            //dom挂载前,有$el,没有渲染数据
            //使用脚手架，动态更新造成的underfined (在非脚手架状态下可以)
            console.log("beforeMount",this,document.querySelector("#btn"));
        },
        mounted(){
            //挂载完毕
            //this 当前组件的实例
            //this.$el 当前组件的dom节点
            //this.num 当前组件的属性
            console.log(this,this.$el,"组件的实例this");
            console.log("*mounted",this.$el,document.querySelector("#btn"));
            //作用:发起ajax请求 开启定时器 监听事件 --操作dom节点
        },
        beforeDestroy() {
            //结束计时器
            clearInterval(this.timer)
            //移除事件监听
            window.removeEventListener("resize",this.showWin)
            // this.num++;
            // console.log("卸载前");
        },
        destroyed(){
            //切断视图与vue实例的联系
            console.log("卸载后");
        }
    }