computed和watch区别

computed

应用场景：
模板中涉及到复杂运算的
使用：

//template
{{reservemsg}}


computed:{
    reservemsg:{
        get:function(){
            return this.message.split('').reverse().join('');
            }
        }
    }
}

响应式
当计算属性依赖的值发生变化时候，计算属性也会更新，模板中的值也会发生变化>
计算属性和data中的属性不能同名

计算属性依赖缓存

1. 计算属性有对应的watcher
2. watcher实例有一个dirty控制是否缓存。当watcher.dirty为true时候，调用get方法重新求值，当为false时候，读取watch的值
3. 生命周期初始化时候，值为undefined，只有在模板挂载数据时候，computed才会通过get获取到真正的值，并保存到watch.value中

watch

应用场景：
数据发生大的变化且执行异步操作或者开销较大的操作
当监听的是object时候，当对象内部属性发生变化时候，不会触发监听函数的执行，想去深度监听，需要添加deep:true
语法
handler: 侦听函数
deep:true侦听对象内部属性变化
immediate:true 控制侦听函数立刻执行一次

  watch: {
	person:{
    	handler:function(newval,oldval){
    			console.log(newval+'-----'+oldval)
    		},
    		//深度监听
    		deep:true,
    		//立即执行
    		immediate:true
    	}
  },

引用大神地址：https://juejin.cn/post/6917805693860839431#heading-11