本篇文章介绍了vue中的计算属性computed和监听属性watch的区别，希望对学习vue前端框架的同学有帮助！
一、 计算属性（computed）
1.计算属性是为了模板中的表达式简洁，易维护，符合用于简单运算的设计初衷。
例如：
<pid="app">{{myname.substring(0,1).toUpperCase()+myname.substring(1)}}</p>
运算过于复杂，冗长，且不好维护，因此我们对于复杂的运算应该 使用计算属性的方式去书写。
因此可改写为：
<body><divid="app">{{changewords}}//渲染不用写()</div></body><script>varvm=newVue({el:"#app",data:{}, //计算属性computed:{changewords(){returnthis.myname.substring(0,1).toUpperCase()+this.myname.substring(1)}}})</script>
总结：
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><script>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)}}})</script>二、监听属性（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><script>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}}}})</script>计算属性 和属性监听的区别：
1、计算属性变量在computed中定义，属性监听在data中定义。
2、计算属性是声明式的描述一个值依赖了其他值，依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量，当定义的值发生变化时，执行相对应的函数。
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/38770.html；
