Vue中Computed和Watch的用法及区别

简介本篇文章介绍了vue中的计算属性computed和监听属性watch的区别,希望对学习vue前端框架的同学有帮助!一、计算属性(computed)1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷。例如:{{myname.substring(0,1).toUpperCase()+myname.substring(1)}}运算过于复杂,冗长,且不好维护,因此我们对于复杂的运算应

  

本篇文章介绍了vue中的计算属性computed和监听属性watch的区别,希望对学习vue前端框架的同学有帮助!

Vue中Computed和Watch的用法及区别

一、 计算属性(computed)

1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷。

例如:

<pid="app">{{myname.substring(0,1).toUpperCase()+myname.substring(1)}}</p>

运算过于复杂,冗长,且不好维护,因此我们对于复杂的运算应该 使用计算属性的方式去书写。

因此可改写为:

<body><divid="app">{{changewords}}//渲染不用写()</div></body>< >varvm=newVue({el:"#app",data:{},  //计算属性computed:{changewords(){returnthis.myname.substring(0,1).toUpperCase()+this.myname.substring(1)}}})</ >

总结:

1、变量不在 data中定义,而是定义在computed中,写法跟写方法一样,有返回值。函数名直接在页面模板中渲染,不加小括号 。

2、根据传入的变量的变化 进行结果的更新。

3、计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化,它调用的就是上一次 计算缓存的数据,因此提高了程序的性能。而methods中每调用一次就会重新计算 一次,为了进行不必要的资源消耗,选择用计算属性。

计算属性模糊查询的例子:

<body><divid="app"><inputtype="text"v-model="mytext"><ul><liv-for="dataindatalistcom":key="data">{{data}}</li></ul></div></body>< >varvm=newVue({el:"#app",data:{datalist:["aaa","bbb","ccc","ddd","aa","a","cc","dd"],mytext:''},computed:{datalistcom(){returnthis.datalist.filter(item=>item.indexOf(this.mytext)>-1)}}})</ >

二、监听属性(watch)

上面说到计算属性的时候 初始化的时候就可以被监听到并且计算 但是watch是发生改变的时候才会触发。

当你有一些数据需要随着其它数据变动而变动时,或者当需要在数据变化时执行异步或开销较大的操作时,你可以使用 watch。

例子 :

<body><divid="app"><p>单价:<inputtype="text"v-model="price"></p><p>数量:<inputtype="text"v-model="number"></p><p>计算金额:{{sum}}</p></div></body>< >varvm=newVue({el:"#app",data:{price:100,number:1,sum:0},//监听某一个值或者状态发生变化变化就会触发watchwatch:{//监听的参数的名字要一致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}}}})</ >

计算属性 和属性监听的区别:

1、计算属性变量在computed中定义,属性监听在data中定义。

2、计算属性是声明式的描述一个值依赖了其他值,依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量,当定义的值发生变化时,执行相对应的函数。

下载链接:网站源码/小程序源码/网站模板下载

版权声明

   站内部分内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供网络资源分享服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请 联系我们 一经核实,立即删除。并对发布账号进行永久封禁处理。在为用户提供最好的产品同时,保证优秀的服务质量。


本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。

给TA打赏
共{{data.count}}人
人已打赏
网站技巧

PHP会话控制:cookie和session区别与用法深入理解

2024-9-19 19:43:50

网站技巧

ThinkPHP中自定义错误、成功、异常提示页面的方法

2024-9-19 19:43:52

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索