2023-04-19

watch跟computed的区别

1.功能上:computed是计算属性,watch是监听一个值的变化,然后执行对应的回调。

 2.是否调用缓存:computed中的函数所依赖的属性没有发生变化,那么调用当前的函数的时候会从缓存中读取,而watch在每次监听的值发生变化的时候都会执行回调。

3.是否调用return:computed中的函数必须要用return返回,watch中的函数不是必须要用return。

4.computed默认第一次加载的时候就开始监听;watch默认第一次加载不做监听,如果需要第一次加载做监听,添加immediate属性,设置为true(immediate:true)

5.使用场景:computed----当一个属性受多个属性影响的时候,使用computed-----购物车商品结算。watch–当一条数据影响多条数据的时候,使用watch-----搜索框.

computed计算属性的实现



watch监听属性的实现




watch与computed区别总结

1.computed支持缓存,相依赖的数据发生改变才会重新计算;watch不支持缓存,只要监听的数据变化就会触发相应操作

 2.computed不支持异步,当computed内有异步操作时是无法监听数据变化的;watch支持异步操作

3.computed属性的属性值是一函数,函数返回值为属性的属性值,computed中每个属性都可以设置set与get方法。

  watch监听的数据必须是data中声明过或父组件传递过来的props中的数据,当数据变化时,触发监听器

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • computed和watch的区别? 1、computed 特性 1、是计算值。2、应用:就是可以简化 tempa...
    吕鑫洋阅读 105评论 0 0
  • 30道大概率会考到的题( 5-10题) 本章内容 1,浏览器从输入url到页面加载发生了什么? 2,css常见布局...
    小王子__阅读 431评论 0 0
  • 一、Vue2 1.1 模板语法 1.1.1 模板的理解 html 中包含了一些 JS 语法代码,语法分为两种,分别...
    Cola_Mr阅读 562评论 0 1
  • Vue Vue是一个前端js框架,由尤雨溪开发,是个人项目 Vue近几年来特别的受关注,三年前的时候angular...
    hcySam阅读 301评论 0 0
  • 如果一个值依赖多个属性(多对一),用computed肯定是更加方便的。 如果一个值变化后会引起一系列操作,或者一个...
    默默无闻的小人物阅读 10,913评论 3 10