Vue中Computed和Watch的用法及区别

 4663

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


Vue中Computed和Watch的用法及区别


一、 计算属性(computed)

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

例如:

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

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

因此可改写为:

  1. <body>
  2. <div id="app">
  3.     {{ changewords }} // 渲染 不用写()
  4. </div>
  5. </body>
  6. <script>
  7. var vm = new Vue({
  8.     el: "#app",
  9.     data:{},
  10.   // 计算属性
  11.     computed:{
  12.         changewords(){
  13.             return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1)
  14.         }
  15.     }
  16. })
  17. </script>

总结:

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

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

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

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

  1. <body>
  2. <div id="app">
  3.     <input type="text" v-model="mytext">
  4.     <ul>
  5.         <li v-for="data in datalistcom" :key="data">
  6.             {{ data }}
  7.         </li>
  8.     </ul>
  9. </div>
  10. </body>
  11. <script>
  12. var vm = new Vue({
  13.     el: "#app",
  14.     data:{
  15.         datalist:["aaa","bbb","ccc","ddd","aa","a","cc","dd"],
  16.         mytext:''
  17.     },
  18.     computed:{
  19.         datalistcom(){
  20.             return this.datalist.filter(item=>item.indexOf(this.mytext)>-1)
  21.         }
  22.     }
  23. })
  24. </script>

二、监听属性(watch)

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

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

例子 :

  1. <body>
  2. <div id="app">
  3.     <p>单价:<input type="text" v-model="price"></p>
  4.     <p>数量:<input type="text" v-model="number"></p>
  5.     <p>计算金额:{{sum}}</p>
  6. </div>
  7. </body>
  8. <script>
  9. var vm  = new Vue({
  10.     el:"#app",
  11.     data:{
  12.         price:100,
  13.         number:1,
  14.         sum:0
  15.     },
  16.     //监听某一个值或者状态发生变化 变化就会触发watch 
  17.     watch:{
  18.         // 监听的参数的名字要一致
  19.         price(){
  20.             console.log(this.price)
  21.             if(this.price*this.number < 1000 && this.price*this.number > 0){
  22.                 this.sum = this.price*this.number + 100
  23.             }else{
  24.                 this.sum = this.price*this.number
  25.             }
  26.         },
  27.         number(){
  28.             console.log(this.price)
  29.             if(this.price*this.number < 1000 && this.price*this.number > 0){
  30.                 this.sum = this.price*this.number + 100
  31.             }else{
  32.                 this.sum = this.price*this.number
  33.             }
  34.         }
  35.     }
  36. })
  37. </script>

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

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

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




TAG标签:
本文网址:https://www.zztuku.com/index.php/detail-7791.html
站长图库 - Vue中Computed和Watch的用法及区别
申明:如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐

    16个可爱表情的矢量素材