首页 > 其他分享 >Vue中watch和computed的区别和应用场景

Vue中watch和computed的区别和应用场景

时间:2023-03-28 12:03:13浏览次数:45  
标签:Vue 函数 watch Watch 缓存 属性 computed

watch中的函数是不需要调用的,computed内部的函数调用的时候不需要加()。Watch是属性监听,监听属性的变化;computed是计算属性,通过属性计算而得来的属性。watch需要在数据变化时执行异步或开销较大的操作时使用。computed 属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用。

watch需要在数据变化时执行异步或开销较大的操作时使用

对于任何复杂逻辑或一个数据属性在它所依赖的属性发生变化时,也要发生变化,这种情况下,我们最好使用计算属性computed。

Computed:属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用;computed中的函数必须用return返回最终的结果。当computed中的函数所依赖的属性如果没有发生改变的时候,那么调用当前函数的时候结果会从缓存中读取。

Watch:一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作。

Computed:当一个属性受多个属性影响的时候就需要用到computed。最典型的例子:购物车商品结算的时候。

Watch:当一条数据影响多条数据的时候就需要用watch搜索数据。

标签:Vue,函数,watch,Watch,缓存,属性,computed
From: https://www.cnblogs.com/xmyfsj/p/17264609.html

相关文章

  • VUE实现购物车界面
    以下是一个用Vue.js实现购物车的简单示例:在Vue组件中定义购物车数据:data(){return{cart:[],total:0}}在商品列表或详情页中添加“加入购物......
  • 记录优化vue项目首屏加载慢的过程
    一背景当项目部署在外网时,前端首屏加载的平均时间是10S,通过开发者工具查看加载的包,例如chunk-libs.xxx.js的有2.9MB,因为包太大导致加载慢,严重影响了用户体验。所以解决......
  • vue全家桶进阶之路8:Axios的安装与HTTP请求实战
    Axios是一个基于Promise的HTTP客户端,用于在浏览器和Node.js中发送HTTP请求。它可以使用在Vue中发送请求以及与后端API进行交互。在Vue中使用Axios可以通过以下步骤:安装A......
  • vue 导出方法blob文件流
    axios({method:'get',url,params,headers:{'Content-Type':'application/json;application/octet-stream'},......
  • vue2+element-ui+springboot+mybatis-plus获取当前账户进行修改密码详细教程
    以下内容仅供学习使用新建一个dto类,用于专门修改当前账户的使用importlombok.Data;@DatapublicclassUserPasswordDTO{privateStringusername;priva......
  • Vue 核心(二)
    目录Vue核心(二)八、绑定样式1、class2、style九、条件渲染1、渲染指令2、使用示例十、列表渲染1、基本语法2、key原理3、列表过滤4、列表排序5、数组更新检测6......
  • vue使用&Mac+idea的vue开发环境配置参考
    vue使用&Mac+idea的vue开发环境配置参考链接:https://blog.csdn.net/weixin_43123409/article/details/125624203......
  • 记录--Vue 3 中的极致防抖/节流(含常见方式防抖/节流)
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助今天给大家带来的是Vue3中的极致防抖/节流(含常见方式防抖/节流)这篇文章,文章中不仅会讲述原来使用的防抖......
  • Vue中路由的创建、跳转
    一、创建路由1、先创建一个route.js文件,创建路由,导出路由。//创建路由,从vue-router中导入两个方法。import{createWebHistory,createRouter}from"vue-r......
  • 使用copilot生成vue响应式原理
    //生成vue的响应式原理functiondefineReactive(obj,key,val){//递归observe(val);//创建Dep实例constdep=newDep();Object.defineProperty(obj......