computed/watch深度监听

简介: computed/watch深度监听

Vue.js 中,computedwatch 是两种处理动态数据变化并触发相应逻辑的方法,但它们的工作方式和用途有所不同。

computed

computed 属性用于声明一个依赖于其它响应式数据(如 dataprops 或其他 computed 属性)的属性。当这些依赖发生变化时,computed 属性会重新计算并返回新的值。

computed 属性默认是深度监听的,意味着如果 computed 属性的依赖是一个对象或数组,那么该对象或数组内部的任何变化都会触发 computed 属性的重新计算。

示例:

export default {  
  data() {  
    return {  
      items: [  
        { id: 1, name: 'Item 1' },  
        { id: 2, name: 'Item 2' }  
      ]  
    };  
  },  
  computed: {  
    // 深度监听 items 数组中的对象变化  
    totalNamesLength() {  
      return this.items.reduce((total, item) => total + item.name.length, 0);  
    }  
  }  
};

在上面的例子中,如果 items 数组中的任何一个对象的 name 属性发生变化,totalNamesLength computed 属性都会重新计算。

watch

watch 选项用于观察和响应 Vue 实例上的数据变化。默认情况下,watch 是浅监听的,意味着它不会观察到对象内部属性的变化。如果你需要深度监听对象或数组的变化,你需要在 watch 选项的配置中明确指定。

示例:

export default {  
  data() {  
    return {  
      items: [  
        { id: 1, name: 'Item 1' },  
        { id: 2, name: 'Item 2' }  
      ]  
    };  
  },  
  watch: {  
    // 深度监听 items 的变化  
    items: {  
      handler(newVal, oldVal) {  
        console.log('items changed:', newVal);  
      },  
      deep: true // 启用深度监听  
    }  
  }  
};

在上面的例子中,由于 deep 选项设置为 true,所以 watch 会深度监听 items 数组的变化,包括数组内部对象属性的变化。

总结

  • computed 属性默认深度监听其依赖的数据变化,并自动重新计算。
  • watch 默认浅监听数据变化,需要设置 deep: true 以启用深度监听。

选择使用 computed 还是 watch 通常取决于你的需求:

  • 如果你需要基于已有数据计算新值,并且这个值需要被缓存并在其它地方复用,使用 computed
  • 如果你需要在数据变化时执行异步操作或复杂逻辑,或者仅当数据变化时才触发某些行为,使用 watch
目录
相关文章
|
6月前
|
Web App开发 人工智能 JavaScript
Nanobrowser:开源版OpenAI Operator!AI自动操控浏览器,复杂网页任务一键搞定
Nanobrowser 是一款开源的 Chrome 扩展工具,基于多智能体系统实现复杂的网页任务自动化,支持多种大型语言模型,完全免费且注重隐私保护。
774 1
|
缓存 监控 JavaScript
Vue.js中的计算属性 computed 与监听属性 watch深入探索
Vue.js中的计算属性 computed 与监听属性 watch深入探索
511 0
在 Vue.js 中使用 watch 来监听对象属性的变化
在 Vue.js 中使用 watch 来监听对象属性的变化
|
开发框架 JavaScript 开发者
什么是渐进式框架
什么是渐进式框架
532 0
|
JavaScript
vue-demi
vue-demi
276 0
|
存储 设计模式 Java
阿里官方代码规范
这篇文章详细介绍了阿里巴巴官方的代码规范,包括命名规则、常量使用、方法覆写、并发处理、注释规范、数据库设计等多个方面,旨在提高代码的可读性、维护性和扩展性。
|
11月前
|
存储 移动开发 JavaScript
vuex的工作流程,模块化使用案例分享,及状态持久化
vuex的工作流程,模块化使用案例分享,及状态持久化
232 0
|
JavaScript API 数据格式
【Vue 3】如何封装一个超级好用的 Hook!
【Vue 3】如何封装一个超级好用的 Hook!
|
Linux Shell 开发工具
linux 搭建git仓库 git代码仓库 (小团队内部合作)
linux 搭建git仓库 git代码仓库 (小团队内部合作)
671 1
|
存储 运维 Serverless
Serverless 使用OOS将http文件转存到对象存储
阿里云OOS提供了一种高效、灵活的解决方案,用于自动化HTTP文件到对象存储的转存。通过OOS,用户可以使用函数计算FC执行Python脚本,直接将文件从HTTP源转移到OSS,无需本地存储或额外ECS实例,降低了成本,提高了效率,并减少了错误。实践步骤包括创建OOS模板并在FC上运行。使用此功能需开通FC服务,创建RAM角色并授权访问OSS。附录中提供了示例模板和Python脚本说明。

热门文章

最新文章