VueJS生命周期|七日打卡

什么是VueJS生命周期

就是vue实例从创建到销毁的过程. 每个 Vue 实例在被创建到销毁都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象
created：数据已经绑定到了对象实例，但是还没有挂载对象（使用ajax可在此方法中查询数据，调用函数）
beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的

el属性，el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点
mounted:将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el),生成页面上真正的dom，上面我们就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进行各种操作当我们的data发生改变时，会调用beforeUpdate和updated方法
beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还没有发生改变
updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到 dom上面，完成更新
beforeDestroy,destroyed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听、还有watcher对象数据与view的绑定，即数据驱动

Demo演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_vue入门</title>
    <script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <div id="msg">{{message}}</div>
</div>

<script>
    var vue =  new Vue({
        //表示当前vue对象接管了div区域
        el: '#app',
        //定义数据
        data: {
            message: 'hello word',
        },
        methods:{
            showMsg(msg, obj) {
                console.log(msg);//钩子函数的名称,obj就是vue对象
                console.log("data:" + obj.message);
                console.log("el元素:" + obj.$el);
                console.log("元素的内容:" + document.getElementById("app").innerHTML);
            }
        },
        //beforeCreate:vue对象还没有实例化出来，vue对象中的数据模型还未创建出来
        beforeCreate() {
            this.showMsg('---beforeCreate---', this);
        },
        //created ：数据已经绑定到了对象实例，但是还没有挂载对象
        created() {
            // created钩子函数执行的时候，vue对象已经创建出来了，vue对象中的数据模型已经创建出来了
            // 所以我们可以发送异步请求给服务器获取数据并且赋值给数据模型
            this.message = "你好世界"
            this.showMsg('---created---', this);
        },
        //beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的
        beforeMount() {
            this.showMsg('---beforeMount---', this);
        },
        //mounted:将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el)
        //生成页面上真正的dom，上面我们就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进行各种操作当我们的data发生改变时，会调用beforeUpdate和updated方法
        mounted() {
            //在mounted里面可以获取视图上的数据
            this.showMsg('---mounted---', this);
        }
    });
</script>
</body>
</html>

小结

created()钩子函数中，数据模型就可以赋值了，那么我们可以在这个钩子函数中发送异步请求，获取响应数据然后赋值给数据模型(重点)
mounted()钩子函数中，视图上就已经绑定了数据模型，那么我们就可以获取视图的内容