computed（计算属性）

计算属性：
**计算结果并返回，只有当被计算的值发生改变时才会触发**<br />**（计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算)**

new Vue({
    el: '#id',
    template: `<div>
        <span>Name: {{name}}<span>
    </div>`,
    data: {
        firstName: 'Leo',
        lastName: 'Alan'
    },
    computed: {
        name () {
            return `${this.firstName} + ${this.lastName}`
        }
    }
})

一般接受一个具有 getter和 setter 函数的对象，用来创建可写的 ref 对象:

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: val => {
    count.value = val - 1
  }
})
plusOne.value = 1
console.log(count.value) // 0

watch（侦听属性）

监听某一个值，当被监听的值发生变化时，执行对应的操作
(与computed的区别是，watch更加适用于监听某一个值的变化并做对应的操作，比如请求后台接口等，而computed适用于计算已有的值并返回结果)

watch有两个属性：deep 和 immediate
deep就是要监听对象里面的嵌套属性，一旦子属性改变，对象也发生改变
immediate就是第一次渲染时是否执行watch的函数，默认为flase

new Vue({
    el: '#id',
    template: `<div>
        // ...
    </div>`,
    data: {
        firstName: 'Leo',
        lastName: 'Alan',
        obj1: {
            a: 0
        }
    },
    watch: {
                               // 监听firstName,当firstName发生变化时就会执行该函数
        firstName () {
                          // 执行需要的操作...
                        // 注:初始化不会执行，只有当被监听的值(firstName)发生变化时才会执行
        },
                   // 监听lastName
        lastName: {
            handler (newName, oldName) {
                // 执行需要的操作...
            },
            immediate: true             // true: 初始化时就会先执行一遍该监听对应的操作    
        },
        obj1: {
            handler () {
                // 执行需要的操作...
            },
            deep: true // 该属性默认值为false. 
                   // 当被监听的值是对象,只有deep为true时,对应属性的值(obj1.a)发生变化时才能触发监听事件，但是这样非常消耗性能
        },
                          // 监听对象具体的属性， deep就不需要设置为true了
        'obj1.a': {
            handler () {
                // 执行需要的操作...
            }
        }
    }
})

不应该使用箭头函数来定义 watcher 函数

watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态，这些都是计算属性无法做到的

method、computed和watch的区别

method方法：

页面数据每次重新渲染都会重新执行，性能消耗大，除非不希望有缓存的时候用

computed计算属性：

依赖其他属性计算值，并且computed的值有缓存，只有当计算值变化的时候才会返回内容

watch侦听属性：

监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作，比如异步操作

总结：
除非不希望缓存，一般都不会用method方法
一般来说需要依赖别的属性来动态获取值得时候可以用computed
对于监听到值得变化需要做异步操作或开销较大的操作时用watch