watch和computed的区别

104 阅读2分钟
watch

监听某一个值改变自动触发,取代了更新的生命周期

watch:{ // 只适用于基本类型 n(){ // n改变的时候执行 (限制 n必须基本类型) }, todos:{ handler(){ // this.todo_start= this.todo_end= }, deep:true, immediate:true // 是否初始化的时候执行 } }

watch里面深度监听的deep做了什么? //基本类型和引用类型的区别 引用类型的深拷贝和浅拷贝。, 如果浅拷贝怒 (拷贝了地址,所以改前和改后同一个地址,就监听不出来改变),所以加了deep:true,深拷贝了,或者 将对象值一一对比,将对象本身改变成字符进行比较

## computed****

监听改变自动计算出结果,不分引用类型和基本类型,返回值就是计算的结果 computed:{ // yf计算返回的结果,调用不需要() ,函数必须要return值 yf(){ // 监听里面调用的值改变, return 值 } }

watch和computed的区别

优缺点和使用场景

1 watch和computed 共同的特点,可以监听某个值改变,自定执行逻辑 watch 分基本类型和引用类型两种监听好,监听的值,要作为函数名或者属性名,当这个值改变的时候会自动执行 watch 有触发间隔 ,相当于有截流的效果 ***** 监听的函数里面可以执行异步 (可以请求数据) watch 使用与 一个属性改变影响多个值

computed 不分引用类型和基本类型,函数作为函数的值,调用的时候不需要(),必须要有返回值 会将上一次的计算结果,进行缓存,下一次计算的时候从缓存里面获取 ****** 函数里面不能够执行异步,不能够强求数据 computed 多个值计算出一个结果

ps 除了异步 其它情况下建议是用 computed 代码好维护