Vue的生命周期
生命周期的理解
什么是生命周期呢，就好像是人有生老病死一样，vue组件也有从创建到消亡的一系列过程。这个过程就叫做vue的生命周期
vue的生命周期可分为三大阶段，每个阶段都有对应的函数，叫做钩子，又被成为钩子函数：
挂载（初始化相关属性）
钩子函数
<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唯一的不同就是前者的有效期是会话级别的，后者是永久的