Vue生命周期计算属性
Posted zhd09
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue生命周期计算属性相关的知识，希望对你有一定的参考价值。
一：生命周期
概述：
1.生命周期又叫钩子函数，跟el、data、同级的位置，指的是vue实例从开始创建到最后销毁经历的三阶段，这三个阶段分别叫创建阶段、运行阶段的钩子函数、销毁阶段的钩子函数。
2.其中,三个阶段一共有8个函数
①创建阶段有四个函数
beforeCreate 实例创建之前
created 实例创建完成
beforeMount 模板挂载之前
mounted 模板挂载之后
②运行阶段有两个函数
beforeUpdate 视图更新之前
updated 视图更新之后
③销毁阶段有两个函数
beforeDestroy 实例销毁之前
destroyed 实例销毁之后
3.生命周期例子+说明
<!DOCTYPE html> <html lang="en"> <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 id="app"> <div id="a">{{msg}}</div> <button @click="msg++">加加</button> </div> <div id="btn">销毁</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 lang="en"> <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 id="app"> <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生命周期计算属性的主要内容，如果未能解决你的问题，请参考以下文章
VUE计算属性、监听&深度监听、八大生命周期、v-if和v-show