computed和watch的用法及区别

1. computed:计算属性，应用场景：当一个变量的值受多个变量的值影响。
   解释：计算属性中的属性不需要在data中定义，而且必须要有return，顺带提一句return的原理，return就是把结果返回到调用的地方，并且将程序的控制权一同返回，也就是直接结束了当前的方法。

data(){
    return {
    	firstname:"张",
        lastname:"三"
    }
},
computed(){
    //fullname是自己起的名字，也就是计算属性中的属性，这个值可以直接在页面中显示
    fullname() {
    	return this.firstname+this.lastname
    }
}

2. watch:监听器，应用场景：当一个变量的值影响着多个变量的值。
   监听器watch中的值需要在data中定义，并且函数有默认的回调参数：newval（新值）和oldval（旧值）

data: {
  firstName: '张',
  lastName: '三',
  fullName: '张三r'
},
watch: {
  firstName: function (oldval，newval) {
    this.fullName = newval + ' ' + this.lastName
  },
  lastName: function (oldval，newval) {
    this.fullName = this.firstName + ' ' + newval
  },
  immediate: true,// 代表在wacth里声明了firstName之后立即先去执行其函数方法
  deep: true //深度监听
}

区别：

computed具有缓存，只有在它的依赖发生改变时才会重新求值。如果依赖没有改变，那么调用它就会直接返回之前的缓存，同时computed对于其中变量的依赖有多个的时候，只要其中一个发生了变化就会触发这个函数watch没有缓存，每次只可以对一个变量进行监控，watch可以是异步的而computed则不行。