码迷,mamicode.com
首页 > 其他好文 > 详细

vue中computed和watch区别

时间:2021-03-06 14:39:38      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:更新   mode   type   substring   return   str   调用   定义   data   

一、 计算属性(computed)

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

例如:

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

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

因此可改写为:

<body>
<div id="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>
  <div id="app">
    <input type="text"v-model="mytext">
    <ul>
      <li v-for="data in datalistcom":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>
  <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>
varvm = newVue({
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区别

标签:更新   mode   type   substring   return   str   调用   定义   data   

原文地址:https://www.cnblogs.com/zs521/p/14488388.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!