Vue中Computed和Watch的用法及区别
前端  /  管理员 发布于 4年前   571
本篇文章介绍了vue中的计算属性computed和监听属性watch的区别,希望对学习vue前端框架的同学有帮助!
一、 计算属性(computed)
1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷。
例如:
<p id="app"> {{ myname.substring(0,1).toUpperCase() + myname.substring(1) }} </p>
运算过于复杂,冗长,且不好维护,因此我们对于复杂的运算应该 使用计算属性的方式去书写。
因此可改写为:
<body> <div id="app"> {{ changewords }} // 渲染 不用写() </div></body><script> var vm = new Vue({ el: "#app", data:{}, // 计算属性 computed:{ changewords(){ return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1) } } })</script>
总结:
1.变量不在 data中定义,而是定义在computed中,写法跟写方法一样,有返回值。函数名直接在页面模板中渲染,不加小括号 。
2.根据传入的变量的变化 进行结果的更新。
3.计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化,它调用的就是上一次 计算缓存的数据,因此提高了程序的性能。而methods中每调用一次就会重新计算 一次,为了进行不必要的资源消耗,选择用计算属性。
计算属性模糊查询的例子:
<body> <div id="app"> <input type="text" v-model="mytext"> <ul> <li v-for="data in datalistcom" :key="data"> {{ data }} </li> </ul> </div></body><script> var vm = new Vue({ el: "#app", data:{ datalist:["aaa","bbb","ccc","ddd","aa","a","cc","dd"], mytext:'' }, computed:{ datalistcom(){ return this.datalist.filter(item=>item.indexOf(this.mytext)>-1) } } })</script>
二、监听属性(watch)
上面说到计算属性的时候 初始化的时候就可以被监听到并且计算 但是watch是发生改变的时候才会触发。
当你有一些数据需要随着其它数据变动而变动时,或者当需要在数据变化时执行异步或开销较大的操作时,你可以使用 watch。
例子 :
<body> <div id="app"> <p>单价:<input type="text" v-model="price"></p> <p>数量:<input type="text" v-model="number"></p> <p>计算金额:{{sum}}</p> </div></body><script>var vm = new Vue({ el:"#app", data:{ price:100, number:1, sum:0 }, //监听某一个值或者状态发生变化 变化就会触发watch watch:{ // 监听的参数的名字要一致 price(){ console.log(this.price) if(this.price*this.number < 1000 && this.price*this.number > 0){ this.sum = this.price*this.number + 100 }else{ this.sum = this.price*this.number } }, number(){ console.log(this.price) if(this.price*this.number < 1000 && this.price*this.number > 0){ this.sum = this.price*this.number + 100 }else{ this.sum = this.price*this.number } } }})</script>
计算属性 和属性监听的区别:
1.计算属性变量在computed中定义,属性监听在data中定义。
2.计算属性是声明式的描述一个值依赖了其他值,依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量,当定义的值发生变化时,执行相对应的函数。
以上就是Vue中Computed和Watch的用法及区别的详细内容,更多请关注其它相关文章!
122 在
学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号