vue中的生命周期（钩子函数）_vue生命周期与生命周期钩子是同一个概念吗-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_84446513/article/details/138956706

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

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

beforeCreate created[可以获取数据及方法]
beforeMount mounted[可以获取到真实的DOM]
beforeUpdate updated[数据更新执行]
beforeDestroy destroyed[销毁vue实例，不再具有双向数据绑定的特点]

在这里插入图片描述

<body>
    <div id="app">
        <div>
            {{msg}}
        </div>
        <ul>
            <li v-for="a in arr"></li>
        </ul>
        <button @click="fn">点我一下</button>
    </div>
    <script src="../node\_modules/axios/dist/axios.js"></script>
    <script src="../node\_modules/vue/dist/vue.js"></script>
    <script>
        // 生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例；
      在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，
在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；

        // 生命周期钩子函数，让够让咱们在初始化实例时，添加自己的代码；
        //生命周期的钩子函数中的this，会默认指向vue的实例
        // beforeCreate created 
        // beforeMount mounted
        // beforeUpdate updated
        // beforeDestroy destroyed
        // function Vue(options){
        // let a = document.querySelector(options.el);
        // for(let key in options.data){
        // Object.defineProperty(options.data,key,{
        // get(){

        // },
        // set(){

        // }
        // })
        // }
        // }
        // new Vue({el:"#app",data:{}})


        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() {
                // 销毁之前
                // 清除定时器


### 结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

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

试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中...(img-NyEtfEfV-1715834749212)]