vue生命周期详解

·  阅读 129

vue生命周期是从vue实例声明到销毁的一个过程,看了很多博主的博客,个人感觉弄懂Vue官方文档的生命周期图才是王道。好吧并不是很清楚,不过大家应该都知道这张图。

为了更好的理解,下面用代码展示下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Vue生命周期方法</title>

    <!--引入vue框架-->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

<div id="app">

    <p>{{msg}}</p>

</div>



<script>



    let vm = new Vue({

        el:'#app',

        data:{

            msg:"hello world"

        },

        methods:{

            say:function () {

                console.log("IT程序员的日常");

            }

        },

        beforeCreate:function () {

            /*执行beforeCreate的时候,表示Vue刚刚出生,还没有任何内容,data/methods都没有初始化*/

            console.log('我还没出生,beforeCreate--'+this.msg);

            this.say();

            console.log('我还没出生,beforeCreate--'+this.say);

        },

        created:function () {

            /*执行created的时候,表示Vue实例已经初始化好了部分内容,data/methods

            * 想在Vue实例中最早访问到data/methods,只有在这个方法才能访问

            */

            console.log('created--'+this.msg);

            this.say();

            console.log('created--'+this.say);

        },

        beforeMount:function () {

            /*执行beforeMount,表示已经根据数据编译好了模板,但是还没有渲染到界面上*/

            console.log('beforeMount'+document.querySelector("p").innerText);

            console.log('beforeMount'+document.querySelector("p").innerHTML);

        },

        mounted:function () {

            /*执行mounted,表示已经根据数据编译好了模板,已经将模板有渲染到界面上,此时可以对界面进行其他操作了*/

            console.log('mouted--'+document.querySelector("p").innerText);

            console.log('mouted--'+document.querySelector("p").innerHTML);

        },

        beforeUpdate:function(){

            /*主要data中的数据发生了变化就会执行

            * 执行beforeUpdate时候,data的数据已经是最新的了,但是没有更新界面上的数据

            *

            * */

            console.log(this.msg);

            console.log('beforeUpdate'+document.querySelector("p").innerText);

            console.log('beforeUpdate'+document.querySelector("p").innerHTML);

        },

        updated:function () {

            /*主要data中的数据发生了变化就会执行

           * 执行updated时候,data的数据已经是最新的了,界面上的数据也已经更新

           *

           * */

            console.log(this.msg);

            console.log('updated1--'+document.querySelector("p").innerText);

            console.log('updated2--'+document.querySelector("p").innerHTML);

        },

        beforeDestroy:function(){

            /*执行beforeDestroy的时候,表示Vue实例即将销毁,但是还未销毁,实例中的数据等都可以使用

            * 最后能使用Vue实例的地址

            * */

        },

        destroyed:function () {

            /*

            * 执行destroyed的时候,表示vue实例完全销毁,实例中的任何内容都不能被使用了

            * */

        }



    })

</script>

</body>

</html>复制代码
结果:


下一节讲在vue生命周期中,异步在哪个阶段实现比较好?




分类:
前端
标签: