Vue2.0生命周期附源码

最新推荐文章于 2024-04-04 19:10:17 发布

A-linWeb

最新推荐文章于 2024-04-04 19:10:17 发布

阅读量170

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_48046110/article/details/110005234

版权

Vue2.0生命周期八步曲

beforeCreate :
beforeCreate执行时，data选项没有初始化；渲染的虚拟DOM树没有生成，且没有挂载到容器。
可以在这加个loading事件，在加载实例时触发
created：
由于data选项已经存在，所以在此发起ajax请求最合理。(数据越早拿回来越好)这结束loading事件
created执行时，data选项已经被注入到实例，即data选项已经被初始化，可以使用；渲染的虚拟DOM树没有生成，且没有挂载到容器。
beforeMount：
beforeMount执行时，渲染的虚拟DOM树已经生成，但未挂载到容器
在这里插入图片描述
mounted：
mounted执行时，虚拟DOM树被解析，且挂载到容器

beforeUpdte：
数据发生变化前执行，在此可以进行数据监视
updated：
数据发生变化后执行，在此可以进行数据监视
beforeDestroy：
组件销毁前执行
destroyed：
组件销毁后执行

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{msg}}</p>
        <p>
            <input type="text" v-model="msg">
        </p>
    </div>
    <script src="vue.min.js"></script>
    <script>

        var app = new Vue({
            // el: '#app',
            data: {
                msg: "hello"
            },
            beforeCreate() {
                // 能不能在beforeCreate发起ajax请求？能发起请求，但无法绑定到data选项上。
                console.log("1.beforeCreate执行时，data选项没有初始化；渲染的虚拟DOM树没有生成，且没有挂载到容器");
                // console.log(this.msg);
                // console.log(this.$data);
                // console.log(this.$el);
            },
            created() {
                // 由于data选项已经存在，所以在此处发起ajax请求最合理。数据越早拿回来越好。
                // vue在created()钩子函数前都做了什么?  （概率高）
                console.log('2.created执行时，data选项已经被注入实例，即data选项已经被初始化，可以使用了；渲染的虚拟DOM树没有生成，且没有挂载到容器。')
                // console.log(this.msg);
                // console.log(this.$data);
                // console.log(this.$el);
            },
            // 在执行了created钩子之后，vue判断一个组件有没有el选项，如果有el选项，再判断有没有tempate选项，如果有template选项，编译el选项对应的视图模板（渲染视图：生成一段html代码片段）

            // 渲染的虚拟DOM树怎么生成的？  vue调用渲染函数render()生成的。
            beforeMount(){
                console.log('3.beforeMount执行时，渲染的虚拟DOM树已经生成，但未挂载到容器。')
                console.log(this.$el);
            },
            // mount鞍在马上，组件准备好了。
            // mounted之前，vue做了什么??  解析虚拟DOM树，挂载到容器。
            mounted(){
                console.log('4.mounted执行时，虚拟DOM树被解析，且挂载到容器。')
                console.log(this.$el);
            },
            beforeUpdate(){
                console.log("5.数据发生变化前执行，在此可以进行数据监视")
            },
            updated(){
                console.log("6.数据发生变化后执行，在此可以进行数据监视")
            },
            beforeDestroy(){
                console.log("7.组件销毁前执行")
            },
            destroyed(){
                console.log("8.组件销毁后执行")
            }

        })

        // 相当于el:'#app', 表示把vue实例和容器建立关联。
        app.$mount('#app')


    </script>
</body>

</html>