vue生命周期(created,mounted具体用于哪些场景)、三种存储的区别

vue生命周期

什么是生命周期呢,就好像是人有生老病死一样,vue组件也有从创建到消亡的一系列过程。这个过程就叫做vue的生命周期

vue的生命周期可分为三大阶段,每个阶段都有对应的函数,叫做钩子,又被成为钩子函数:

挂载(初始化相关属性)

beforeCreate:vue实例刚被创建出来,此时还没有初始化好data与methods属性。

create:data与methods已经初始化,但是还没有编译模板。–【请求数据】

beforeMount:完成了编译,但是还没有挂载到页面中。

mounted:已经将编译好的模板,挂载到页面指定的容器中。
更新(元素或组件的更新操作)-----【非父子通讯】

beforeUpdate:更新之前执行此函数。data中的状态是最新的,但是页面上显示的数据还是旧值。

update:更新完成后执行此函数。data与页面上的数据都是最新的。
销毁(销毁相关属性)

beforeDestroy:准备销毁,但是还没有销毁。实例属性和方法仍然可以使用。

destroyed:已经销毁,实例不可用。

<div id="app">
    <p>
        {{msg}}
    p>
    <button @click="update">更新button>
    <button @click="destroy">销毁button>
div>
var myVue=new Vue({
    el:"#app",
    data:{
        msg:"aaa",
    },
    methods:{
        update(){
            this.data = 'bbb'
        },
        destroy(){
            this.$destroy();
        }
    },
    beforeCreate:function(){
        /*
     在调用beforeCreate的时候, 仅仅表示Vue实例刚刚被创建出来
     此时此刻还没有初始化好Vue实例中的数据和方法, 所以此时此刻还不能访问Vue实例中保存的数据和方法
            * */
        console.log(this.msg);
        console.log(this.update);
    },
    created:function(){
        /*
            在调用created的时候, 是我们最早能够访问Vue实例中保存的数据和方法的地方
            * */
        console.log(this.msg);
        console.log(this.update);
    },
    beforeMount:function(){
        /*
            在调用beforeMount的时候, 表示Vue已经编译好了最终模板, 但是还没有将最终的模板渲染到界面上
            * */
        console.log(document.querySelector("p").innerHTML);
        console.log(document.querySelector("p").innerText);
    },
    mounted:function(){
        /*
            在调用mounted的时候, 表示Vue已经完成了模板的渲染, 表示我们已经可以拿到界面上渲染之后的内容了
            * */
        console.log(document.querySelector("p").innerHTML);
    },
   beforeUpdate:function(){
            /*
            在调用beforeUpdate的时候, 表示Vue实例中保存的数据被修改了
            注意点: 在调用beforeUpdate的时候, 数据已经更新了, 但是界面还没有更新
            * */
            console.log("beforeUpdate");
            console.log(this.msg);
            console.log(document.querySelector("p").innerHTML);
        },
        updated:function(){
            /*在调用updated的时候, 表示Vue实例中保存的数据被修改了, 并且界面也同步了修改的数据了* */
            console.log(this.msg);
            console.log(document.querySelector("p").innerHTML);
        },
    beforeDestroy: function(){
            /*
            在调用beforeDestroy的时候, 表示当前组件即将被销毁了
                    beforeDestroy函数是我们最后能够访问到组件数据和方法的钩子函数
            * */
            console.log("beforeDestroy");
            console.log(this.msg);
            console.log(this.say);
        },
        destroyed: function(){
            /*
            在调用destroyed的时候, 表示当前组件已经被销毁了,不要在这个生命周期方法中再去操作组件中数据和方法
            * */
            console.log("destroyed");
        }
})

created和mounted在什么情况下使用【请注意】

create方法,在页面还未渲染成html前,调用函数,从后端获取数据,在实现对页面的数据进行显示
mounted通常是在一些插件的使用或者组件的使用中进行操作 也就是页面渲染之后执行 通常情况下我们会在没有相应的点击事件,但需要在页面展示过程中去不断调用某一函数情况下使用。

存储的三者之间的区别

cookie:数据存储,跨页面通讯;
数据每次都会发送给服务端;

前后端都可以操作;

cookie的默认是会话级别的有效期,即页面打开到页面关闭;但可以手动设置过期时间;

只要cookie里面有数据,请求的时候都会自动携带;

存储大小:4KB左右

localStorage:存储数据,跨页面通讯;
不会与服务器端通讯,相对与cookie较安全,不用担心数据被截获;

只能有前端操作,后端操作不了;

存储的时效性是永久的,但是可以手动删除;

请求的时候都不会自动携带;

存储大小:5M左右

sessionStorage:存储数据;
不会与服务器端通讯,相对与cookie较安全,不用担心数据被截获;

只能有前端操作,后端操作不了;

仅在当前会话下有效。只要这个浏览器窗口关闭后就会被销毁;

只能有前端操作,后端操作不了;

存储大小:5M左右;

也就是说,sessionStorage与localStorage唯一的不同就是前者的有效期是会话级别的,后者是永久的

你可能感兴趣的:(vue生命周期(created,mounted具体用于哪些场景)、三种存储的区别)