computed和watch的区别

computed

vue中computed表示为计算属性，是用来计算出一个值的它必须要有return。在调用的时候就像调用一个属性一样不需要加括号。

它可以根据依赖自动缓存如果依赖不变computed值不会重新计算。

watch是监听一个属性变化的，当监听的属性发生变化就会执行一个函数。

watch中还有两个选项

在默认情况下watch监听的值在第一次渲染的时候是不会执行函数的，如果需要可以将immediate值设置为true,immediate默认值为false。

watch:{
	count:{
		handler(){
        	console.log(`count变化了`)
        }
        immediate:true
    }
}

对象中的属性变化时对象本身是不会变化的，如下示例

看控制台，obj的监视器中的函数没有执行。

同样的变化obj对象，obj中的属性n的监视器也是不会执行的。

看控制台，obj.n的监视器中的函数没有执行。

那么如果需求是当obj内部的属性变化时，obj自己也执行函数。就需要使用到deep属性

   "obj":{
      handler(){
        console.log("obj变化了")
      },
       deep: true
    }

那么如果需求是当obj变化时，obj内部属性的监听函数也需要执行。可以在使用watch时也加上deep:true

    "obj.n":{
      handler(){
        console.log("obj.n变化了")
      },
      deep:true
    },

computed 计算属性在依赖发生变化时，会返回计算出来的值，

watch 监听一个属性的变化，并执行一个函数，不需要返回值。