vue中的生命周期（钩子函数）_vue生命周期与生命周期钩子是同一个概念吗(1)

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

    let vm = new Vue({
        data: {
            msg: "hello",
            arr: [1, 2, 3, 4]
        },
        // 1. 在这个钩子函数执行之前初始化事件以及生命周期
        beforeCreate() {
            // 1. 在这个钩子函数中，不能获取data中的数据
            // console.log(this.msg);
            // 2. 这个函数不能操作DOM；
            // console.log(document.getElementsByTagName("li"))
        },
        // 给Vue的实例注入数据，进行数据监听
        created() {
            // 在created发送请求
            // 1. 可以获取到data中的数据
            // 2. 不能操作DOM的
            //console.log(this.msg);
            // console.log(document.getElementsByTagName("li"))

            axios.get("./carts.json").then(data => {
                // 异步的；
                this.arr = data.data;
                console.log(2);

            })
        },
        methods: {
            getData() {

            },
            fn() {
                this.msg = "world"
            }
        },
        // 执行之前，判断是否有el,template;编译
        beforeMount() {
            // console.log(document.getElementsByTagName("li"))
        },
        // 挂载完毕
        mounted() {
            // debugger
            // 挂载： 把VUE实例生成的虚拟的DOM转成真实的DOM，放在了页面中，这就是挂载；
            // 编译出的DOM把原有的DOM替换完毕；
            // 可以获取最终的DOM元素
            // let d = {type:"div",a:"1",chidlren:[{type:"span",children:[]}]}
            console.log(document.getElementsByTagName("li"));
            //console.log("mounted","初始化");
        },
        // 当数据更新时，会调用beforeUpdate 和updated钩子函数；上面四个不再运行
        beforeUpdate() {
            console.log("beforeUpdate", "更新之前");
            console.log(this.msg)
            // 更新数据之前执行
        },
        updated() {
            console.log("beforeUpdate", "更新之后");
            // 数据更新，虚拟的DOM更新，然后更新真实的DOM；最后触发这个函数
        },
        // 销毁之前
        beforeDestroy() {
            // 销毁之前
            // 清除定时器
            console.log("beforeDestroy");

        },
        // 销毁之后
        destroyed() {
            console.log("destroyed");
            // 销毁子组件，销毁观察者，事件监听者
            // 元素的事件还在，但是更改数据不会再让视图进行更新了；
        }
    }).$mount("#app");
    // vm.$destroy();
    // console.log(vm);
    // 在项目中，你遇到过什么问题，怎么解决的？
    // 准备
</script>

三个钩子函数详解

当keep-alive 缓存组件才会有的生命周期的钩子函数
activated deactivated
errorCaptured 当子孙组件出错时，会调用这个钩子函数
// keep-alive 缓存组件 生命周期的钩子函数 activated deactivated
// 生命周期的钩子函数
activated() {undefined
// 当缓存组件有被显示出来时，会触发这个钩子函数
console.log(100);
},
deactivated() {undefined
// 当缓存的组件隐藏时，会触发这个钩子函数；
console.log(200);
},
// 当子孙组件出错时，会调用这个钩子函数
errorCaptured(a, b, c) {undefined
// 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
console.log(a);
console.log(b);
console.log©;
console.log(“子组件报错”)
},

### 最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

**《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》**

![](https://img-blog.csdnimg.cn/img_convert/b7e194df5eda402a51556fd4ed687279.webp?x-oss-process=image/format,png)



![前端面试题宝典](https://img-blog.csdnimg.cn/img_convert/585676e6444879480341bb80b2f2a9b4.webp?x-oss-process=image/format,png)

![前端校招面试题详解](https://img-blog.csdnimg.cn/img_convert/3d5267cbca8c423d05a1c81ef1c39eba.webp?x-oss-process=image/format,png)



用算法》**

[外链图片转存中...(img-IAxIeQJZ-1715834714857)]



[外链图片转存中...(img-8Ku4bkVK-1715834714857)]

[外链图片转存中...(img-HauW6TGm-1715834714858)]