Vue生命周期、计算属性
一：生命周期
概述：
1.生命周期又叫钩子函数，跟el、data、同级的位置，指的是vue实例从开始创建到最后销毁经历的三阶段，这三个阶段分别叫创建阶段、运行阶段的钩子函数、销毁阶段的钩子函数。
2.其中,三个阶段一共有8个函数
①创建阶段有四个函数
beforeCreate 实例创建之前
created 实例创建完成
beforeMount 模板挂载之前
mounted 模板挂载之后
②运行阶段有两个函数
beforeUpdate 视图更新之前
updated 视图更新之后
③销毁阶段有两个函数
beforeDestroy 实例销毁之前
destroyed 实例销毁之后
3.生命周期例子+说明
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>生命周期举例</title>
</head>
<body>
<div >
<div >{{msg}}</div>
<button @click="msg++">加加</button>
</div>
<div >销毁</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:10
},
beforeCreate(){//实例创建之前
//实例刚刚创建,new vue上只有生命周期函数
console.log(this.msg);//undefined
},
created(){//实例创建完成
//data和methods里的方法可以使用了
console.log(this.msg);//10
},
beforeMount(){//模板挂载之前
//模板编译成的模板字符串会被放进内存中生成一个虚拟dom节点
console.log(a.innerHTML);//{{msg}}
},
mounted(){//模板挂载之后
console.log(a.innerHTML);//10
},
beforeUpdate(){//视图更新之前
//也就是说data里的数据发生改变，但视图里的数据还没有发生改变
console.log(this.msg);//11
console.log(a.innerHTML);//10
},
updated(){//视图更新之后
//视图里的数据跟着data里的数据改变之后
console.log(this.msg);//11
console.log(a.innerHTML);//11
},
beforeDestroy(){//实例销毁之前
console.log(this.msg);//11
},
destroyed(){//实例销毁之后
console.log(this.msg);//11
}
})
//vm.$destroy() 让vue实例销毁的方法
//实例销毁之后再次点击加加按钮会失效
btn.onclick=()=>{//点击销毁
vm.$destroy();
}
</script>
</body>
</html>二：计算属性（computed）
概述：
1.在methods方法里，他没有缓存、只要数据一改变就会重新执行，但是跟他无关的数据也会执行。而计算属性可以解决这个问题
2.计算属性是一个属性，用法跟data里定义的数据用法一样。它需要一个return值 ，并且他有缓存。只有跟他有关的data发生变化的时候才会重新计算，跟他无关的数据发生变化不会触发。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计算属性例子</title>
</head>
<body>
<div >
<button @click="a++">a++</button>
<button @click="str='world'">str变化</button>
a:{{adda()}}
<br>
方法methods里的{{changestr()}} <br>
计算属性computed里的{{changestr2}}
</div>
<script src="lib/vue-2.4.0.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
a:0,
age:10,
str:"hello"
},
methods:{
adda(){
console.log("aaa")
return this.a+this.age
},
changestr(){
console.log('我是methods里的changestr')
return this.str.repeat(3)//重复三遍
}
},
// 计算属性
computed:{
changestr2(){
console.log('我是methods里的changestr2')
return this.str.repeat(3)
}
},
//点击a++的时候，后台打印结果如下
//aaa
//我是methods里的changestr
//每点击a++一次,它就会打印一次
//而当点击str变化的时候,后台打印结果是
//aaa
//我是methods里的changestr
//我是methods里的changestr2
//因为点击后str已经等于world了,所以当你再次点击tr变化的时候,他就不会打印了
})
</script>
</body>
</html>- 上一篇 »Vue生命周期
- 下一篇 »vue2.0生命周期、计算属性、watch的执行顺序