一.计算属性computed
- 支持缓存，只有依赖数据发生改变，才会重新进行计算
- 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
- computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
- 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
- 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
二.监听属性watch
- 不支持缓存，数据变，直接会触发相应的操作；
- watch支持异步；
- 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
- 当一个属性发生变化时，需要执行对应的操作；一对多；
- 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
immediate：组件加载立即触发回调函数执行， deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。
举个例子：
1.computed例子
<template>
<div>
<p>{{ reversedMessage }}</p>
</div>
</template>
<script>
export default {
name: 'test1',
data () {
return {
message: 'hello world',
number: 1
}
},
computed: {
// 字符串反转
reversedMessage () {
return this.message.split('').reverse().join('') + this.number
}
}
}
</script>
2.watch例子
<template>
<div>
<p>{{ this.number }}</p>
</div>
</template>
<script>
export default {
name: 'test1',
data () {
return {
number: 1
}
},
created () {
setTimeout(() => {
this.number = 100
}, 2000)
},
watch: {
number (newVal, oldVal) {
console.log('number has changed: ', newVal)
}
}
}
</script>
我自己简单的理解了一下,就是多个数据去影响一个数据用computed,而watch是一个数据去影响多个数据
今天在写一个账单页面的时候，里面有大量的input框支持用户修改，并且值之间通过计算公式可以相互影响，我原本是用的计算属性，但是 使用之后发现计算之后的值并不能修改,比如c:function(){returnthis.a+this.b},我拿到a和b两个input框的值并且将计算之后的c赋值给另外一个input框，但是c的值并不能修改，而实际项目中计算之后的值并不一定是正确的值，可以提供修改，此时可以考虑使用watch,其实一般 来说涉及到大量的input框的修改和计算时基本都是使用watch,watch监听的属性必须是data里面的属性，当你想监听data里面对象里面的属性 时，不能用a.xxx这种写法，这样会报错，你可以用引号包含起来，比如"a.xxx"，这样就不会报错，而且能实现计算之后的东西能修改。 其实computed计算属性里面默认只有getter，不过在需要时你也可以提供一个setter，去达到修改的目的。
