watch与computed的区别(watch和compute的区别)

手表和电脑的区别大家好，我是帅哥。今天我就来告诉大家手表和电脑的区别。我们直接开始吧。

功能上：compute是计算属性，watch是监听某个值的变化，然后执行相应的回调。

是否调用缓存：compute中的函数所依赖的属性没有改变。那么当当前函数被调用时，就会从缓存中读取，每次监测到的值发生变化时，watch都会执行回调。

是否调用return：compute中的函数必须使用return，而watch中的函数不需要使用return。

Computed默认在第一次加载时开始监听；watch默认不监听第一次加载的时间。如果需要监听第一次加载的时间，添加immediate属性并设置为true

使用场景：compute----当一个属性受多个属性影响时，使用compute----购物车产品结算。watch当一条数据影响多条数据时，使用watch-----搜索框。

watch的实现

bodydivid='app'姓氏：输入类型='text'v-model=firstName名字：输入类型='text'v-model=lastName名字：span{{fullname}}/span/div/bodyscripttype='text/javascript'varapp=newVue({el:'#app',data:{firstName:'z',lastName:'s',fullname:'zs'},watch:{firstName(newval){this.fullname=newval+this.lastName},lastName(newval){this.fullname=this.firstName+newval}}})/script

computed的实现

bodydivid='app'姓氏：输入类型='text'v-model=firstName名字：输入类型='text'v-model=lastName名字：span{{fullname}}/span/div/bodyscripttype='text/javascript'varapp=newVue({el:'#app',data:{firstName:'z',lastName:'s'},compated:{fullname(){returnthis.firstName+this.lastName}}})/脚本

watch与computed区别总结

compute支持缓存，只有依赖数据发生变化时才会重新计算；watch不支持缓存，只要监控的数据发生变化就会触发相应的操作。

计算不支持异步操作。当compute中有异步操作时，无法监听数据变化；watch支持异步操作。

计算出的属性的属性值是一个函数，函数的返回值就是该属性的属性值。Computed中的每个属性都可以有set和get方法。watch监听的数据必须是父组件传递的data中声明的数据或者props中的数据。当数据发生变化时，监听器被触发。

最后

整理了75道JS高频面试题，并给出了答案和分析。基本上可以保证你能够应对面试官关于JS的问题。

有需要的朋友可以点击下方卡片免费领取并分享