一、定义
1、computed是计算属性，依赖其他属性值，并且computed的值有缓存。只有computed依赖的属性值发生变化，computed的值才会重新计算。
运用场景：一个数据属性在它所依赖的属性发生变化时，也要发生变化。对于任何复杂逻辑，你都应当使用计算属性。
2、watch侦听器没有缓存性，起到观察的作用，即监听数据的变化。watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。
运用场景：侦听一个数的变化，当该数据变化，来处理其他与之相关数据的变化，即一个数据影响别的多个数据。
3、methods选项中的定义的函数称为方法，在Vue实例化的过程中，methods对象中的方法将被混入到Vue实例中，成为Vue实例的方法。可以直接通过Vue实例访问这些方法。需要主动调用methods中的函数才能执行。
二、computed计算属性
1、使用方法和data中的数据一样，但是类似一个执行方法
2、在调用时候不加()
3、必须有return返回
4、如果函数所依赖的属性没有发生变化，从缓存中读取
示例
<template> <div class="about"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> </template> <script> export default { name: 'About', data() { return { message: 'Hello' } }, computed: { // 计算属性的 getter reversedMessage: function () { return this.message.split('').reverse().join('') } }, } </script>
在以上代码中我们定义了一个计算属性：reverseMessage，其值为一个函数并返回我们需要的结果。之后在模板中就可以像使用message一样使用reverseMessage。
<template> <div class="about"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage() }}"</p> </div> </template> <script> export default { name: 'About', data() { return { message: 'Hello' } }, methods:{ reversedMessage () { return this.message.split('').reverse().join('') } } } </script>
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
计算购物车商品总价示例
computed:{ Total(){ let price = 0; for (let i = 0;i<this.tableData.length;i++) { price += this.tableData[i].taxUnitPrice * this.tableData[i].invNum } this.detailedSend.total = price return price; }, },
三、watch监听
1、watch的函数名称必须和data中的数据名一致
2、watch中的函数有两个参数，前者是newVal，后者是oldVal
3、watch中的函数是不需要调用的
4、watch只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变，
例如：object.a变了，object没变。
要深度监听需要配合deep：true属性使用。
5、immediate:true 它表示在第一次渲染的时候是否要执行这个函数
搜索框示例
watch: { keyword () { const result = [] this.jsonData.forEach(val => { if (val.name.indexOf(this.keyword) > -1) { result.push(val.name) } }); this.cityList = result } },
四、区别
1、功能：computed是计算属性；watch是监听一个值的变化执行对应的回调
2、是否调用缓存：computed函数所依赖的属性不变的时候会调用缓存；watch每次监听的值发生变化时候都会调用回调
3、是否调用return：computed必须有；watch可以没有
4、使用场景：computed当一个属性受多个属性影响的时候；例如购物车商品结算；watch当一条数据影响多条数据的时候，例如搜索框
5、是否支持异步：computed函数不能有异步；watch可以
