生命周期函数

常用生命周期函数

1. mounted 挂载完成之后 会发送ajax请求 启动定时器 绑定自定义事件(还没讲) 会调用一次(上户口)
2. beforeDestory 清除计时器 解除自定义事件的绑定 取消订阅(还没有讲) (临终遗言)

生命周期注意点:

1. 是vue在关键时期帮助我们调用的 是一些特殊函数
2. 名字不能更改 但是内容可以写自己的逻辑
3. 函数中的this 指向的也是 vm 或者 组件实例对象

参考网址 https://juejin.cn/post/7032881219524100132

vue生命周期.png

// 测试生命周期函数
// 执行一些初始化的工作 此时还拿不到数据
beforeCreate() {
// console.log("执行了 beforeCreate");
// console.log(this.name);

        },
        // 初始化数据完成可以拿到数据了 但是 还没有开始解析模板
        created() {
            console.log(this.name);
            // debugger; // 调试程序指令 程序会停止  注意要 打开 控制命令 刷新才会生效
        },
        // 开始挂载之前 在操作真是DOM之前先告诉你一声
        beforeMount() {
            console.log("准备要挂载了");
            // debugger
        },

        // 挂载完成 可以操作 真实DOM了
        mounted() {
            console.log("挂载完毕");
            // debugger
        },
        // 数据更新之前 告诉你一声  初始化到挂载 不会执行
        //  此时还没有开始 将虚拟DOM 重新渲染
        beforeUpdate() {
            console.log("有数据发生变化了 快来看啊");
            // debugger;
        },
        // 数据更新完成  虚拟DOM 已经重新渲染完成
        updated() {
            console.log("完成了数据更新");
            // debugger
        },
        // 开始销毁之前
        beforeDestroy() {
            console.log("花儿将要凋落 ");
            // debugger  
        },
        // 实例已经被销毁了
        destroyed() {
            console.log(this);
            console.log("彻底凉凉  送一首歌曲");
        },