Vue基础知识简介3

Vue生命周期(创建 挂载 更新 销毁)

 

beforeCreate(做遮罩层,显示loading转圈圈)
function beforCreate(){
alert("实例刚刚创建,并未进行数据观测和事件配置")
//创建前状态,el和data并未创建初始化
}
created
function created(){
alert("实例已经完成创建,已进行数据观测和事件配置");
//常用 创建完成状态,data数据已经初始化,el没有
}
beforeMounte
function beforeMounted(){
alert("模板编译之前,还未进行挂载");
//挂载前状态 data 和el已经初始化
}
mounted(与后台 进行对接、从后台 获取的数据显示)
 
 
function mounted(){
alert("模板编译之后,已经完成挂载状态,才会有渲染数据,页面上才会显示数据");
//常用 模板挂载结束状态 已经完成挂载
}
berforeUpdate(vue2.0后增加的)
function beforeUpdate(){
alert("组件更新前");
//更新之前状态
}
updated(vue2.0后增加的)
function updated(){
alert("组件更新之后");
//更新之后状态
}
beforeDestroy
function beforeDestroy(){
alert("组件销毁之前");
//销毁之前状态
}
destroyed
function destroyed(){
alert("组件销毁之后");
//销毁之后状态
}
<div id="my">
{{msg}}
<br/>
<button @click="update">更新组件</button>
<button @click="destroy">销毁组件</button>
</div>
data:{
msg:"hello";
}
methods:{
update(){
this.msg="更新数据";
}
destroy(){
this.$destroy();
}
}

钩子函数

事件劫持机制,用来对事件比较早的处理,说的简单的一点就是把vue内部的一些事件,进行一些别的配置

computed计算属性(引用缓存,用来存储和处理数据)
<div id="my">
<p>{{reverseMsg}}</p>
</div>
data:{
msg:"hello world"
}
computed:{
reverseMsg:function(){
return this.msg.split(' ').reverse().join('');
}
}
计算属性的获取,走到里面的get方法
<button @click="change2()">change2</button>
data:{
num1:200;
},
methods:{
change2(){
console.log(this.num2);
}
},
computed:{
num2:{
get:function(){
return this.num1-1;
},
set:function(val){
this.num1=val;//不能直接修改对应的计算属性 this.num2=val
}
}
}
计算属性的好处

计算属性有一个缓存的机制在里面,如果多次查看,引用的数据没有发生变化,只会调用一次get方法

有缓存,只掉一次get请求,好处是性能会比较好,不好的是有时候数据可能没有发生变化

可以在js里随机去一个数据,去判断是否数据发生变化,

可以css/js加上版本号或者时间戳

这个是浏览器缓存,浏览器缓存机制

<script type="text/javascript" src="js/changeDis.js?ver=122445.v"></script>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值