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('');
}
}

计算属性值的获取与变更，主要是用第二种方法

1、<div id="my"><!--单纯的获取-->
<p>{{num2}}</p>
</div>

data:{
num1:200
}
computed:{
num2:function(){
return this.num1-1;
}
}

2、<button @click="change1">change</button>

data:{
num1:200;
},
methods:{
change1(){
return this.num2=111;//num2计算属性,进入num2属性的set方法，将111传入
}
},
computed:{
num2:{
get:function(){
return this.num1-1;
},
set:function(val){
this.num1=val;//不能直接修改对应的计算属性 this.num2=val
}
}
}

计算属性的获取，走到里面的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>

猜你喜欢