Vue中计算属性和监听属性

目录

1.计算属性computed

2.监听属性watch

---

1.计算属性computed

computed计算属性：

1.必须有return返回

2.使用方法和data中的数据一样，但是类似一个执行方法

3.如果函数依赖的属性没有发生变化，则从缓存中读取

示例说明：

提供的函数将用作属性 vm.reversedMessage 的 getter 。

vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

 computed和method对比：两个效果都是一样的，只不过computed基于它的依赖缓存，只有相关依赖发生变化才会重新获取值，而使用methods在重新渲染时，函数总会调用执行

2.监听属性watch

Vue中可以通过watch进行某个值的监听，当值发生变化时，运行对应的逻辑

watch监视属性：

1.watch的函数名必须和data中的数据名保持一致

2.watch中的函数有两个参数（newValue,oldValue）

3.watch中的函数是不需要调用的

4.只会去监测数据值是否发生变化，而不会去监测数据的地址是否发生变化，要深度监测，需要配合deep:true属性使用

5.immediate:true页面首次加载的时候做一次监听

简写的watch:

简写版的缺点：没办法进行深度监视，以及初始化进行监测

完整版watch:

案例： 千米与米之间的换算：