computed 计算属性

计算属性基于 data 中声明过或者父组件传递的 props 中的数据通过计算得到的一个新值，这个新值只会根据已知值的变化而变化，简言之：这个属性依赖其他属性，由其他属性计算而来的。

实例：

<p>姓名：{{ fullName }}</p>
... ...
data: {
    firstName: 'David',
    lastName: 'Beckham'
},
computed: {
    fullName: function() { //方法的返回值作为属性值
            return this.firstName + ' ' + this.lastName
    }
}

以属性访问的形式调用，即在页面中使用 {{ 方法名 }} 来显示计算的结果。

此外computed有一个重要的特点，就是 computed 带有缓存功能。只有当 computed 属性被使用后，才会执行 computed 的代码，在重复的调用中，只要依赖数据不变，直接取缓存中的计算结果。只有依赖型数据发生改变，computed 才会重新计算。

watch 监听属性

通过 vm 对象的 $watch() 或 watch 配置来监听 Vue 实例上的属性变化，或某些特定数据的变化，然后执行某些具体的业务逻辑操作。当属性变化时，回调函数自动调用，在函数内部进行计算。其可以监听的数据来源：data，props，computed 内的数据。

实例：

watch: {
    // 监听 data 中的 firstName，如果发生了变化，就把变化的值给 data 中的 fullName， val 就是 firstName 的最新值
    firstName: function(val) { 
        this.fullName = val + ' ' + this.lastName
    },
    lastName: function(val) {
        this.fullName = this.firstName + ' ' + val
    }    
}
// 由上可以看出 watch 要监听两个数据，而且代码是同类型的重复的，所以相比用 computed 更简洁

注：监听函数有两个参数，第一个参数是最新的值，第二个参数是输入之前的值，顺序一定是新值，旧值，如果只写一个参数，那就是最新属性值。
此外，watch有两个选项需要注意，一个是immediate，另一个是deep。

data: {
    fullName: {
        firstName: 'Peter',
        lastName: 'Parker'
    }
},
watch: {
    fullName: {
        handler(newVal, oldVal) {
            console.log(newVal);
            console.log(oldVal);
        },
        deep: true//监听一个对象内部的变化 默认为否
        immediate: true//是否在第一次渲染的时候要执行这个函数 默认为否
    }
}

如何回答computed和watch的区别

computed是计算属性的意思，watch是监听的意思。

computed:

1.computed是用来计算出一个值的，这个值在调用的时候不需要加括号，和取data对象里的数据属性一样，以属性访问的形式调用；

2.computed 属性值默认会缓存计算结果，在重复的调用中，只要依赖数据不变，直接取缓存中的计算结果，只有依赖型数据发生改变，computed 才会重新计算。

3.在computed中的，属性都有一个 get 和一个 set 方法，当数据变化时，调用 set 方法。

watch:

1.watch是用来监听的，它有2个选项immediate和deep。

2.immediate表示是否在第一次渲染的时候要执行这个函数。
deep如果我们监听一个对象那么是否要看里面的属性的变化。
定义:如果某个属性变化了我就去执行这个函数。

3.watch支持异步。

4.不支持缓存，监听的数据改变，直接会触发相应的操作；