Vue中watch与computed的区别


一、 计算属性(computed)

1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷。对于运算过于复杂,冗长,且不好维护,因此我们对于复杂的运算应该 使用计算属性的方式去书写。

下面来看代码体验一下吧

"app">

{{ myname.substring(0,1).toUpperCase() + myname.substring(1) }}

由上可以看出在html标签中的代码过多,不方便于我们进行对代码的管理,因此我们可以利用计算属性computed对其进行简化

"app">

{{ changewords}}

总结:

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

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

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

二、监听属性(watch)

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

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

看下面代码体验一下吧

body>
        

单价:

数量:

计算金额:{{sum}}

三.它们的使用场景

computed :        当一个属性受多个属性影响的时候就需要用到computed     最典型的例子: 如购物车商品结算的时候 watch:     当一条数据影响多条数据的时候就需要用watch     如搜索数据  
vue