Vue的生命周期及钩子函数

最新推荐文章于 2023-07-14 14:11:12 发布

-abandon-

最新推荐文章于 2023-07-14 14:11:12 发布

阅读量420

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/wasdf231/article/details/125475510

版权

本文详细介绍了Vue的生命周期，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed这八个钩子函数。在不同阶段，Vue实例的状态和操作各有特点，例如beforeCreate阶段数据模型已创建但视图未生成，mounted阶段完成挂载，updated阶段完成数据更新。这些生命周期理解对于优化Vue应用和进行组件间的协调至关重要。

摘要由CSDN通过智能技术生成

Vue的生命周期及钩子函数

Vue生命周期是指vue实例对象从创建之初到销毁的过程。

生命周期图：

在这里插入图片描述

vue实例的生命周期，及其八个钩子函数

1、创建 beforeCreate created
2、挂载 beforeMount mounted
3、更新 beforeUpdate updated
4、销毁 beforeDestroy destroyed

(1):①、beforeCreate:创建实例前。视图view和data数据模型都未被创建

②、created:创建完成（后）。视图view未被创建，data数据模型被创建

(2):①、beforeMount:挂载前(开始创建模型)。视图view未被真正创建只是进行占位，data数据模型被创建

②、mounted:挂载后(创建完成)。视图view被真正创建并进行数据绑定，data数据模型被创建

(3):①、beforeUpdate 更新前。data模型被更新，view视图未被更新。更新前的准备

②、updated 更新后。view和data都被更新。更新完成

(4):①、bbeforeDestroy 销毁前，做销毁前的准备

②、destroyed 销毁后。销毁完成

生命周期

生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例；
在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，
在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；

生命周期钩子函数

生命周期钩子函数，让够让咱们在初始化实例时，添加自己的代码；
生命周期的钩子函数中的this，会默认指向vue的实例;

钩子函数

 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也更新，
//在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；
        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>
</body>

</html>

结果

<body>
    <div id="app">
        <ul>
            <li v-for="a in arr">{{a}}</li>
        </ul>
        {{sum}}
    </div>
    <script src="../node_modules/axios/dist/axios.js"></script>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            data:{
                 arr:[1,2,3]
            },
            created(){
                // 此时并没有编译模板
// 如果在created改变数据，那么编译进行一次；如果在mounted中改数据，会再次编译模板；
                console.log(100);
            },
            beforeMount(){ 
                console.log(200);
//this.arr=[1,2,3,4];// 开始编译模板编译原有数据编译3个li,存在内存中，
当数据更新时，立即将内存中的模板编译成4li;最后挂载到真实的DOM上；不会引发beforeUpdate函数的调用
            },
            computed:{
                sum(){
                    // 在挂载的过程中,执行的这个函数
                    console.log(1);
                    return 100;
                }
            },
            // 编译模板
            // 在mounted之前改数据，不会调用beforeUpdate这个函数；
            // DOM 已经挂载完毕
            mounted(){
                console.log(300);
                this.arr=[1,2,3,4];
// 开始编译模板编译原有数据编译3个li,存在内存中，并且直接挂载到了真实DOM中，当数据更新时，
立即将内存中的模板编译成4li;再次把最新挂载到真实的DOM上；会引发beforeUpdate函数的调用
// VUE中DOM的更新是异步的；
// 如何在mounted中操作最新的DOM呢？
// $nextTick需要传入一个回调函数，会当真实的DOM再次更新完成，会立即调用这个回调函数；
                this.$nextTick(()=>{
                    let oLis = document.getElementsByTagName("li")
                    console.log(oLis.length);
                });
            },
            beforeUpdate(){
                console.log("beforeUpdate");
            }
        }).$mount("#app");
    </script>
</body>
</html>